グローバルナビの作り方(インライン版-2)

liタグやpタグで書かれたグローバルナビ部分を、CSSで整形し、メニューを横に並べる指定方法をタイプ別に解説します。

[この解説で使用するHTMLコード]

メニューをインラインで横に並べる方法
第1段階 – liタグをインラインで表示

ブロック要素であるliタグをインライン要素として表示させるためには、displayプロパティを使用します。また、liタグに自動的に付けられるリストマークを、list-styleプロパティで非表示にします。

[CSSの記述]

#gNavi { margin:0; padding:0 10px; }
#gNavi li { display:inline; list-style:none; }

[ブラウザ上の表示]

トップページ
プロフィール
当サイトについて
リンク集
お問い合わせ

「#gNavi li」とすることで、「id=”gNavi”」内にあるliタグ全てに、宣言を適用させることができます。上の例では、#gNavi内のliタグ全てを「インライン要素で表示し、リストマークは非表示」になるよう指定しています。合わせて、marginプロパティで外側の余白をなしに、paddingプロパティで#gNavi内側左右に10pxの余白を設けました。
第2段階 – リンク間の余白を指定

上のままでは、リンク同士がくっつきすぎて見づらくなってしまいますので、余白を取って見栄えを整えます。

[CSSの記述]

#gNavi { margin:0; padding:0 10px; line-height:30px; }
#gNavi li { display:inline; list-style:none; padding-right:10px; }

[ブラウザ上の表示]

トップページ
プロフィール
当サイトについて
リンク集
お問い合わせ

padding-rightプロパティでインライン表示するliタグの右側に10pxの余白を設けました。これでリンク同士が近づきすぎず見やすくなりました。また、line-heightプロパティで#gNavi内の行の高さを30pxに指定しました。
最終段階 – アンカーテキストの色と下線を指定

さらに、メニューに目がいくようアンカーテキスト(リンク部のテキスト)の色をサイトカラーに合わせて変更し、下線を太くしてみます。