|
HTML の小技
ここでは簡単な JavaScript などを使った小技を紹介します。 文中の大文字小文字は厳密に区別されます。動かないときはつづりが正しいか確認ください。 さらに、ボタンなどフォームの部品を使うときは、かならず <FORM>〜 </FORM> でくくってください。 さもないとネットスケープでは部品が表示されません。 (文中の JavaScript: は省略も可能です) | |
|
■ ボタンを押すとメッセージを出す |
|
<FORM> <INPUT TYPE=button value="おしらせ" onclick="JavaScript:alert('まいどどうも\n失礼しました')"> </FORM> こういうメッセージもできます <FORM> <INPUT TYPE=button value="おしらせ" onclick="JavaScript:if (confirm('まいどどうも\n終わってよい？')){alert('ありがと！ばいばい') } else { alert('。。。しーん')}"> </FORM> confirm の戻り値は、[OK] なら True,[キャンセル]なら False です。 if 文と組み合わせると上のような分岐は簡単につくれますね。 表示文の改行には \n を使います ■Top |
|
■ リンクをクリックするとメッセージを出す |
|
おしらせ <FORM> <A HREF="JavaScript:alert('ただいまは \n' + new Date() + ' です')"><B>おしらせ</B></A> </FORM> ■Top |
|
■ ボタンを押すとページに飛ぶ |
|
<FORM> <INPUT TYPE=button value="おしらせ" onclick="JavaScript:location.href='maido.htm'"> </FORM> <FORM> <INPUT TYPE=button value="おしらせ" onclick=location="maido.htm"> </FORM> でも動くようです ■Top |
|
■ 別フレームにリンク先を読む |
|
ボタンを押すと別のフレームにリンク先を読み込みます。 <FORM> <INPUT TYPE=button value="メニュー切替" onClick="JavaScript:top.menu.location.href='w_menu2.htm'"> </FORM> 太字の部分(ここでは menu ) が、リンク先を表示させるフレームにつけた名前です。 ■Top |
|
■ ひとつ前のページに戻る |
|
<FORM> <INPUT TYPE=button value=" もどる " onclick="JavaScript:history.back()"> </FORM> <FORM> <INPUT TYPE=button value=" もどる " onclick="JavaScript:history.go(-1)"> </FORM> でも可 ■Top |
|
■ ページ内の指定場所に飛ぶ |
|
<FORM> <INPUT TYPE=button value="一番下へ" onclick="JavaScript:location.hash='#end'"> </FORM> 飛ばす先に <a name="end"></a> などのように名前をつけておきます。そして JavaScript の location.hash= で '#' に続けて名前を指定すればＯＫ。 飛んだ先から元の位置に戻すには JavaScript:history.back() を使えばＯＫです。 注：ネットスケープ４でローカルネットワーク上のファイルを参照するときは、うまく動作しません ■Top |
|
■ ページを再読み込みする |
|
<FORM> <INPUT TYPE=button value="リロード" onclick="JavaScript:location.reload()"> </FORM> ただし ver 2 あたりの大昔のブラウザでは動きません。 ■Top |
|
■ ページの背景色を変える |
|
<FORM> <INPUT TYPE=button value="黒背景" onclick="document.bgColor='#000000'"> </FORM> ラジオボタン版 <FORM> <INPUT TYPE=radio value="黒背景" onclick="document.bgColor='#000000'" name="radio1">黒背景 <INPUT TYPE=radio value="白背景" onclick="document.bgColor='#FFFFFF'" checked name="radio1">白背景 </FORM> name= で同じ名前をつけるとグループ化できます。事前にチェックしたいほうに checked をつけます。 ■Top |
|
■ ページの文字色を変える |
|
<FORM> <INPUT TYPE=button value="黒文字" onclick="document.fgColor='#000000'"> <INPUT TYPE=button value="赤文字" onclick="document.fgColor='#FF0000'"> </FORM> 文字色＝fgColor リンク＝linkColor 訪問済みリンク＝vlinkColor を指定することで変えられます 注：Windows 版/Macintosh 版 ともにネットスケープではうまく動作しません ■Top |
|
■ おみくじ |
|
<SCRIPT language="JavaScript"> <!-- if (navigator.appVersion.charAt(0)>=3){ var msg= new Array() msg[0]='最高！'; msg[1]='かなりいいかも'; msg[2]='まずまず'; msg[3]='かわりばえなし'; msg[4]='やな予感'; msg[5]='とほほ'; msg[6]='ふんだりけったり'; function omikuji(){ unsei = msg[Math.ceil(Math.random() * 6)]; JavaScript:alert('今日の運勢は '+ unsei + ' です'); }} //--> </SCRIPT> <FORM> <INPUT TYPE=button value="おみくじ" onclick=omikuji()> </FORM> ■Top |
|
■ ページの更新日を表示する (お手軽バージョン) |
|
<SCRIPT language="JavaScript"> <!-- dt=new Date(document.lastModified); yy=dt.getYear(); mm=dt.getMonth() + 1; dd=dt.getDate() ; if(yy<1900) yy+=1900; document.write('<B>Update: '+ yy + '/' + mm + '/'+ dd + '<\/B>'); document.close(); //--> </SCRIPT> を、適当な場所に書きます。 注：Macintosh 版ネットスケープではうまく動作しません。Windows 版は正常動作します。 ■Top |
|
■ プルダウンメニューの初期値を指定する |
|
なんのことかといいますと、牛飼いウェブの上部についているプルダウンメニュー風リンク(↓)のことです。
たとえばプルダウンメニューから別ページにジャンプし、ブラウザの[→]ボタンで元に戻ると、プルダウンメニューの項目はジャンプ先のままです。この場合は selected オプションは効かず、再読み込みしないとリセットされません。プルダウンメニュー系では仕様上どうしてもこうなります。そこでこれを自分のウェブ向けに動作するように工夫しましょう。
これを特定の項目位置にリセットさせるには、BODY タグに次の指定を追加します。 OnLoad="document.form01.selLink.selectedIndex=1" form01 とは、このプルダウンメニューのフォーム名 <FORM name="form01"> に対応します。 selLink というのは、プルダウンメニュー の name= でつけた名称です。 <select NAME="selLink"←この部分につけた名前です。 selectedIndex はプルダウンメニュー の項目の位置です。インデックスは上から０・１・２．。。となります。 上の例はページが読まれたときにプルダウンメニュー selLink の インデックスを１にする、という指定です。 これで[→]で戻っても正しい位置にリセットされます。（サンプルでは補正は動きません) ■Top |
|
■ クリックすると新しいウィンドウを開く |
|
パラメーターに、[開くhtml ファイル],[ヨコのサイズ],[タテのサイズ] を指定します。 サンプルではサイズ変更可能(resizable=yes) にしてありますが、適当にセットください。 パラメーターの no を yes に変えていろいろ試してみると、何が変化するかよくわかります。 ■Top |
|
■ フルスクリーンで新しいウィンドウを開く |
|
パラメーターに [開くhtml ファイル] を指定します。 開いたページに window.close() を入れたボタンを置いておくとウィンドウを閉じることができます。 これが無い場合、ウィンドウを閉じるときは [ALT]+[F4] で終了させてください。 たとえば下のボタンは HTML Memo ページをフルスクリーン起動させます。 [ALT]+[F4] で終了させてください。 ■Top |
|
■ クリックするとウィンドウを閉じる |
|
スクリプトを使って開いたウィンドウを閉じるには開いた先のウィンドウのなかに、
<FORM> <INPUT TYPE="BUTTON" name="btn" value="押すと閉じます" onClick="JavaScript:window.close()"> </FORM> を書いておけば[閉じる]ボタンになります。 ボタンのかわりにリンクでも可能です。 <A HREF="JavaScript:window.close()">閉じます</A> 開いた先のウィンドウがフレームを使っており、そのフレームのひとつに[閉じる]がある場合。。[閉じる]を押すとそのフレーム内だけがクローズしてしまい、ウインドウ全体は閉じません。そのときは上のリンクを使って "JavaScript:window.close()" target="_top" とするとうまくいく場合があります。 ■Top |
|
■ テキストに文字を入れる |
|
テキストボックスに文字を入れる例です。
最初のテキスト入力の部分 <FORM name="txtbox"> <INPUT TYPE="text" size=30 name="box1" value="こんにちは"> <INPUT TYPE="text" size=30 name="box2" value="めっきり"> <INPUT TYPE="text" size=30 name="box3" value="寒くなりました"> </FORM> FORM とそれぞれのテキストに NAME= で名前をつけておきます。 入力の部分 <FORM name="edit"> こんにちは<INPUT TYPE="radio" name="rb1" onClick="document.txtbox.box1.value='こんにちは'" checked> こんばんは<INPUT TYPE="radio" onClick="document.txtbox.box1.value='こんばんは'" name="rb1"> <INPUT TYPE="text" VALUE="めっきり" size=30 name="box12" onKeyUp="document.txtbox.box2.value = this.value"> <SELECT NAME="SEL1"onChange="document.txtbox.box3.value=SEL1.options[SEL1.selectedIndex].value"> <OPTION VALUE="寒くなりました" SELECTED> 寒くなりました <OPTION VALUE="暑くなりました"> 暑くなりました <OPTION VALUE="たぬきになりました"> たぬきになりました </SELECT> </FORM> ラジオボタンの name は同じにすることでグループ化できます。 。。。いろいろありますねぃ(汗) しかし基本はひとつだけで、 document.(フォームの名前).(部品の名前).value= で変えられます。 ■Top |
|
■ フォームの内容をリセットする |
|
たとえばこういうテキストをクリアするには。。。 てきとうに何か書いて [クリア]を押してください。 <FORM> <INPUT TYPE="text" size=30> <INPUT TYPE="reset" value="クリア"> </FORM> タグはこれだけ。INPUT TYPE を reset にすると勝手にリセットボタンになってくれます。 便利なんですが『おなじ FORM の内部にしかリセット効果がない』という制限があります。 これを回避する方法を書きます。
ちょっと検証が面倒ですが、一つ上の [テキストに文字を入れる] コーナーのテキストに適当に書き込んでください。続いて [クリア１]を押すと３つならんだテキストボックスがリセットされます。[クリア２]では変更用フォームがリセットされます。
<FORM> <INPUT TYPE="BUTTON" value="クリア１" onClick="document.txtbox.reset()"> <INPUT TYPE="BUTTON" value="クリア２" onClick="document.edit.reset()"><BR> </FORM> JavaScript の reset() を使っています。 document.(フォームの名前).reset() で、指定のフォームのグループの内容がリセットされます。 ■Top |
|
■ ボタンの外観を変える(IE) |
|
スタイルシートを FORM のボタン部品に適用すると、見栄えを変えることができます。ただしｉｅのみで、ネットスケープでは普通のボタンとして表示されます。
<FORM>ボタンを平らな外観にします。ネットスケープでは普通のボタンに見えます。 <INPUT TYPE="BUTTON" VALUE="ボタン" STYLE="BORDER-STYLE:solid;BORDER-WIDTH:1px;BORDER-COLOR:white;COLOR:white;BACKGROUND:#008080"> </FORM>
それぞれのオプションの意味
BORDER-STYLE:solid 枠線の種類を単純な線に BORDER-WIDTH:1px 枠線の太さを１ピクセルに BORDER-COLOR:white 枠線の色を白に COLOR:white 文字の色を白に BACKGROUND:#008080 ボタンの背景色を #008080(Teal) に ネットスケープでも正常に表示させるには、BORDER-COLOR を背景色に合わせます。 さもないと。。。  右のボタンのようにおかしな枠がでます。左はｉｅでみたボタンです。 Tips ボタンの幅は STYLE= のなかで WIDTH を、高さは HEIGHT を使って変えられます。 ■Top |
|
■ テキストボックスの外観を変える(IE) |
|
スタイルシートを適用すると見栄えを変えることができます。
ただしｉｅのみで、ネットスケープでは普通の部品として表示されます。 <FORM> <INPUT TYPE="TEXT" VALUE="サンプルテキスト" SIZE="30" STYLE="BORDER-STYLE:solid;BORDER-WIDTH:1px;BORDER-COLOR:Black;COLOR:white;BACKGROUND:#008080;250px;HEIGHT:22px"> </FORM>
BORDER-STYLE:solid 枠線の種類を単純な線に
BORDER-WIDTH:1px 枠線の太さを１ピクセルに BORDER-COLOR:Black 枠線の色を黒に COLOR:white 文字の色を白に BACKGROUND:#008080 背景色を #008080(Teal) に WIDTH:250px ボックスの幅を 250px に HEIGHT:22px ボックスの高さを 22px に 入力時に色の変わるテキスト <FORM> <INPUT TYPE="TEXT" SIZE=20 STYLE="BORDER-STYLE:solid;BORDER-COLOR:white;BORDER-WIDTH:1px;BACKGROUND:#CCCCFF;WIDTH:250px;HEIGHT:22px;" onFocus = "if (document.all) { this.style.backgroundColor='#000066';this.style.color='#CCCCFF'; }" onBlur = "if (document.all) { this.style.backgroundColor='#FFFFFF';this.style.color='#000000'; }"> </FORM> JavaScript の onFocus(フォーカスされたとき) と onBlur(離れたとき)を利用しています。 ｉｅ４以上のみ対象とするために if (document.all){・・・}を入れています。 border-width:1;border-style:solid;border-color:black は、まとめて border:1 solid black とすることもできます。 枠線の色とネットスケープ 
上のキャプチャ画像をみてください。へんですね？これは「色の変わるテキスト」を適用したときの状態です。
ネットスケープではこのようにおかしな位置に枠線が描かれてしまいます。 そこで、スタイルの指定で BORDER-COLOR を背景色にあわせます。こうすればたとえ枠線が変な場所に出ても「見えない」わけです。このままではｉｅで背景と枠色が同化してしまいますので、フォームの背景色を変えて入力部分を区別するようにします。 Tips テキストボックスにスタイルを適用するときは、必ず WIDTH と HEIGHT も指定してください(特に HEIGHT)。さもないとネットスケープではボックスがつぶれる場合があります。 ■Top |
|
■ 手抜きロケーション情報 |
|
<SCRIPT Language="JavaScript"> <!-- document.write(window.location.pathname); document.close(); // --> </SCRIPT> ページの適当なところに貼り付けます。 するとロケーションを勝手に書くので、いまどこなのかがわかるというすごい手抜き。。。だめ？ ■Top |
|
■ 標準のステータスを変える |
|
「ドキュメント・完了」とか、「ページが表示されました」など、ブラウザのステータスバーには 決まった文句がでますが、ここを変えてしまおうというチャレンジです。 常にステータスバーに文章が流れるものもありますが、URL が確認できないので個人的には好きではありません。そこで何もないときにメッセージを出してしまおうというわけです。
ボタンを押すと標準のステータスメッセージが変わります。URL 表示は影響を受けません。
なお、ネットスケープでは日本語が文字化けします。 またフレームの場合、そのフレーム外では標準メッセージに戻ります。 <FORM> <INPUT TYPE=button value="あいさつ" onclick="JavaScript:window.defaultStatus='welcome to Ushikai.com'"> </FORM> ページを開いたときに常にメッセージをセットしたいなら、 <SCRIPT Language="JavaScript"> <!-- window.defaultStatus='welcome to Ushikai.com'; //--> </SCRIPT> 'welcome to Ushikai.com' を好きな文に変えて <HEAD>〜</HEAD> の中に入れてください。 社名など入れておいてもいいのではないでしょうか。 ステータスバーに文字が流れるスクリプトも、デフォルトステータスに出力するように変えれば URL 表示を邪魔しないのではないでしょうか。。やってみたことはありませんが。。だめかな？ ■Top |
|
■ メールの題名をセット |
|
メールの題名をセットするには、メールアドレスに続けて ?subject=(題名)とします。
牛飼いウェブについて <A HREF="mailto:webmaster@ushikai.com?subject=牛飼いウェブについて">牛飼いウェブについて</A> ■Top |
|
■ メールの内容をセット |
|
メールの内容をセットするには、メールアドレスに続けて ?body=(内容)とします。
■Top
牛飼いウェブについて <A HREF="mailto:webmaster@ushikai.com?body=牛飼いウェブについて">牛飼いウェブについて</A> |
|
■ 題名と内容を同時にセット |
|
メールアドレスに続けて ?subject=(題名)&body=(内容)とします。 牛飼いウェブについて <A HREF="mailto:webmaster@ushikai.com?subject=牛飼いウェブについて&body=牛飼いウェブについて(内容)"><B>牛飼いウェブについて</B></A> |
|
■ その他の送り先をセット |
|
題名に続いて cc(※) や bcc(※) も同時にセットするには、メールアドレスに続けて
■Top
(メールアドレス)?subject=(題名)&cc=(宛先) (メールアドレス)?subject=(題名)&bcc=(宛先) とします。 牛飼いウェブについて <A HREF="mailto:webmaster@ushikai.com?subject=牛飼いウェブについて&cc=info@ushikai.com"><B>牛飼いウェブについて</B></A> <A HREF="mailto:webmaster@ushikai.com?cc=info@ushikai.com"> cc も bcc もセットするには、それぞれ & でつなげます。 牛飼いウェブについて <A HREF="mailto:webmaster@ushikai.com?subject=牛飼いウェブについて&cc=info@ushikai.com&bcc=sales@ushikai.com"><B>牛飼いウェブについて</B></A> メールアドレスに続く最初のオプションには？を使い、その次のオプションからは＆を使うと覚えればよいでしょう。 ※cc (カーボンコピー) メインの宛先と同時に配信する宛先です。受信者にはcc の一覧も配信されますので、誰と誰に送ったかが一目でわかります。 ※bcc(ブラインドカーボンコピー) cc と同じく本文が同時配信されますが、受信者には bcc の部分のアドレスが隠されます。このため同時配信先を伏せて送るときに利用されます。 |