便利そうなのはわかりましたけど、どんな記述であんな風になるのか全然わかりませんでした！
補講はどうでしたでしょうか。CSSの便利さが少しでもわかって頂ければ成功なのですが、セレクタの書き方を学んでいなければどうして説明のようになるのかわからなかったかもしれませんね。そういう訳でこのページを読みながら再び補講の例を見直すと理解が進むのではないかと思います。
便利そうなのはわかりましたけど、どんな記述であんな風になるのか全然わかりませんでした！
一つのCSSファイルを書き換えるだけで複数のHTMLファイルの見栄えが同時に変更される事がわかって頂ければそれだけで良いです。
これまでの説明ではセレクタには要素名を記述するだけでしたが、このセレクタの書き方を工夫する事によってCSSは飛躍的に便利になります。このセレクタには主に「全称セレクタ」「タイプセレクタ」「子孫セレクタ」「子セレクタ」「隣接セレクタ」「属性セレクタ」「クラスセレクタ」「一意セレクタ」という八つの種類があって、それぞれが便利な指定法になっているのですが、中にはやはりブラウザが対応していない物もあり、頻繁に使用されるものは幾つかに限られます。ここでは主に「タイプセレクタ」「子孫セレクタ」「クラスセレクタ」「一意セレクタ」について説明します。
* {color:#ff0000;}
p {color:#ff0000;}
要素名と要素名の間には半角スペースを入れます。
p strong {color:#ff0000;}
p > strong {color:#ff0000;}
p + p {color:#ff0000;}
p[class] {color:#ff0000;}
要素名とクラス名の間にはドット（.）を入れて、スペースは入れません。
p.point {color:#ff0000;}
要素名とクラス名の間には半角のナンバー（#）を入れて（[Shiftキー]+[3(あ)キー]）、スペースは入れません。
p#important {color:#ff0000;}
どうして他のセレクタは教えてくれないのですか？
ブラウザの、特にIEの対応状況が芳しくなく、実際に使用するには難があるからです。何度も言っている通り、興味が湧いたら自分で調べてみましょう。
それじゃあプロパティとその値が同じ時はセレクタをカンマで区切ればまとめられるって言ってたアレは？
はいはい。忘れてました。それはこのページの最後で説明します。それでは各セレクタの個別の説明をどうぞ。
タイプセレクタはCSSを扱う上で最も基本的で頻繁に使用されるセレクタです。今までの説明でも使用してきたように、一つの要素名から成り立ち、適用HTML内の全ての当該要素にCSSが適用されます。
p {color:#ff0000;}
<body> <p>Webサイト創りを学ぶなら<strong>真面目に創るWebサイト</strong></p> <div> <p>私が<strong>好き</strong>なのは<strong>貴方だけ</strong>です。</p> </div> </body>
このようなCSSとHTMLがあった場合、全てのstrong要素にCSSが適用され、文字が赤色になります。
ん〜、でも例えば「好き」と「貴方だけ」の方だけにCSSを適用させたい場合はどうすれば良いのですか？
そういう場合は他のセレクタを利用すれば色々な方法が考えられますが、説明の手順上、子孫セレクタを利用した方法を説明したいと思います。
HTMLが入れ子構造になっている事は知っての通りだと思いますが、子孫セレクタの子孫とは、ある要素に内包された要素の事をいいます。これは何重の入れ子になっていても同じです。
div p strong {color:#ff0000;}
<body> <p>Webサイト創りを学ぶなら<strong>真面目に創るWebサイト</strong></p> <div> <p>私が<strong>好き</strong>なのは<strong>貴方だけ</strong>です。</p> </div> </body>
このようなCSSとHTMLがあった場合、div要素に内包されたp要素に更に内包されたstrong要素のみにCSSが適用され、文字が赤色になります。よって『真面目に創るWebサイト』は赤色になりません。
だったら div strong {color:#ff0000;} でも平気ですよね？
まあそうですね。
それじゃあ入れ子がいくら重なっていても半角スペースを空けて並べれば大丈夫なのですか？
三重でも四重でも平気ですが、シンプルなHTMLを書いていれば七重にも八重にもなる事は少ないと思います。このように、CSSをより簡素に便利に扱う為にはそれなりのHTMLを書く必要があります。
うーん。HTMLとCSSには密接な関係があるのですね。ところでしつこい様なのですが、今度は『好き』という言葉だけにCSSを適用させたい場合はどうするのでしょう？
これまた方法は色々あるのですが、説明の手順上、クラスセレクタを利用した方法を説明したいと思います。
ここにきて初めてHTMLの方にも手を加える事になります。あるCSSを適用させたい要素を他の同一要素と区別する為にclass属性を付加しなければなりません。
strong.point {color:#ff0000;}
<body> <p>Webサイト創りを学ぶなら<strong>真面目に創るWebサイト</strong></p> <div> <p>私が<strong class="point">好き</strong>なのは<strong>貴方だけ</strong>です。</p> </div> </body>
このようなCSSとHTMLがあった場合、pointという名前のclass属性が付加されているstrong要素のみにCSSが適用され、文字が赤色になります。よって『真面目に創るWebサイト』や『貴方だけ』は赤色になりません。
class属性は属性値が同じでも複数の要素に付加することが出来ます。上の例で言えば class="point" を付加した要素の文字色は全て赤くなります。これはなにも同一要素でなくとも構わず、他の要素でも構いません。その場合のCSSの書き方は前に要素名を置かずに .point {color:#ff0000;} のようになります（実際は全称セレクタが省略されています）。
同じ要素に複数のクラス名を当てることはできないのですか？
有効的な利用法がいまいち思い浮かびませんが、一応可能です。class="point hint" などと半角スペースで区切った属性値のclass属性を与え、strong.point.hint {color:#ff0000;} などと書けばclass="point" と strong.point {color:#ff0000;} のセットとは区別されます。また、これは二つでなくとも三つでも四つでも可能です。
そんなにclass名を指定して何の意味があるんですか？
訊かれたから答えただけです！次、一意セレクタに行きます。
使用法としてはクラスセレクタと同じですが、同じID名を持ったid属性は一ファイル内に一つしか置けませんので、複数の要素に指定する事が出来ません。またID属性はハイパーリンクのアンカーとしても利用され、そのID名にはしっかりとした意味があって然るべきです。そういったことも『一意』セレクタと呼ばれている理由でしょう。
h1#title {color:#ff0000;}
<body> <h1 id="title">真面目に創るWebサイト</h1> </body>
このようなCSSとHTMLがあった場合、titleという名前のid属性が付加されているh1要素のみにCSSが適用され、文字が赤色になります。
※しつこいようですがid属性は属性値が同じ場合、複数の要素に付加することが出来ません。上の例で言えば id="title" を付加できるのは一つの要素のみです。これは同一要素でなくとも同じで、他の要素でも同じID名を持ったID属性は付加することが出来ません。
つまり次のh2にも id="title" を付けて文字を赤色にしようと思っても駄目って事ですか？
そうですね。titleという（厳密に）同じ意味を持った要素はそのページに複数あるはずがないですから。それにアンカーの終着地点にも使われますので、同じリンク先が二つもあったらどっちに行って良いかわかりませんよね。
うーん。でもh2も赤い文字にしたい場合はまたいちいち h2 {color:#ff0000;} って書かなきゃいけないんですか？それかh1とh2に同じクラス名を付けるとか。何か面倒なんですけど。
大丈夫です。CSSは面倒な事はなるべく排除し、より便利に使用できるように工夫されています（ブラウザの対応状況がまちまちですけど）。そこでこの手間を省くのがCascading Style Sheets の使用法 でもチラリと登場した同一プロパティをまとめる方法です。
文字の色や大きさ線の装飾や背景の色など、時には複数の要素でまったく同一のレイアウトを必要とする場合や、入れ子の関係で同じCSSを書かなければならない事もあります。また、背景色を合わせるのにカスタマイズする時、片方を変更したら必ずもう片方も同じ色に変更するなんて場合は、セレクタ毎に同じプロパティと同じ値がまとまっていると楽です。
h1, h2, p strong {color:#ff0000;}
body, div, p {background-color:#ccffff;}
<body> <h1>Webサイト構築の為の手助け</h1> <h2>真面目に創るWebサイト</h1> <div> <p>私が<strong>好き</strong>なのは<strong>貴方だけ</strong>です。</p> </div> </body>
このようなCSSとHTMLがあった場合、h1要素とh2要素p要素の中のstrong要素に同じCSSが適用され、文字が赤色になります。また同じようにbody要素とdiv要素とp要素にも同じCSSが適用され背景色が水色になります。
なるほど。カンマで区切ればプロパティと値が同じ場合はまとめられるのですね。これはクラスセレクタとか子孫セレクタでも使えるのですね。
はい。ドットやカンマ、それから特に半角スペースの位置に注意して利用して下さい。あまり横にずらりと並べるとそのプロパティがどのセレクタに向けて書かれたのか判断し難いので、カンマの後で改行した方が見易くなるかもしれません。
はい。だいぶ理解できてきました。でも例えばh1とh2の文字色は同じにしたいけど背景は別にしたいとかそういう場合はどうしましょう？
書き方はわかり易ければ良いので人それぞれです。h1とh2の文字色だけプロパティ毎にまとめて残りはそれぞれの要素毎に書いたりすれば良いと思います。プロパティ毎にまとめるのは主に後で編集する時の事を考えるとそうする方が変更箇所が少なくて済むという利点があります。まあ何にしても実際に色々と自分で書いてみてやり易い方法を模索して下さい。それでは次に進みたいと思いますが、ここで再び補講のページを見直すと理解できなかった部分がスッと頭に入ってくるかもしれません。セレクタを見比べてみてどうしてそうなるのかを考えてみて下さい。
[ トップページ ]
[ 目次 ]
[ ページの先頭 ]
[ 前項目 ]
[ 次項目 ]
