HTMLとCSSで作るウェブサイト作成入門

CSS(４)セレクタの指定方法

　セレクタは、CSSでスタイルを定義する対象を指定します。様々な指定が可能です。

●基本の要素セレクタ
　前の資料CSS(1)〜(3)のサンプルで示したように、スタイルを適用する対象となるタグを設定します。

h1 { color: navy; }

●グループ化
　要素をカンマ区切りで列挙すると、一度に複数の要素のスタイルを設定できます。以下の場合は見出しタグ<h1>〜<h4>をまとめて文字色をネイビーにしています。

h1,h2,h3,h4 { color: navy; }

●IDセレクタ
　タグに設定されたid名を、「#ID名」という形で指定して、スタイルを設定します。同じタグが複数あっても、idを設定されたタグだけが、スタイルの設定対象となります。なお、idは、ログインIDや学籍番号と同じで、プログラマがそのHTML文書内で唯一付けたタグの識別名ですので(唯一でないと正常に処理されません)、タグ名を省略しても効果は同じです。以下のCSSでは、見出しタグid="toptitle"が付いているタグだけにスタイルを設定します。

[HTMLサンプル]
<h1 id="toptitle">わがやのご飯</h1>
<h1 class="menu">朝食</h1>
<p class="menu">ごはん、味噌汁、納豆、目玉焼き</p>
<h1 class="menu">昼食</h1>
<p class="menu">カレーライス、ヨーグルト</p>
<h1 class="menu">夕食</h1>
<p class="menu">パン、ハンバーグ、スープ、サラダ</p>

[CSSサンプル]
#toptitle { color: red; }
※タグ名を略さず　h1#toptitle { color: red; }　とも書けます。

●クラスセレクタ
　タグに設定されたclass名を、「.CLASS名」(見えにくいですがクラス名の前にピリオド「.」があります)という形で指定して、スタイルを設定します。classは、idとは異なり、複数のタグに設定することのできる識別名です(idがログインIDや学籍番号とすると、classは文字通りクラス名やグループ名)。例えば、上記のHTMLサンプルに、次のように、クラスセレクタでCSSを指定することができます。

[CSSサンプル]
.menu { color: navy; }
※この場合は、全てのclass="menu"のタグの色が紺色に。
h1.menu { color: navy; }
※この場合は、class="menu"のついた<h1>タグのみが文字が紺色に。

●入れ子セレクタ
　HTMLソースの中で、あるタグの中に別のタグが入れ子になることはよくあります。このとき、その外側のタグの中に入れ子になっているタグだけを、それ以外のタグと区別してスタイルを適用できます。セレクタの書き方は、「外側の要素 半角スペース 内側の要素」となります。以下の場合でいうと、「table h2」の部分です。通常の見出しタグ<h2>は、赤字にするが、テーブルタグ<table>の中の見出しタグ<h2>は青色にする、という指定を行っています。

[CSSサンプル]
h2 { color: red; }
table h2 { color: blue; }

[HTMLサンプル]
<h2>ここは赤色</h2>
<table><tr><td><h2>ここは青色</h2></td></tr></table>

●全要素セレクタ
　HTML文書内で使われている全ての要素を対象にスタイルを設定する際に使うのが、全要素セレクタ「*」です。CSSを適用する前の、初期設定のスタイルを無効化する場合などに使います。以下のようにすると、すべてが赤字になります。

[CSSサンプル]
* { color: red; }

●リンク関連のセレクタ
　HTMLでリンクと言えば<a>タグですが、<a>タグは、スタイルにおいて様々な状態があります。リンクは、通常、そこがリンクであることがわかるように、色が変わっていたり、下線が付いていたり、オンマウスすると(マウスを上に持って行くと)色が変化したり、クリックすると色が変わったり、過去にクリックしたリンクは色が違っていたり・・という具合です。スタイルシートは、見た目を設定するものですので、<a>タグに関してはセレクタに指定できるものが複数あります。主に使うのは以下です。

a:link { color: red; }	未訪問のリンク(赤色に)
a:visited { color: blue; }	訪問済のリンク(青色に)
a:hover { color: pink; }	オンマウスの状態(ピンク色に)
a:active { color: black; }	クリック中の状態(黒色に)

　

●最初の一行、最初の一文字
　HTMLに限らず、雑誌や書籍で、最初の一文字が大きく表示されているようなことがあります。そのように、段落の最初の一行や、最初の一文字だけ、スタイルを変更する、というCSSがあります。段落タグの<p>タグに対して、以下のようにスタイルを設定します。

p:first-line { color: red; }	最初の一行(赤色に)
p:first-letter { color: red; }	最初の一文字(赤色に)

●その他のセレクタ
　よく使うのは以上のセレクタですが、他にも、「ある属性を持ったタグ」や、「隣接している要素」などが設定できますし、CSSの新しいバージョンには、新たなセレクタが追加されたりしています。必要に応じて適宜調べて下さい。