第9回 CSSでタブ型のナビゲーション
今も昔もタブ型のナビゲーションは重宝するスタイルである。CSSでレイアウトするなら、画像ボタンを直貼りせずに、背景画像とプレーンテキストの合わせ技を使いたいもの。デザイン的な工夫と併せて基本的なやり方を把握しよう。また、今回からCSS初心者のための「基本のキ」という入門コラムも掲載。そちらも参考にして欲しい。
■POINT
タブの「切り替わってる感じ」をしっかり出すなら、ナビゲーションとコンテンツの周囲にダークカラーを適用して、背景と明確に区別してしまう処理が効果的だ。この工夫のお陰で前のタブと後ろのタブの関係性も強調できる。
今回のスタイル完成画面
このレイアウトは２つの異なるタブ用画像を、ラベルの後ろに背景として読み込んで作る。他の色要素はブロックレベル要素に対する背景色やボーダーなど、編集中の画像をみると、さほど大きな違いは無いように見える。しかし、よく見ると、閲覧中のページのラベルはのっぺりした扁平な作りになっている。一方で閲覧中ではないページ用のラベルは左端に1ピクセルの、背景のダークカラーと同じ色のラインと、画像下部のグラデーションによる影を付けている。このちょっとした工夫によって、閲覧中が手前に、そうでないものが後ろにひっこんで見えるわけだ。【図1】と【図2】をよく見比べて欲しい。
【図1】タブがONの状態
【図2】タブがOFFの状態
影と左側の罫線の有無に違いがあるタブの画像。これをliの背景画像に指定する。
■STEP 1
ではXHTMLのidやclassの付け具合をみてみよう。
【ソース1】
ポイントは「li」タグに「class」を付けてた点。それぞれ個別の背景画像を参照するので「id」でなく「class」にした。
【ソース2】
これは全要素の余白設定をリセットする記述だ。この宣言でブラウザの設定をリセットする。
【ソース3】
全体をぐるりと取り囲むダークカラーの背景。最終的なレイアウトでは淡いグレーとダークグレーの2重線にしか見えないが、内側の線はwrapperの背景色だ。ちなみにwrapperの「div」に改行を入れただけのXHTML構成の場合、レンダリング結果は【図3】のようになる。
【図3】wrapperの中に改行設定を入れて高さを出した状態。周囲にあったものが線でなくて背景だったことがおわかりいただけるだろうか
■STEP 2
次に記事が入る領域を作っていく。こちらはグレーがかったピンク（#F4E5F6）の背景にする。「margin: 5px」は、この囲みの周囲にwrapperの背景色をぐるっと「5px」ぶん表示させるために必要。「padding: 10px 20px;」は記事の上下に10pxずつ、左右に20pxずつの余白を設けるために必要な設定だ。記事本文の書式もここで決めた。
【ソース4】
■STEP3
次にタブ（Gnav）のナビゲーションスタイルの設定を行う。「ul」と「li」、「li」の「a」要素に対して共有のスタイルを設定した。「ul」のブロックレベル全体の位置を決めたり、「li」を横一列に並べるための記述が中心だが、この部分最大のポイントは「ul#Gnav li a」の「height: 32px」という指定だ。じつはタブ用画像の高さは38pxある。ということは6px足りないではないか。と考えるのが普通だが、次の行の「padding-top: 6px」に注目。タブ上部と中のテキストに6px余白を与えるための指定だが、もし画像のサイズぴったりの38pxの高さに対してこれをやると、余白分の6pxが加算されてこの部分全体は44px相当になってしまうのが、【図4】だ。こうなるとタブが記事用の囲みにくっつかなくなるので、あらかじめタブ表示用ブロックからは6px差し引いて「height: 32px」としてやらねばならないのだ。ソースは、【ソース5】を参照。
【図4】上部にpadding 6px設けながら、liの表示サイズをタブ画像と同じ、高さ36pxに設定した状態。下が4pxぶん空いてしまった
【ソース5】
全体をぐるりと取り囲むダークカラーの背景。最終的なレイアウトでは淡いグレーとダークグレーの2重線にしか見えないが、内側の線はwrapperの背景色だ。ちなみにwrapperのdivに改行を入れただけのXHTML構成の場合、レンダリング結果は【図3】のようになる。
■STEP4
最後に閲覧中とそうでないラベルで参照する画像を分ける記述を加える。テキストの色の切り替えもここに含めてある。
【ソース6】
タブ切り替え後のページではclassの指定を入れ替えてやることで、【図5】のように画像が切り替わるページになる。
【図5】別のページにジャンプしたところ。タブの前後がちゃんと入れ替わっている。
完成HTMLのソース
完成CSSのソース
コラム：基本のキ その1
idとclass
どう違うんだか使い分けが理解しにくい両者だが、どちらもHTMLにスタイルを振り分けるための「セレクタ」というお道具だ。「id」を使ったほうが良い場合は、サイトの中で共通して使うであろう、ナビゲーションの固まりなどをまとめて指示する時だ。今回の作例でもナビゲーション用全体をマークアップする親の「div」に対して「Gnav」という「id」を付けた。サイトで名前を統一しておけば、CSSのスタイルを1行訂正するだけで、全ページに修正が反映する。 ちなみにナビゲーションやコンテンツ領域全体をまとめる「div」用の「id」は、だいたいどのサイトも似たような「id」をつけることが制作者の間では意識されつつある。グローバルナビゲーションは「Gnav」、全体をまとめる「id」はwrapperやcontainerといった具合だ。
一方の「class」の場合、あるページに単発で使うスタイルや、同じid内でもスタイルを切り替えたい時などに使うもの、と区別して良い。
次回へつづく
 |
［プロフィール］ やの・りん●北海道足寄町生まれ。女子美術大学芸術学部芸術学科卒。著書に『Webレイアウト見本帳』、『WEBレイアウト・セオリー・ブック』（エム ディエヌコーポレーション）がある。近著『デザインする技術』（エムディエヌコーポレーション）も好評発売中。身長 152.1cm。 |
