ULを使ってナビゲーションメニューを作ってみよう

前回はfloatを使ってメインコンテンツのデザインを作成しました。 今回からはナビゲーションの作成に取り掛かりましょう!

現在メニュー用のテキストには箇条書き(UL)の設定だけをしており、まだリンクを貼ってはいません。 まずはメニューにリンクを設定し、各項目のスタイルを設定していく事で、それぞれの項目をボタンとして表示させていきます。

メニューにリンクを設定

箇条書きやテキストなどに他のページへ移動するためのリンクを設定するためには、HTMLのAタグを使用します。

練習用ページのナビゲーションメニューにはulを使って箇条書きが設定してあり、各項目にはliが設定してあります。 この場合li内にaを埋め込むことで、他のページへのリンクを貼る事ができます。

<li><a href="sample.html">ホーム</a></li>

sample.htmlの部分には移動先のページのURLを入力します。 こんな感じでliの中にaを埋め込んでみましょう。

では練習用ページのメニューの項目にそれぞれ設定していってみましょう。

<div id="menu">
<ul>
   <li><a href="sample.html">ホーム</a></li>
   <li><a href="sample1.html">遊び</a></li>
   <li><a href="sample2.html">仕事</a></li>
   <li><a href="sample3.html">パソコン</a></li>
   <li><a href="sample4.html">アフィリエイト</a></li>
 </ul>
</div>
aタグを設定後の表示例

記述後、内容を保存してブラウザで確認してみると上記のように、メニュー部分にリンクが設定されます。 リンク部分のテキストは青色になり、アンダーラインが表示されますが、こういったデザインはCSSで全部変更できるので安心して下さい。

また今はリンク先のページが存在しないので、クリックしても移動する事はありません。 ですが、リンク先のページが存在していれば、しっかりと移動することができます。

箇条書きの黒丸を非表示にする

黒丸(ブレット)の部分の場所

箇条書き(ul)を設定すると、各項目には黒丸(ブレット)が表示されます。 ですが、ナビゲーションメニューには、黒丸(ブレット)は要りませんよね。 なのでcssで箇条書きのスタイルを設定し、黒丸(ブレット)を非表示にしましょう。

黒丸(ブレット)を非表示にするためには、cssのlist-style-typeプロパティを使います。 これは黒丸(ブレット)を非表示にする以外にも、白丸や黒い四角にすることなどもできます。

書式
list-style-type : プロパティ値;
プロパティ値 意味
none 黒丸(ブレット)を非表示
disc 黒丸を表示
circle 白丸を表示
square 黒い四角を表示

他にもローマ数字やアルファベットなども表示できますが、ここでは省略させてもらいます。

それではさっそくCSSファイルに記述してみましょう! 練習用ページのメニューは、id名「menu」となっていますので、下記のように記述します。

#menu ul{
  list-style-type:none;
}
設定後の表示例と余白

これでid名「menu」が付けられたulの黒丸(ブレット)が表示されなくなりました。 ですが、上記のようにulにはpadding(余白)とmargin(余白)が設定されています。

とりあえずpaddingとmarginは必要ないので、それぞれ0に設定して余白部分をなくしましょう。

#menu ul{
  list-style-type:none;
  margin:0;
  padding:0;
}
表示例

そうするとこんな感じで、黒丸(ブレット)と余白がなくなって表示されます。

これでリンクボタンを作るための準備は整いました! 次はサイズを調整したり、ボーダーなどを追加していよいよデザインを整えていきます!