グローバルナビの作り方（インライン版-1）

グローバルナビの作り方（インライン版-1）

グローバルナビとはサイト内全ページの定位置に掲載されるナビゲーションメニューを指します。ここでは、ページ上部に掲載するグローバルナビの作り方を解説します。

HTMLの書き方

ページ上部に掲載するグローバルナビは横にメニューが並ぶ形になりますが、HTML上では次のようにulタグ＆liタグもしくはdivタグ＆pタグを用いてコーディングします。

<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>

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

上記のHTMLコードをそのまま表示させると、次のようにメニューが縦に伸びることになります。

CSSの書き方

これをCSSを用いて整形し、メニューが横に並ぶようにするわけですが、その並べ方にも2種類の方法があります。

インラインで表示

1つは、liタグをインラインで表示させる方法です。

通常、ブロック要素として縦に並ぶliタグを、displayプロパティを使ってインライン要素として表示させ、横に並べるものです。（spanタグを続けて記載するのと同じ表示になります。）

この方法は、装飾可能な範囲がやや限られる反面、CSSの書き方が簡単でメニューの追加が容易にできるメリットがあります。

ブロックで表示し、floatで左寄せ

もう1つは、liタグをブロック要素として表示させ、floatプロパティを用いて左に寄せて並べる方法です。

ブロック要素であるだけでは上記の例のように縦に並んでしまいますが、floatプロパティを用いることで1つ1つを回り込ませて表示させ、メニューを横に並べることができます。

この方法は、サイズの指定や崩れ回避をするための指定が少々面倒なものの、よりデザインの幅が広がるメリットがあります。

詳しいCSSの書き方は、次の記事「グローバルナビの作り方(2)」で解説します。