プチCSS講座「セレクタに何を指定したらいいか」でお悩みの方へ

※上の画像を別ウィンドウで開いて、それを見ながら以下の説明を読むとわかりやすいです。

3人ともに白いシャツを着て欲しい場合、

• みなさん
• 坂井市在住の男性の方
• 坂井市在住の方

どの呼びかけをしても同じ結果になります。実際にあなたが呼びかけをするとすれば、どれを選びますか？私なら「みなさん」を選びます。なんでかというと、シンプルで相手にも伝わりやすいからです。

では、大木一郎さんだけに白いシャツを着て欲しい場合は？

これは「大木一郎さん」ですよね。「三国町の大木さん」や「7:3わけの大木さん」でも結果は同じですけども、ま、自然とこう言いますよね。「一郎さん」では、鈴木さんもシャツを着てしまいます。自分は大木さんだけに言ったつもりなんだけど、鈴木さんも反応しちゃうという。たまに同姓の方がグループの中にいて自分が呼ばれたんじゃないのに反応しちゃったってこと、一度はないですか？あれと同じ状況です。

3つ目は、ストレートに「大木一郎さんと大木二郎さん」でもいいですし、まとめて「大木さん」でもいいですね。

ここで、CSSの話に戻りましょう。もう一度HTMLのソースを貼ります。

<div id="container">
  <div id="maincol">
    <h2 class="entry-title">おふくろでおでんを食べた</h2>
    <p>今日もおいちかった。</p>
  </div>
  <div id="subcol">
    <div id="module-recent-entries" class="module">
      <h2>最近のエントリー</h2>
        ・・・・・
    </div>
    <div id="module-recent-comments" class="module">
      <h2>最近のコメント</h2>
      ・・・・・
    </div>
  </div>
</div>

3つの見出しについてデザインを指定する場合の、いくつかのパターンを考えてみます。

1. すべてのh2の色を白にしたい

h2 {
  color:white;
}

または

#container h2 {
  color:white;
}

で期待通りの結果になります。どっちでもいいということになりますが、これはさっきの例でいう「みなさん」という呼びかけと同じように、セレクタは前者の「h2」とした方がシンプルです。

2. 「おふくろでおでんを食べた」の色だけを白にしたい

#maincol h2 {
  color:white;
}

または

#maincol h2.entry-title {
  color:white;
}

または

h2.entry-title {
  color:white;
}

または

.entry-title {
  color:white;
}

で期待通りの結果になります。「#maincol h2」と「h2.entry-title」で悩むところですが、「メインカラムの中の中見出し」よりも「記事タイトルとしての中見出し」の方がピンときました。あとまー、誰も書かないと思いますが、「div#container div#maincol h2.entry-title」は冗長過ぎです。

3. 「最近のエントリー」と「最近のコメント」の色だけを白にしたい

.module h2 {
  color:white;
}

です。

#module-recent-entries h2, #module-recent-comments h2 {
  color:white;
}

でも期待通りの結果になりますが、「似かよった小グループ（モジュール）の中の中見出し」というように翻訳してしまった方が効率的です。

現実世界では、大木一郎さんと大木二郎さんに「大木さん、白いシャツ着てください。」というと「え？どっちが？」というリアクションが返ってくるかもしれません。これは人間だと空気を読んで、「この質問は多分どちらか一方に話しかけてるだろうな」って勝手に予測しちゃうからなんでしょうね。HTMLは自己チューなやつってことで、安心してシンプルに呼びかけてください。

ついでに、もちょっと脱線しちゃいます。福井に住んでいる人なら「丸岡」も「丸岡町」も同じ意味として解釈します。ところが、コンピュータの場合はそこまで機転を利かせてくれません。

#maincol h2 {
  color:white;
}

を

#main h2 {
  color:white;
}

と書いても伝わりません。「mainって単語含んでるでしょ！」と言われましてもピッタシ正確に指示しないといけないのです。

* * *

CSSを学びたてのときであれば「とりあえず意図した通りの表示結果が得られたらOK」で全然構いません。まずはガシガシとたくさんコードを書くことの方が重要です。

効率良くコーディングしたいとか、チームで制作するからソースを読みやすくしておきたいという段階に入った際に、いくつかの正解の中から、もっともふさわしい正解を選んで書くというレベルに進んでもらうと良いと思います。

* * *

これからCSSをはじめる新人さんなどに、上記の例え話をワークショップ形式にしてやってみると、セレクタについての理解が早まるかもしれませんね。