3カラムレイアウトのニュースサイト。情報量が多い作例となっているが、XHTMLを丁寧に構造化することが、効率的なCSS制作につながることを体感する。
●div要素の構造
div#header、div#global-nav、div#search、div#primary-topics
ヘッダー領域のdiv要素。キービジュアル「日本対ブラジル戦」の部分は、そのときにもっと優先度の高いトピックが入ることを想定して、「div#primary-topics」としている。
div#footer、div#footer-nav
フッター領域のdiv要素。「会社案内」から「お問い合わせ」までのナビゲーション部分は、div要素で囲まれなくても(ul要素のままで)見た目を再現することができるが、グローバルナビゲーションなどと同様に、構造的な意味を明確に示すために「div#footer-nav」とマークアップしている。
div#container、div.column01.first-child、div.column01、div.column02
本文内容を含める部分で、とても情報量が多い。3カラムでレイアウトするが、まず各カラムを形成するdiv要素に「.column01」「.column02」というクラスを指定している。さらに「div#container」内で最初に登場するカラム(一番左のカラム)には「.first-child」というクラスをつけ、異なるスタイルを適用できるようにしている。
div.section-lv2#topics/#cool-players/#service-seminar/#special-contents/#banner
1カラムレイアウト、2カラムレイアウトでもおなじみの、h2要素を含めるdiv要素。クラス(.section-lv2)で共通のスタイルを適用しながら、IDセレクタで別のスタイルを適用できるようにしている。
div.section-lv3、div.section-lv3.last-child
h3要素を含めるdiv要素。見出しレベルh1要素、h2要素、h3要素の順で出現するように、「div.section-lv3」は「div.section-lv2」の下位要素としてしか出現しない。それぞれの範囲で最後に出現する「div.section-lv3」には「.last-child」というクラスを指定し、別のスタイルを適用できるようにしている。
●見出し要素の構造
情報量が多くなるにともない、見出しの数も増えていく。h1要素からh6要素までのどれでマークアップすればよいのかも悩むことがある。作例では「情報の固まりごとにdiv要素を設けて見出しを指定する」、「見出しはh1、h2、h3・・・という順番で指定する」とルール決めしてマークアップしている。見出しの順序というと、h1要素のあとにh2要素を飛ばしてh3要素が出現するページを見かけることもあるが、ここでは理想的な見出し構造にしている。
●マルチカラムの高さを背景画像で揃える
「div#container」に含まれる3カラムのうち、左側と真ん中のカラムは白の背景色で上下左右にグレーの境界線が引かれている。両方の背景の高さが常に揃っていることが、デザインカンプから読み取れるが、それぞれの高さは内容量に依存する。heightプロパティで高さを指定することもできるが、内容量にあわせてたびたび値を変更するのは面倒なので、親要素である「div#container」の背景に、グレーの境界線を引いた縦長の画像を指定することで、あたかも常に高さが揃っているように見せることにしている。
文字サイズを大きくしてもグレーの境界線を引いた縦長の画像の”見きれ”が発生しないように、画像の高さは大きめにしておく。
今日はここまで。
0 件のコメント:
コメントを投稿