CSSの書き方に注意していこう。

Monday, November 17, 2008

カテゴリー：CSS,WEB

右図のようなページがあったとします。 id「nav」を付加しているdiv内にあるナビゲーションのリストを、どのようにcssで表現しますか？

大まかに４つの方法。

書き方は色々あると思いますが、以下の４つの方法に分けられると思います。

１、各liに対してidをつけることで、それぞれのリストを表現する

li#top {
	color: #FFF;
}

２、idを付加したdivでulを囲み、各liにclassを付加する

div#menu ul li.top {
	color: #FFF;
}

３、ulにidを、各liにclassを付加する

ul#menu li.top {
	color: #FFF;
}

４、各liにclassを付加する

div#nav ul li.top {
	color: #FFF;
}

４つの書き方の解説。

１、まず初歩的なやり方として、各liにidを付加するやり方。
この場合のhtmlはあまり汚れることがないのですが、idを利用していることで、ページ内で２度目の出現が許されないのが、難点です。
例えば、「div id="footer"」に見た目は違うけど、内容が同じナビゲーションをつけたいと思った場合、再度idもしくはclassを付加して表現しないといけなくなります。

２、cssに慣れてきた頃によくあるdivを作ってその中で展開してしまうパターン。
確かにdivで囲んでしまえば大概のことはできてしまいますが、divばかりが増えて、htmlが汚くなってしまうのが難点。

３、２の状態から少し進化した形。
htmlの要素に対して、idやclassを付加することに臆しなくなるとしめたものですね。

４、最後に外の大枠で括っているdivを利用して指定する方法。
「div id="nav"」内に２つのリストが必要な場合は、３の方法をとらざる得ないですが、もし「div id="nav"」内に１つのリストだけが存在する場合は、４の方法がよりhtmlを汚すことなく表現でき、かつ拡張性も高いので望ましい形と言えます。

以上４つのやり方を書きましたが、cssレイアウトをしていく中で、３か４の方法を身につけて行けばいいと思います。