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


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

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

続・スタイルシートのお話

前回はスタイルシートの記述をHEAD部分に記述する方法を簡単に解説しました。
今回はもう少し高度な利用法として、要素のみの指定ではなく、細かな指定の方法を教えます。

スタイルシートの記述は、複雑な構造になっている場合や、特定の要素だけに関してプロパティを指定したい場合にも、柔軟に対応できます。

HEAD内にSTYLE要素を用いて書く場合は、ある要素すべてに対してプロパティを一括指定してしまいます。
前回の例をもう一度出しますが、

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

という記述をしたHTML文書では、P要素内の文章はすべて青色になってしまいます。実際に書いて確認すると良いでしょう。

仮に「DIV要素内のP要素の文章だけを青色にしたい」という場合を考えてみましょう。
このときに上の記述をそのまま使用したら、すべてのP要素が皆青色になってしまいます。

「特定の要素内に現れる、ある要素のみにこのプロパティを適用する」という場合には、スペースで区切って指定します。

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

この様に書くと、DIV内のP要素のみが青色に変化することが分かると思います。

また、複数の要素に対して同じプロパティを指定したい場合には、カンマを用います。

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

こうすると、テーブル内のTD要素に含まれる文章および、P要素内の文章が青色になります。

もっと詳しい指定、ピンポイントに特定の要素だけのプロパティ指定をしたい場合には「CLASSオプション」や「IDオプション」を利用します。

<P CLASS="notice">注意書きです。</P>

<P ID="warning">注意書きです。</P>

のように使いますが、両者には違いがあり、IDはHTML文書全体でユニークな名前を付けなくてはいけません。(CLASSは複数使っても問題ありません)
こういったCLASSやIDのCSS側で利用するのは、ピリオドで区切ることで可能になります。

<STYLE><!--
P.notice{ COLOR:#0000ff;
#warning{ COLOR:#ff0000;
} --></STYLE>

P.noticeと書いても、.noticeと書いても、他に同名のCLASS指定が無ければ同じ意味を持ちます。IDでも同じです。 [補足]
この様に指定することで、より詳しい指定を行う事ができます。

構造化から少し外れた話になってしまいましたが、次回はCSSの記述を別な箇所で行えるということを書こうと思います。

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

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