Lesson 09 リスト定義をベースにしたナビゲーションレイアウト - Webデザイン表現&技法の新・スタンダード・レイアウト編

Webデザイン 表現&技法の 新・スタンダード

Lesson 9

リスト定義をベースにした ナビゲーションレイアウト

	制作・文			境　裕司
＞	To Use			CSS
＞	Browser			IE 7over | Firefox 3over | Safari 4over

ナビゲーションレイアウトには水平と垂直タイプがあり、ul要素、li要素でリスト定義された箇条書きに対してスタイルを指定し、ページに組み込まれる。水平タイプならコンテンツ領域とは明確に分離される。

ナビゲーションはコンテンツと分離したユーザーインターフェイスだが、1ページ内に配置される重要な要素である。デザインのテイストをあわせるときは、見出しや本文などのコンテンツ要素と同化しないようにデザインする必要がある。リン クボタンが並ぶナビゲーションは通常、ul要素、li要素でリスト定義された箇条書きに対してスタイルを指定していく。ここで解説するサンプルでは、「ヘッダー領域＋ナビゲーション領域＋コンテンツ領域＋フッター領域」といった標準的な構造のページを使用する【1-1】【1-2】。


【1-1】ヘッダー（header）＋ ナビゲーションとコンテンツ（contentGroup）［ ナビゲーション（globalheader）＋ コンテンツ］ ＋ フッター（footer）という構成


【1-2】

h要素のスタイル指定。h1要素、h2要素、h3要素に対して文字サイズを決めていく。text-transform:uppercase は、大文字に変換表示する指定である【2-1】【2-2】。



【2-1】

【2-2】ヘッダー領域の大見出し、中見出し、小見出しのスタイル指定

Webページの基本デザインを指定する。すべての要素をグループ化している<div id="outerGroup">～</div>に対してwidth:700px; margin:0 auto;を指定、幅を700ピクセルに固定して中央揃えで表示している【3-1】【3-2】。


【3-1】


【3-2】

【3-1】【3-2】<div id="outerGroup">～</div>にスタイルを指定し、幅を700 ピクセル、中央揃えで表示する

ナビゲーション領域（<div id= "globalheader">～</div>） のサイズwidth:540px; height: 40px;と指定する【4-1】【4-2】。


【4-1】


【4-2】<div id="globalheader">～<div>に対して、幅540 ピクセル、高さ40 ピクセルを指定

li要素に対してdisplay: inlineを、a要素に対してfloat: leftを指定して、箇条書きの項目を水平に並べる。項目の幅はそれぞれ180pxに固定される。ここでは、高さを0にして箇条書きのテキストを隠し、パディングの指定（padding-top: 40px）で高さを確保している【5-1】【5-2】。


【5-1】リストの項目（#globalheader #globalnav li a）は、height: 0 を指定することで、ページから隠している


【5-2】

ナビゲーションの画像は、3つのリンクボタンを、幅540×高さ80ピクセルの1つにしている。1つのリンクボタンのサイズは幅180×高さ40ピクセル。このナビゲーション画像をリンクボタンのサイズでトリミングし、3箇所に絶対配置する。こう すると「about」、「archive」、「contact」の各ボタンが同時に表示される【6-1】。


【6-1】ナビゲーション画像は、180×40ピクセルのボタンを水平に3つ、垂直に2つ並べたものを使用

a 要素に対して、background-image:url(mavi.jpg);} を指定。Web ページにナビゲーションが表示されるが、実際は、「about」ボタンとして機能するナビゲーション画像しか使われていない状態（aboutが3つ並んでいる）【7-1】【7-2】。


【7-1】


【7-2】aboutのボタンが3つ並んでいる状態。それぞれに絶対配置の座標値を指定する必要がある

「about」「archive」「contact」にそれぞれ id名ch-about、ch-archive、ch-contact が割り当てられている。backgroundposition は、left, right, center, bottomで 指定する。値がleftは0、centerは50%、 rightは100%の位置を表す。たとえば、 center topなら画像の中央の上部（50% 0）が表示される。マウスオーバーの指定 は、background-positionの垂直方向のみ 変更。「center top」は「center bottom」 に変更すればよい【8-1】【8-2】。


【8-1】項目の各ボタンは、left, right, center, bottomで指定する。メニュー項目が4つ以上ある場合は、ピクセル値を使おう


【8-2】