第5回　グローバルナビゲーション作成の復習

解説：矢野りん

グラデーションを使ってクールな表情を与えたナビゲーションは、GIFなどの画像を切り貼りして作るのが一般的だ。しかし画像は代替テキスト（alt属性）を与えても、テキストリンクに比べると機械可読性は悪い。しかも、画像のボタンは印刷モードのレイアウトへ１ソースで切り替えるのが面倒でもある。そんな時グラデーションのような装飾要素は背景化して、リンクはテキストで表示したナビゲーションは重宝する。マウスをリンクに乗せたときだけ表示する下線もパターン付きの画像をうまく使って、テキストのみのあっさりとしがちなスタイルに、ちょっとした変化を与えている。

グローバルでもローカルでもナビゲーションを形成するXHTMLの基本は項目の並列に便利なリストタグである。個々でもスタイルなしの状態では【図1】のような単なるリストの羅列になる。

順序のないリスト「Unordered List」の開始を宣言するulタグには、この部分がグローバルナビゲーションの固まりになることを示すIDとして「nav」と名付けておいた。IDはグローバルであることを強調するため「Gnav」などにしてもいいだろう。ソースは【図2】の通りで、表示したHTMLは【図3】だ。

ブラウズすると、先頭に黒丸のついた単なるリストが表示される。

 

 

次の段階で各リストの項目「li」に対し、クラス名を設定しておこう。ここで付けるクラス名には、後にリンクを指定した項目に関しては、マウスでさわるとスタイルが変化するというアクションを付け安くする目的がある。

あとはリストにリンク先を指定してやるだけだ。これでXHTML部分は編集が終了する。次に「nav」全体のデザインを決めるスタイルシートの編集に入る。

 

 

【図5】では、ページ全体の背景色と、「nav」バーの上下にラインが入った状態が確認できるだろう。ここで１つ注意。順を追ってスタイルの説明がしやすいように、リンク先はまだこの時点では指定していない。ここではIDの「nav(スタイルシート上では#nav)」において、バー全体のデザインのキモとなる背景色と上下のラインの太さと色、さらにページに対する上下の余白設定を加えている。また、リンク全体が右よりに見えるように左サイドに300pxの詰め物「padding」を置いた。ちなみにこのバーはレイアウトの最大幅が800pxのページで利用する想定だ。

 

また、バーの背景には淡いグレーのグラデーション画像を置いてクールな表情を付けた。また、バーのスタイルの中にナビゲーションのラベルのフォントサイズとフォントスタイルを指定した。

デフォルトで入るリストの黒丸を消しつつ横一列に並べる指定に加えて、ナビゲーションのラベル左右にそれぞれ20px、15pxの空白「padding」と、5pxの余白「margin-right」もここで加えておく。【図7】が詳細画面だ。

最後にリンク設定したナビゲーションのラベルに必要な上下の余白を、「#nav」の「li」、「a」セレクタに対して設定したのが、【図8】だ。リンクの付いたテキストにマウスでさわると背景に画像を配置する仕掛けを作りたいため、画像とテキストの位置を計画通りに合わせたいため必要となる手順だ。また、「a」セレクタに指定した空白「padding」は、そのままマウスが反応する領域になる。

もし、これが0なら、リンクテキストそのものの表示領域へ正確にマウスカーソルを乗せない限り背景がすり替わるという反応は起こらない。aセレクタ内で上下に空白をそれぞれ0.75emと0.4em与えたお陰で、この領域もアクションが起こる範囲に認識してもらえる。こちらのほうがスピーディーに反応するナビゲーションが作れるというものだ。

最後はilの各クラスに対して、マウスを重ねた際のテキストの色と、すり替わる背景の画像（ここでは太い下線）を指定してできあがりだ。