Ｊａｖａ　Ｓｃｒｉｐｔ

最終更新日を表示
表示例

　　　

記述例

以下を表示させたい位置に記述して下さい。
<BODY>と</BODY>タグの間に記載


<SCRIPT language="JavaScript">
<!--
document.write("Last updated: ", document.lastModified, "<BR>");
//-->
</SCRIPT>

備　考

「 last update」　の部分を「更新日」などに書き換える。

時間を画像でリアルタイム表示
表示例
 

記述例は下記より取得して下さい。　　

一番役立つＪａｖａＳｃｒｉｐｔ  http://www.moon.sannet.ne.jp/redcap/

選択したページにャンプ
表示例

メニューを選んでください

記述例

以下を表示させたい位置に記述して下さい。
<BODY>と</BODY>タグの間に記載


<SCRIPT language="JavaScript">

// 選択したページにジャンプ
function jump(theForm) {
var sIndex = theForm.urlsel.selectedIndex;
var url = theForm.urlsel.options[sIndex].value;
var newWin = open(url);
}

</SCRIPT></CENTER>
<CENTER>
<FORM name="myForm">
<P>メニューを選んでください<SELECT name="urlsel" size="1">
<OPTION value="http://www.fsinet.or.jp/~takkenfi/">府中稲城支部のホームページ</OPTION>
<OPTION value="http://takkenfi.hoops.livedoor.com/menu.htm">Top MENU</OPTION>
<OPTION value="http://takkenfi.hoops.livedoor.com/menu-tisiki.htm">不動産知識</OPTION>
<OPTION value="http://takkenfi.hoops.livedoor.com/menu-gaido.htm">ビジネス実用ガイド</OPTION>
<OPTION value="http://takkenfi.hoops.livedoor.com/menu-rink.htm">リンク集</OPTION>
</SELECT><INPUT type="button" value="ジャンプ!" onclick="jump(this.form)"></P>
</FORM>
</CENTER>
</TD>
</TR>
</TBODY>
</TABLE>
<P></P>
<TABLE border="0" width="600" cellpadding="10">
<TBODY>
<TR>
<TD bgcolor="#ffcccc"></TD>
</TR>
</TBODY>
</TABLE>
<P>
<BR>
</P>
<TABLE border="0" width="600" cellpadding="10">
<TBODY>
<TR>
<TD bgcolor="#ffcccc"></TD>
</TR>
<TR>
<TD></TD>
</TR>
</TBODY>
</TABLE>

備　考

パスワードを設定
表示例
　
（パスワード　takkenfi  ）

記述例

「プログラム①」をHTMLのできるだけ上の方にコピーしてください
「プログラム②」をテキストボックスを表示させたいところにコピーしてください。

プログラム①
<SCRIPT language="JavaScript">
<!--
i=0;
function Check(){
i++;
p="takkenfi";
wo=document.PA.pass.value;
if(wo==p){
location.href="http://www.fsinet.or.jp/~takkenfi/jimurenraku.htm";
}
else{
alert("パスワードが間違っています");
document.PA.pass.value="";
if(i>=2){
location.href="http://www.fsinet.or.jp/~takkenfi/index.htm";
}}}
// -->
</SCRIPT>

プログラム②
<FORM name="PA">
<INPUT type="password" name="pass" size="20">
<INPUT type="button" value=" OK " onclick="Check()">
<INPUT type="reset" value="クリアー">
</FORM>

備　考
・６行目にある「p="takkenfi";」の「takkenfi」がパスワードになります。任意のパスワードに設定してください
・９行目にある「location.href="～";」にパスワードが正しい場合に進むページのアドレスを指定します。
・15行目にある「location.href="～";」に２回パスワードを間違えた場合に進むページのアドレスを指定します。

メッセージを左から１文字ずつ表示
表示例
記述例
「プログラム①」をHTMLのできるだけ上の方にコピーしてください
「プログラム②」をテキストボックスを表示させたいところにコピーしてください。

プログラム①
<script language="JavaScript">
<!--
function startMsg() {
str = ""; i = 0;
msg = "ここにメッセージを記述します" //ここにメッセージを記述
timerID = setTimeout("viewMsg()",200); //数値を増やすと表示が遅くなる
}
function viewMsg() {
clearTimeout(timerID);
if(i < msg.length) {
str = str + msg.charAt(i); i++;
document.form1.text1.value = str;
timerID = setTimeout("viewMsg()",200); //数値を増やすと表示が遅くなる
}else
startMsg();
}
//-->
</script>

プログラム②
<body bgcolor="#FFFFFF" text="#000000" onLoad="startMsg()">
<form name="form1">
<input type="text" name="text1" size="30">
</form>
</body>


備　考


ＨＴＭＬ（タグ）
ボタンを作る
表示例
　

記述例

以下を表示させたい位置に記述して下さい。
<BODY>と</BODY>タグの間に記載

<FORM>　
<INPUT onclick="history.go(-1)" type="button" value="一つ前へ戻る">
<INPUT onclick="history.go(1)" type="button" value="一つ後へ進む">
<A href="menu.htm">
<INPUT onclick="location='../java.html'" type="button" value="メニューへ戻る"></A>
<INPUT onclick="history.go(0)" type="button" value="再読み込み"></FORM>


備　考

4つ目のINPUTタグでは、locationの値に任意のURLを入れることでそのページに移動させることができます。

リンクボタンを作る
表示例
　　　　　　　　　　　　

記述例

以下を表示させたい位置に記述して下さい。

<FORM>　　　　　　　　　　　<A href="http://www.fsinet.or.jp/~takkenfi/"><INPUT type="button" value="宅建府中稲城支部ＨＰ" onclick="location.href='http://www.fsinet.or.jp/~takkenfi/'"></A>　</FORM>


備　考

ｇｏｏの辞書機能を追加する
表示例
dictionary

英和 和英 国語新語

記述例

以下を表示させたい位置に記述して下さい。
<BODY>と</BODY>タグの間に記載

<TR>
<TD width="561" bgcolor="#ffe6e6"><B>表示例</B><BR>
<CENTER>
<TABLE cellspacing="0" cellpadding="0" border="0">
<TBODY>
<TR>
<TD><IMG height="20" alt="dictionary" src="goo_dic.gif" width="233"><BR>
<INPUT size="30" name="MT"> <INPUT type="submit" value="検索"><BR>
<FONT size="-1"><INPUT type="radio" checked value="0" name="sw">英和 <INPUT type="radio" value="1" name="sw">和英 <INPUT type="radio" value="2" name="sw">国語<INPUT type="radio" value="3" name="sw">新語</FONT><BR>
</TD>
</TR>


備　考

検索エンジンが検索可能なサーチエンジン
表示例
JavaScriptを使った簡単メタ検索

キーワード

記述例

以下を表示させたい位置に記述して下さい。
<BODY>と</BODY>タグの間に記載

<FORM name="imput">キーワード<BR>
<INPUT name="txtKeyword"> <INPUT type="reset" value="リセット"></FORM>
</TD>
</TR>
<TR>
<TD>
<FORM name="goo" action="http://www.goo.ne.jp/default.asp" target="_blank"><INPUT type="hidden" maxlength="80" size="17" name="MT"><INPUT onclick="if(setParam())document.goo.submit()" type="button" value="goo検索" name="bt1"></FORM>
</TD>
</TR>
<TR>
<TD>
<FORM name="yahoo" action="http://search.yahoo.co.jp/bin/search" target="_blank"><INPUT type="hidden" maxlength="80" size="17" name="p"><INPUT onclick="if(setParam())document.yahoo.submit()" type="button" value="yahoo!検索" name="bt1"></FORM>
</TD>
</TR>
<TR>
<TD>
<FORM name="google" action="http://www.google.com/search" target="_blank"><INPUT type="hidden" maxlength="80" size="17" name="q"><INPUT onclick="if(setParam())document.yahoo.submit()" type="button" value="google!検索" name="bt1"></FORM> </TD>
</TR>


備　考

ｇｏｏｇｌｅの検索機能を追加する
表示例
google
Google

記述例

以下を表示させたい位置に記述して下さい。
<BODY>と</BODY>タグの間に記載

<TR>
<TD><A href="http://www.google.com/"><IMG alt="Google" src="Logo_40wht.gif" align="absMiddle" border="0"></A> <INPUT maxlength="255" size="31" name="q"> <INPUT type="hidden" value="ja" name="hl"><INPUT type="submit" value="Google 検索" name="btnG"></TD>
</TR>

備　考

Ｉｎｆｏｓｅｅｋの検索機能を追加する
表示例
infoseek

記述例

以下を表示させたい位置に記述して下さい。
<BODY>と</BODY>タグの間に記載

<FORM action="http://www.infoseek.co.jp/Titles" method="get">
<DIV align="center"><INPUT maxlength="256" size="35" name="qt"> <INPUT type="submit" value="infoseek 検索"> <INPUT type="reset" value="リセット"> <INPUT type="hidden" value="JP" name="sv"><INPUT type="hidden" value="noframes" name="lk"><INPUT type="hidden" value="JG" name="rt"><INPUT type="hidden" value="500" name="svx"></DIV>
</FORM>

備　考

ＹＡＨＯＯの検索機能を追加する
表示例
yahoo!

記述例

以下を表示させたい位置に記述して下さい。
<BODY>と</BODY>タグの間に記載

<FORM action="http://search.yahoo.co.jp/bin/search" method="get">
<DIV align="center"><INPUT size="30" name="p"> <INPUT type="submit" value="Yahoo! 検索"></DIV>
</FORM>


備　考

ＬＹＣＯＳの検索機能を追加する
表示例
Lycos
lycos homepage

記述例

以下を表示させたい位置に記述して下さい。
<BODY>と</BODY>タグの間に記載

<FORM action="http://www.lycos.co.jp/cgi-bin/pursuit" method="get">
<DIV align="center"><A href="http://www.lycos.co.jp/"><IMG height="20" alt="lycos homepage" src="file:///D:/ＨＰhatomark/logo_link.gif" width="70" align="center" border="0"></A> <INPUT name="query"> <INPUT type="submit" value="　検索　"> <INPUT type="hidden" value="jp" name="cat"><INPUT type="hidden" value="and" name="matchmode"></DIV>
</FORM>

備　考

Ｇｏｏの検索機能を追加する
表示例
　　　　　　　　　　　
　　　 　　　　
　　　　　

記述例

以下を表示させたい位置に記述して下さい。
<BODY>と</BODY>タグの間に記載

<FORM action="http://www.goo.ne.jp/default.asp" name="query">
<TABLE border="0" cellspacing="0" cellpadding="0" width="408">
<TBODY>
<TR>
<TD colspan="2" align="center"><IMG src="file:///C:/Ｈｐ２/database/goo.gif" width="100" height="50" border="0"></TD>
</TR>
<TR>
<TD>　　　<INPUT type="text" name="MT" value="" size="42">　　　　　　　　<BR>
　　　<FONT size="-1"> <SELECT name="WTS">
<OPTION value="ntt" selected>日本語のページ</OPTION>
<OPTION value="ink">海外のページ</OPTION>
<OPTION value="new">ニュース・雑誌</OPTION>
<OPTION value="bok">書籍</OPTION>
</SELECT>　　　　<SELECT name="DE">
<OPTION value="2" selected>100語程度</OPTION>
<OPTION value="0">タイトルのみ</OPTION>
</SELECT><BR>
　　　<SELECT name="SM">
<OPTION value="MC" selected>すべての語を含む</OPTION>
<OPTION value="SC">いずれかの語を含む</OPTION>
<OPTION value="phrase">フレーズ</OPTION>
<OPTION value="name">人名</OPTION>
<OPTION value="url">リンク先URL</OPTION>
<OPTION value="B">Boolean</OPTION>
</SELECT>　　<SELECT name="DC">
<OPTION value="10" selected>10件</OPTION>
<OPTION value="25">25件</OPTION>
<OPTION value="50">50件</OPTION>
<OPTION value="75">75件</OPTION>
<OPTION value="100">100件</OPTION>
</SELECT></FONT></TD>
<TD width="80" valign="MIDDLE"><INPUT type="submit" value="検索" name="act.search"></TD>
</TR>
</TBODY>
</TABLE>
</FORM>

備　考

ＭａｐＦａｎ　Ｗｅｂ住所で探す　を追加する
表示例

記述例

以下を表示させたい位置に記述して下さい。
<BODY>と</BODY>タグの間に記載

<FORM method="GET" action="http://www.mapfan.com/">
<INPUT TYPE="text" NAME="ADDR"
VALUE="" SIZE="35" MAXLENGTH="104">
<INPUT TYPE=submit VALUE="MapFan Web 住所でさがす">
</FORM>

備　考

自動ジャンプ
表示例

下記へ移転しました。
http://takkenfi.hoops.livedoor.com/
１０秒後に自動的に上記アドレスに移動します。
ホームページが切り替わらない場合は、ここをクリックしてください。

記述例

以下を表示させたい位置に記述して下さい。
<BODY>と</BODY>タグの間に記載

<FONT size="+3" color="#6600FF">下記へ移転しました。<BR>
</FONT></TD>
</TR>
</TBODY>
</TABLE>
<TABLE>
<TBODY>
<TR>
<TD><A href="http://takkenfi.hoops.livedoor.com"><FONT size="+3">http://takkenfi.hoops.livedoor.com/</FONT></A></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<CENTER>
<TABLE width="580" height="50">
<TBODY>
<TR>
<TD>１０秒後に自動的に上記アドレスに移動します。<BR>
ホームページが切り替わらない場合は、<A href="http://takkenfi.hoops.livedoor.com/">ここ</A>をクリックしてください。</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

備　考

自動巡回ロボットにＨＰを知らせる
表示例

自動巡回型ロボットにＨＰの内容、キーワードを知らせるには、ＨＴＭＬの<HEAD>と</HEAD>の間に下記の三行を書き加える。
　ロボットによっては効果がない場合があります。

記述例

HTMLのできるだけ上の方にコピーしてください

<META name="ROBOTS" content="ALL">
<META name="description" content="宅建府中稲城支部のＨＰ、不動産知識、不動産情報など不動産に関するあらゆる情報を提供します。">
<META name="keywords" content="府中、稲城、不動産、不動産知識、不動産情報、ビジネス実用ガイド">

備　考

２行目には、内容を記載　　　　　　　　　　　　　　　　　　　　　　　　４３行目には、キーワードを記載　「、」で区切って１５個程度まで。　

ＭＥＴＡ　タグでページ切り替え時に変化を加える
表示例  

記述例

以下を
<head>と</head>タグの間に記載

<meta http-equiv="Page-Enter" content="revealTrans(Duration=2,Transition=23)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=2,Transition=23)">

備　考

ページを切り替える時に効果をつける（ＨＰお役立ち小技集）

お気に入りのアイコンを指定する
表示例  

記述例

以下を
<head>と</head>タグの間に記載

<link rel="SHORTCUT ICON" href="hato3.ico">

備　考

hato3.ico を好きなアイコンにする。
アイコンの大きさは、１６×１６ピクセルにする。
２４×２４や３６×３６ピクセルは表示されない。
おすすめアイコン作成ソフト　ＩＣＯＮぱくら

ＣＳＳ（スタイルシート）

リンクの色を指定する
表示例


記述例

以下を
<head>と</head>タグの間に記載

<STYLE type=text/css>
<!--
　　　a:link { color: #990000; text-decoration: underline; }
　　　a:visited { color: blue; text-decoration: underline; }
　　　a:hover { color: #FF0033; text-decoration: underline; background-color: #ffffcc ;}
　　　a:active { color: blue; text-decoration: underline; }

-->
</STYLE>


備　考

スクロールバーの色を指定する
表示例　このページのスクロールバー


記述例

以下を
<head>と</head>タグの間に記載

<STYLE type=text/css>
<!--

　　　HTML, BODY {
　　　SCROLLBAR-BASE-COLOR: #ffe6e6;
}
-->
</STYLE>


備　考

スクロールバーの色を指定する２　　　更に詳しく指定する
表示例


記述例

以下を
<head>と</head>タグの間に記載

<STYLE type=text/css>
<!--
html,body {
　　　SCROLLBAR-Track-COLOR: #ffffcc;
　　　SCROLLBAR-3DLIGHT-COLOR: green;
　　　SCROLLBAR-ARROW-COLOR: gray;
　　　SCROLLBAR-DARKSHADOW-COLOR: brack;
　　　SCROLLBAR-face-COLOR: white;
　　　SCROLLBAR-HIGHLIGHT-COLOR: #bdfsc7;
　　　SCROLLBAR-SHADOW-COLOR: #d6e7f1;
　　　　　　

　　　BACKGROUND-COLOR: white;
　　　COLOR: black;

}

-->
</STYLE>


備　考



余白を指定する
表示例


記述例

以下を
<head>と</head>タグの間に記載

<STYLE type=text/css>
<!--
　
BODY {
　　　　MARGIN-LEFT: 0pt;
　　　　MARGIN-right: 0pt;
　　　　MARGIN-Top: 0px;
　　　　margin-bottom: 0em;
}
-->
</STYLE>

備　考

pt ポイント　px ピクセル　em　文字数
左　右　上　下の余白

ｈ１の文字を指定する
表示例


記述例

以下を
<head>と</head>タグの間に記載

<STYLE type=text/css>
<!--
　　
H1 {
FONT: bold 2em 'Trebuchet MS'
;}

-->
</STYLE>


備　考

ｈ１は　ボールド　２文字　ＭＳゴシックとする


ＣＧＩ
アンケート・注文票を作る
表示例


記述例

サンプルをダウンロードして保存する。
必要な箇所を変更する。
プロバイダのＨＰの会員サポート等で指定のＣＧＩプログラムを調べ、コピーして変更する。

備　考

ＣＧＩプログラムは、プロバイダによって記載が違っている。またＣＧＩが使えないプロバイダもあるので、問い合わせてください。

ＨＰテンプレート　
  メニュー 　支部ＨＰ 　不動産知識 ビジネス実用ガイド リンク集