第27回 セレクタはシンプルかつわかりやすく書くテーブルレイアウトを卒業しよう

セレクタはシンプルかつわかりやすく書く

セレクタは、同じ箇所を指定するのにもさまざまな記述方法が考えられます。

特に非常によく使う子孫セレクタの書き方は多くのパターンが考えられるため、ときに冗長な指定になってしまうことがよくあります。

たとえば、このようなXHTMLソースで考えてみます。

<div id="wrapper">
<div id="header">
<h1>タイトル</h1>
<div id="global-nav">
<h2>グローバルナビゲーション</h2>
<ul>
<li><a href="#" class="home">home</a></li>
<li><a href="#">infomation</a></li>
<li><a href="#">products</a></li>
<li><a href="#">recruit</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</div>
</div>

このソースコードの「class属性にhomeがあるa要素」を指定するとします。

子孫セレクタを使って、完全に1つずつ階層を下っていくとすれば、こうなります。

html body #wrapper #header #global-nav ul li a.home {

}

しかしこの書き方はあまりにも冗長です。

ブラウザーはCSSをHTMLに適用する際に、HTMLとCSSを照らし合わせてスタイルを適用して…という作業を繰り返しているため、セレクタが長ければ長いほど、その作業は大変になる=時間がかかってしまいます。

セレクタをシンプルにすることでパフォーマンスが向上するので、最速の方法はこのようになります。

.home {

}

しかし、これはパフォーマンス的には良いのですが、コーディングをする側からみるとシンプルすぎるためにあとから見て「アレ、これってドコを指してるの…?」ということになりかねません。

なので、このあたりはそれぞれの人や組織の考え方次第ですが、パフォーマンスと可読性のバランスを考える必要があります。

たとえばこんな感じでしょうか。

#global-nav li .home {

}

まず、削った部分としては、ID属性は必ずユニークであるはずなので、入れ子にする意味はありません。Dreamweaverを使うとがっつり入れ子になったりします。CSSの講座でも入れ子で書いていますが、それはそれでXHTMLの階層構造が明確に分かるので、慣れないうちは良いと思います。

また、ul要素については、li要素は必ずセットでくっついてくるものなので、ul liとする意味がありません。これはtable要素においてもtable tr tdが無意味で、tdだけOKといえます。

最後に、クラスの部分でa要素を削りました。

aの指定があってもなくてもhomeクラスが適用されている先は同じなので、指定しなくてもいいですね。

これがベスト、正解ということではないので、何を優先するかによって変わってくるかと思います。

ですが、特にDreamweaverのCSSパネルでセレクタを自動で記述している方は、一工夫するといいのではないでしょうか。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
さまざまなツールでIEの表示を確認する
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読