第12回　liタグを使ったフル画像のナビゲーション

背景画像に文字要素を乗せてナビゲーションをつくるのがCSSレイアウトの基本技だが、場合によっては全部を画像で作り込んで特徴のあるレイアウトを実現したいものだ。liタグを使いながらもフル画像のナビゲーションをつくってみよう。

手描き風の文字を使ってかわいらしい雰囲気を作る。マウスカーソルが触れたときの反応は、これまた手描き風のシミがナビゲーションボタン上に飛び散る設定とし、ローファイさを追求した。背景にグリーン系の中間色を使い、文字はグリーンに隣接した色相のオレンジにしてまとまりを与えている。

 

 

まずHTML側ではいつものように全体を１つにまとめるdivタグを用意し、navというidを与える。ナビゲーションなので迷わずul、liのセットでリストを作成した。ここでは各項目へさらに独自のid（nav1～nav4）を与えた。それが、【ソース1】だ。

スタイルを付けない状態で閲覧すると、当然ながら全体は【図1】のようにプレーンなリストになる。ここからはCSSの作成段階、ulのスタイル設定に入ろう。何はなくとも「ul」のビュレットを消す設定と全体の幅サイズを決めることから。このあたりまでは連載に目を通してくれた方なら簡単にこなせてしまうに違いない。確認のために【ソース2】を見てみよう。

次はli要素すべてに共通するスタイルの記述を【ソース3】のように行う。共通スタイルは表示の幅と高さ、背景画像の出現方法の２つになる。

【ソース3】記述後は、リンク設定のある（aの付いたliセレクタ、と言い換えられる）li共通のスタイルについて決めよう。ブロックレベルの表示スタイルとする（display:block;）、を与えることがポイントだ。また、マウスオン時のスタイルにあたる（a:hover;）には-71px画像の表示をずらして、初期状態では隠れている背景画像の下の部分（つまりシミをかけたほう）が見えるようにする。【図2】が、画像すり替えの基本テクで、ソースは【ソース4】だ。

 

 

 

最後に【ソース5】のように、各liの背景画像を参照して作業終了だ。

 

 

しかし、この状態でHTMLをプレビューしてみると、【図3】のように画像の上に妙な物が……。リストでマークアップした各項目のテキストである。ul、liは当然ながら、テキスト要素に対して付けるもの。だからレイアウトにテキストが含まれるのは当然だ。しかし今回の場合、画像にテキストの要素は含まれているので余計である。そこで裏技的にtext-indentプロパティを使って、このテキストを遙か画面の彼方に飛ばす処理を加える。というわけでliセレクタに修正を加えた。また、【図4】のように表示ブロックの外にある要素は非表示にする「overflow:hidden」も念のため付けておこう。

 

 

スタイルを付ける相手を指定する方法がセレクタである。h2やpなどHTMLタグの要素がそのままセレクタとして使える他、idやclassという宣言方法で任意のセレクタを作ることもできる。今回の作例で使ったセレクタはすべてidの形式で割り当てているが、コードをわかりやすくするため１部グループ化してコードをまとめている。navというidを付けたdivにおいて使用している各li(idはnav1,nav2,nav3,nav4)セレクタと、それらにaの着いたセレクタは同じ背景画像を参照する同一のスタイルを取る。ここはaのあるなしで分けて指定せず、両セレクタをカンマで分けて列挙し、プロパティ（スタイルの中身のこと）を記述した。