CSS講座

より高度な指定方法

基本的に、CSSはタイプセレクタによる（タグごとの）指定と、id属性やclass属性による指定によって、スタイルを適用します。

しかし、より効率的にスタイルを指定する方法もありますので、こちらも覚えておくと役に立ちます。

タイプセレクタを指定したclass、idによる指定

例えば、下のように違うタグに同じclassを指定します。

<p class="blue">文字列（p）</p>
<div class="blue">文字列（div）</div>

そして、以下のようなCSSだった場合は、pに囲まれた文字列も、divに囲まれた文字列も青い文字で表示されます。

.blue { color: blue; }

文字列（p）

文字列（div）

しかし、class名を表すピリオドの前に、タイプセレクタ（タグ名）を指定することで、特定のタグにのみCSSを適用させることができます。 （この例だと、p要素のclass属性にしか適用しません。）

p.blue { color: blue; }

文字列（p）

文字列（div）

分かりにくくなるので、このような使い方はあまりしませんが、こんなCSSを指定することも出来ます。

p.blue { color: blue; }
div.blue { color: green; }

文字列（p）

文字列（div）

idについても、classと同じように、シャープ（#）の前にタイプセレクタを指定することが出来ます。

親要素・子要素

HTMLの話に戻りますが、親要素、子要素について説明します。

<body>
  <h1>タイトル</h1>
  <p>段落</p>
  <p>
    <a><img /></a>
  </p>
  <ul>
    <li>リストアイテム１</li>
    <li>リストアイテム１</li>
    <li>リストアイテム１</li>
  </ul>
</body>

上のサンプルソースで、aタグに囲まれているimgタグがありますよね。

この場合、aがimgの親要素で、imgはaの子要素です。 要するに、囲んでいる方を親要素といい、囲まれている方を子要素といいます。 簡単なルールですよね。

ulやolは、親子関係の分かりやすいタグですよね。

話はまだ続きます。上の例で、aはimgの親要素ということは分かりましたよね。 aタグの親要素はpタグになるというのも、同じように分かると思います。

では、pタグの子要素はaタグだけでしょうか？・・・答えはノー。aタグの中にあるimgもpタグの子要素になります。

・・・ということは、imgの親要素はaだけでなく、それを囲んでいるp、さらにはbody、htmlもaの親要素ということになります。

htmlタグは全てのタグの親要素であり、全てのタグは、htmlタグの子要素である。という風にも言うことができます。

親要素・子要素については理解していただけたでしょうか？

親要素指定による指定法

では、本題の親要素、子要素の関係を利用したCSSの指定方法について始めましょう。

例えば、pタグの中で使用するaタグのみにスタイルを適用させたい時ってありませんか？

親要素がpタグで、子要素がaタグの場合のみにスタイルを適応させるには、「タイプセレクタ（半角スペース）タイプセレクタ」のように指定します。

p a { font-style: italic; }

上の例だと、親要素にpを持つaに斜体で表示するという意味です。・・・ということは、

<p>
  <a href="http://www.google.com">google</a>
  <strong><a href="http://www.google.com">google</a></strong>
</p>

上の二つは両方該当することになります

このような指定方法を子孫セレクタといいます。

また、特定のclassやidを持った親要素をもつ場合にスタイルを適用することも出来ます。

私がサイトのメニューを作成するときは、普通、このような指定方法を使っています。 （この方法だと、かなり限られたタグにのみスタイルを適用することが出来ます。）

<ul class="navi-bar">
  <li><a>メニューアイテム１</a></li>
  <li><a>メニューアイテム１</a></li>
  <li><a>メニューアイテム１</a></li>
</ul>

ul.navi-bar {
  background-color: gray;
}
ul.navi-bar li {
  float: left;
}
ul.navi-bar a {
  display: block;
  background-color: white;
}

クイズ？

CSSの復習のつもりで、やってみましょう。どのタグの、どんな class、id、親要素を持つタグにCSSが適用されるか考えてみてください。

復習テスト

  1. h1 { font-size: 300%; }
  2. .yellow { background-color: yellow; color: orange; }
  3. div#box p { color: green; }
  4. body p.green a img { border: 3px double green; }

/4