第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パネルでセレクタを自動で記述している方は、一工夫するといいのではないでしょうか。
では次回もお楽しみに。（こう
）
お問い合わせ
メルマガ