5.2 ナビゲーションメニュー

戻る

サイト内の他のページに繋がるリンクを並べたパーツです。マウスカーソルを重ねると背景色がグレーになるよう設定しています。

<nav>
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">ガジェット</a></li>
<li><a href="#">その他雑貨</a></li>
<li><a href="#">過去の記事</a></li>
<li><a href="#">よくある質問</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>

/* ナビゲーションメニュー */
nav ul { margin: 0;
         padding: 0;
         list-style: none; }

nav a { display: block;
        padding: 5px;
        color: black;
        font-size: 14px;
        text-decoration: none; }

nav a:hover { background-color: #dddddd; }

/* メニューを横に並べる */
nav ul:after { content: "";
               display: block;
               clear: both; }

nav li { float: left;
         width: auto; }

完成例

上記のようにメニューっぽいものができたら完成です。マウスカーソルを重ねると色が変わるはずです。

HTML部分の解説

メニューはHTMLのリスト（箇条書き）機能を使って <ul> と <li> で表示し、各項目には <a> でリンクを設定しています。全体は <nav> タグで１つのグループにまとめ、スタイルシートでデザインを指定しやすいようにしています。

なおHTMLだけの状態では、メニューは横ではなく縦に並びます。最終的にスタイルシートを使って横並びに変えます。

スタイルシートを適用する前の状態。

CSS部分の解説

リストのマーク削除と文字のデザイン調整

標準ではリスト項目の先頭部分に黒丸がついたり、余計な余白がついたりしますが、それらを削除するために <ul> の margin と padding を「0」にし、list-type を「none」に設定しています。

また、リンクの文字色を黒色にし、文字サイズを14ピクセルに、下線を非表示にするために、<a> に対して color を「black」に、font-size を「14px」に、text-decoration を「none」にそれぞれ設定しています。

/* ナビゲーションメニュー */
nav ul { margin: 0;
         padding: 0;
         list-style: none; }

nav a { color: black;
        font-size: 14px;
        text-decoration: none; }

マウスカーソルを重ねた際の効果

リンクにマウスカーソルを重ねた時に、背景色が変わるようにします。ここでは background-color を使って背景色をグレー（#dddddd）に設定しています。

なお通常の場合、カーソルを重ねてリンクが機能する範囲は、文字が書かれている部分のみとなっています。

/* ナビゲーションメニュー */
nav ul { margin: 0;
         padding: 0;
         list-style: none; }

nav a { color: black;
        font-size: 14px;
        text-decoration: none; }

nav a:hover { background-color: #dddddd; }

リンクが反応する範囲の調整

スマートフォンなどでもリンクをタップしやすいように、リンクが反応する範囲を大きくします。

display を「block」に設定すると、リンクが反応する範囲を横幅いっぱいにまで広げられます。また、リンクの内側に5ピクセルのパディングを設定し、リンクが反応する範囲を上下方向にも広げます。

/* ナビゲーションメニュー */
nav ul { margin: 0;
         padding: 0;
         list-style: none; }

nav a { display:block;
        padding: 5px;
        color: black;
        font-size: 14px;
        text-decoration: none; }

nav a:hover { background-color: #dddddd; }

リンクを横に並べる

縦並びで作ったリンクですが、画面に占める面積の関係上、横並びにしたいと思います。その場合も、スタイルシートを使って後から横並びに変更できます。具体的には、リンクを縦に並べる設定に、「ボックスを横に並べる」で行った設定を追加して作成できます。

この例の場合、HTMLのリスト（<ul>～</ul>）構造を使っているので、すでに <li> によって６つのボックスが作られており、それらを <ul> がグループ化している構造になっています。

よって、「ボックスを横に並べる」の設定を <ul> と <li> に置き換えて適用すれば、以下のように６つのボックスを横に並べられます。
なお、各リンクの幅はボックスの中身に合わせるため、<li> の width を「auto」に設定しています。

/* ナビゲーションメニュー */
nav ul { margin: 0;
         padding: 0;
         list-style: none; }

nav a { display: block;
        padding: 5px;
        color: black;
        font-size: 14px;
        text-decoration: none; }

nav a:hover { background-color: #eeeeee; }

/* メニューを横に並べる */
nav ul:after { content: "";
               display: block;
               clear: both; }

nav li { float: left;
         width: auto; }

メニューが横に並びました。