|
スタイルシートとは、Webページの見栄えを細かく定義できるものです。
文字の大きさを細かく指定できたり、画像の位置も細かく指定できます。
その他、文字飾りや改行幅等も指定できるという機能も持っています。 |
| ■MARQUEE |
| ■JavaScript確認 |
| ■色変わりマーク |
| ■こんなこともできます |
htmlで<MARQUEE>と書くと、下のように文字をスクロールさせることができます。
・<MARQUEE>の見本しかし、このタグはInternetExplorerのみでのサポートで、
ネットスケープではサポートされていません。
ネットスケープを利用して<MARQUEE>の部分を見ると、下のように見えます。
| StyleSeat |
このように動きません。
どうしても動かしたい場合他の技術を用いますが、私の場合はJavaScriptを用いています。
その方法は、時代遅れのJavaScript−スクロールのページをご覧下さい。
JavaScriptを用いたものが下です。
上記の例はフォーム覧を利用しています。これではあまり見栄えはしませんね。
さてここでスタイルシートの登場です。
スタイルシートは、フォーム覧の枠を消したり、入力スペースの色や文字を変える事ができるのです。
ただし、ネットスケープで見るとこのサンプルは、上記サンプルと同じように見えてしまいます。
（ネットスケープ６の場合はＩＥと同様に見えます）。
ちなみにソースは下の通りです。
|
<STYLE> <!-- INPUT { font-size:16px; border-style:dotted; border-width:0px; background:#4F5751; color:#ffffff;} //--> <STYLE> |
JavaScriptのオン・オフによって、文字を表示・非表示切り替えができます。
JavaScriptオンの時のみ文字を表示させる事は簡単ですが、その反対の、
オフの時のみ表示させることは意外と難しいです。
下がオンの時非表示、オフの時表示の例です。
| ___JavaScript-Test___ |
基本的にこのページをご覧になっている方には表示されていないはずです。
もし表示されていたならば、JavaScriptオフになっているはずでしょう。
これは、スタイルシートの定義をJavaScriptで書いているため、この様なことができます。
フォントの色を、スタイルシートで背景色と同色に定義するのです。
下がそのソースです。
|
<SCRIPT Language="Java Script"> <!-- document.write("<STYLE>I {color: #5F6761;}</STYLE>"); //--> <SCRIPT> |
昔はマウスをのせると色が変わるテクニックは、非常に高度なものでした。
しかし現在ではスタイルシートが開発されたため、この技術は一般的になりました。
トップページ Java Script ツボ刺激法 ＢＢＳ
上のものはJavaScriptを用いたものです。
このソースは下記のようになります。
|
<SCRIPT Language="Java Script"> <!-- function che(n){ for(i=1;i<=4;i++){ if(i==n){img="2";} else{img="1";} eval("document.m"+i+".src='../jav/"+img+".gif'") } } //--> <SCRIPT> <A HREF="../index.html" onMouseOver=che(1)> <IMG SRC="../jav/1.gif" BORDER="0" NAME="m1" ALIGN="middle"> トップページ</A> <A HREF="../jav/jav.html" onMouseOver=che(2)> <IMG SRC="../jav/1.gif" BORDER="0" NAME="m2" ALIGN="middle"> Java Script</A> <A HREF="../aki/aki.html" onMouseOver=che(3)> <IMG SRC="../jav/1.gif" BORDER="0" NAME="m3" ALIGN="middle"> ツボ刺激法</A> <A HREF="gst.html" onMouseOver=che(4)"> <IMG SRC="../jav/1.gif" BORDER="0" NAME="m4" ALIGN="middle"> ＢＢＳ</A> |
スタイルシートを用いると、いとも簡単にこれが出来てしまいます。
下のものがスタイルシートを用いたサンプルです。