[トップページへ] [←前のページへ] [→次のページへ]


HTML文書をメモ帳で作ってみよう!' CSSについて

第01回:HTML文書をメモ帳で作ってみよう!' CSSについて

スタイルシートのお話

というわけで、CascadingStyleSheetについてのお話をしようと思うのですが、 CSSの解説というのは初めてなので、どれから説明していいやら…(^^;

とりあえず、みなさん良く知っているであろう、リンクにカーソルをあわせると色が変わったりする効果、 あれもCSSで実現されています。これから解説していきましょう。

まず、比較的簡単に導入できる、HTML文書に直接CSSを記述する方法についてお話します。

<STYLE><!-- (ここにCSSを記述します) --></STYLE>

と、こう書きましたが、みなさんの頭には「?」がたくさんあるハズです。一つずつ解決していきましょう。
まず、STYLE要素は、「この中に書かれた情報はスタイルシート(CSS)の情報ですよ」ということを示します。 ただ、注意することは、このSTYLEやCSSは本文とは違いますから、HEAD要素の中に入れて記述しましょう。

次は<!-- 〜 -->ですね。これは「コメント」であることを示すものです。
「何か書いておきたいけど、普通に見えてしまっては困る」という場合などに使います。 もしHEAD内に書いてあっても表示されてしまうようなブラウザがあると困るので、こういった処置をしておくのです。

最後に(ここにCSSを記述します)の部分ですね。
ここに、例えば「リンクの上にカーソルをあわせた場合に色を変える」効果を記述してみましょう。

<STYLE><!-- A:HOVER{ COLOR:#000000; BACKGROUND:#00ff00; } --></STYLE>

あくまで例なのですが、これを記述しておくと、カーソルをリンクにあわせたとき、リンク先 というように見えるはずです。

さて、どうしてこういう風になるのか考えてみましょう。
まず、リンクを示すA要素、そして、その上にカーソルが置かれた場合のことを「A:HOVER」と記述します。 [補足]
後は、{}で囲まれた内容の説明ですが、COLORと、BACKGROUNDですね。CSSの場合、こういったCOLORなどのことをプロパティと呼び、扱います。
COLORは文字色、BACKGROUNDは背景色のプロパティです。[補足]

色の指定の仕方についても教えておくべきでしょうか。
#??????というように、#の後に続く6桁の数字(?)によって色を指定します。
#??????というように、赤、緑、青の色の情報は別々に指定する必要があります。

数字といいましたが、正確には16進数です。00,01,02,…,09,0a,0b,0c,0d,0e,0f,10,…,9f,a0,…,ffという風に数字が変化するのですが、16進数で00〜ffまでで、10進数でいうと0から255までの値を扱います。
これがffに近づくほど、明るい色になりますから、#ffffffは白になり、#000000は黒ということになります。分かりますか?

これと同じ要領で、P要素内の文字色をすべて青色にしたい場合はどうしたら良いでしょうか。

<STYLE><!-- P{ COLOR:#0000ff; } --></STYLE>

分かりますか?P要素についてのプロパティを指定する、ということを書いています。
と、書いているうちに文書型宣言の話を忘れてしまっていました。スタイルシートの記述方法について一通り述べてから、解説しようと思います。
では、次回。

Author: tkm / せかんどすたいる

[トップページへ] [←前のページへ] [→次のページへ]