ナビゲーション！リストタグを横並び：css Tips5

「display: inline;」を使用した方法では、メニュー項目の間（liとliの間）に
スペースが入って表示されてしまいます。

このスペースを表示させないようにするためには、HTML上ですべてのli要素を1行で記載するなどの対応策がありますが、
HTMLソースが非常に見づらくなってしまい、メンテナンス性が悪くなってしまいます。

そのため、この方法を用いる場合は、項目の間にスペースが入っても特に問題がないパンくずリストなどを
記載する際に使用することをおすすめします。

「float: left;」を使った方法は、li要素の中のaタグをブロック要素化したり、
背景画像を使用した表現にも適しており、汎用性のあるテクニックになります。

floatプロパティを使用することになるので、これをclearプロパティで解除することを
忘れることが無ければ、様々なケースに応用することが出来ます。

clearfix.cssのcssコードがclearfix（クリアフィックス）の指定になります。

clearfixは、フロートを解除するのに非常に便利なテクニックになります。
これを使えば、clearプロパティを指定したbr要素や空div要素を入れて無理やりフロートを解除する必要が無くなります。

たとえばfloatプロパティを使用した際に、フロートの解除をおこなわなかった際には、レイアウト崩れの原因になってしまいます。
使い方としては簡単で、たとえばul要素とli要素でマークアップをおこなった場合、li要素をフロートで横並びにレイアウトさせた際は、親要素であるul要素に「class=”clearfix”」と記載します。

単純にコレだけで、フロート解除がされるため、比較的HTMLもシンプルに記載できるかと思います。

サンプル画像のようなナビゲーションの作成方法を記載していきます。

一般的なウェブサイト全般に広く応用できそうなスタイルになっています。
今回コチラでご紹介する方法は、文字部分は画像ではなくテキスト表記になっているので、
メンテナンスの手間もかからない方法になります。

HTML構造は下記に記載する通りで、#g_naviのボックスの中にul要素のリスト項目が並びます。
これをCSSで横並びメニューに整えていきます。

マウスオーバー時には明るい色に切り替えることを想定して作成します。
通常時とマウスオーバー時の両パターンを上下に並べて一つの画像として書き出します。

また、90度方向の色の変化のみなのでx軸方向にリピートして表示させます。
そのため横幅は1pxで書き出します。

それでは実際のCSSを記載します。

今回はナビゲーションの横幅を950pxと仮定し、#g_naviは横幅950pxでセンタリングしています。
次にulのデフォルトスタイルを無効化し、ul要素のボックスには上・下・右に1pxのボーダーを表示させます。

左のボーダーはこのa要素に指定するものとかぶるためul要素には指定しません。

li要素の横幅を190pxに指定し「float:left;」で横並びにします。
190pxという値は単純に全体の横幅である950pxを5つのメニューにするために等間隔に割った値になります。

ただし、950pxのうちul要素で右に指定したボーダーの1pxがあるため、その分を調整するためにli.key1とマークアップしてあり、ここだけ189pxとして調整してあります。

a要素をブロック要素化し、line-heightプロパティ（行間）を60pxに指定してあります。
これでメニューのテキストが60pxの高さの中で縦位置中央に表示されます。

左に1pxのボーダーを表示し、各メニュー項目の間に区切り線として表示されます。

今回はマウスオーバーで表示する画像を通常時の画像の下につなげて一つの画像としてありますので、
hoverを指定する際は、背景画像をY軸方向に半分だけずらすことで、画像が切り替わったような効果を表現することが出来ます。

さらに、a要素にonというクラスを指定してあります。
メニュー項目をクリックして該当のページに移動した際、そのページではa要素にこのクラスを指定しておけば、画像が切り替わったままとなり、ユーザーが現在位置を把握するのに役立ちます。