CSSレイアウト
複雑な応用型レイアウト - まとめ
複雑な応用型レイアウトのコーナーでは、Yahoo! のトップページを例に、実際にCSSでレイアウトを再現しました。
ここまでCSSレイアウトの解説を行っているサイトは他に無い（？）と思います。今度は、自分の力で自分の思い通りのページレイアウトにチャレンジしてみてください^^
ちょっと話は変わりますが・・・今まで触れていませんが、Yahoo!のページをCSSで再現するためには、無理をしている部分がいくつかあります。特に、かなり無理をしている部分がこれ。
li要素の背景画像です。何が良くないって・・・確認してみれば分かりますが、ブラウザによって表示に結構差が出てくるためです。また、フォントサイズを変更すると、不釣合いになってしまいます。
それなら、テキストとして作成すれば良い・・・ということになるのですが、
<li><a href="#">*********</a>,</li>
<li><a href="#">*********</a>…</li>
のようにHTMLの方に記述するのはナンセンスでしょう。
今回は、CSSでYahoo! のページを再現するということだったので、あえて背景画像で表示させましたが、本当にCSSでページデザインをしたいのならば、今回のようなコンマ、ドット、ハイフン等は表示する必要は無いでしょう。適度なスペースを空けるだけで、十分です。
アドバイス
複雑なレイアウトを組む際には、どうしてもdiv要素を多用しがちです。確かに、div要素は特別な意味を持たず、スタイルを自由に指定することが出来るので便利です。でも、よく考えてみると不要なdiv要素はたくさんあるはずです。
例えば、CSSの指定方法をちょっと変えてみると、今まで必要だったdiv要素が不要になることは良くあります。
また、本来は違う要素でマークアップすべきテキストを、div要素で記述していないかどうかもチェックしてみてください。必ず、意味を考えてマークアップすること。
思い通りのレイアウトにするために、複雑な記述になってしまう場合・・・たまには妥協も必要です。多少見た目は変わってしまうかもしれませんが、もっとシンプルな記述に書き換えてみてください。
複雑な記述になればなるほど、苦しむのは自分なんですから。
