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

グローバルナビ用のCSSの設定方法をサンプルを用いて解説。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

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

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

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

<ul id="gNavi">
	<li><a href="/">トップページ</a></li>
	<li><a href="/profile.html">プロフィール</a></li>
	<li><a href="/about.html">当サイトについて</a></li>
	<li><a href="/links.html">リンク集</a></li>
	<li><a href="/contact.html">お問い合わせ</a></li>
</ul>

メニューをインラインで横に並べる方法

第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に指定しました。

最終段階 - アンカーテキストの色と下線を指定

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

[CSSの記述]

#gNavi { margin:0; padding:0 10px; line-height:30px; }
#gNavi li { display:inline; list-style:none; padding-right:10px; }
#gNavi li a {
	color:#900;
	text-decoration:none;
	border-bottom:solid 3px #c00;
}
#gNavi li a:hover { color:#f00; border-bottom:solid 3px #f00; }

[ブラウザ上の表示]

「#gNavi li a」は「id="gNavi"」内にあるliタグに囲まれた全てのaタグという意味です。colorプロパティでリンク部分の色を指定し、text-decorationプロパティでリンク部に自動的につく下線を消去、そのうえで、border-bottomプロパティによりリンク色に合わせた3pxの実線を引きます。

また、「#gNavi li a:hover」によりリンク部分にマウスカーソルが乗せられたときに表示されるテキスト色および下線を設定して終了です。

非常にシンプルな指定ですが、一番最初のサンプルと比べ、随分見栄えがよくなりました。画像を使ったり、複雑な宣言をしたりしなくても、十分見栄えを整えることができます。