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

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

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

メニューにリンクを設定

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

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

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

箇条書き（ul）を設定すると、 各項目には黒丸（ブレット）が表示されます。 ですが、ナビゲーションメニューには、黒丸（ブレット）は要りませんよね。 なのでcssで箇条書きのスタイルを設定し、黒丸（ブレット）を非表示にしましょう。
黒丸（ブレット）を非表示にするためには、 cssのlist-style-typeプロパティを使います。 これは黒丸（ブレット）を非表示にする以外にも、 白丸や黒い四角にすることなどもできます。

他にもローマ数字やアルファベットなども表示できますが、 ここでは省略させてもらいます。
それではさっそくCSSファイルに記述してみましょう！ 練習用ページのメニューは、id名「menu」となっていますので、 下記のように記述します。

そうするとこんな感じで、黒丸(ブレット)と余白がなくなって表示されます。
これでリンクボタンを作るための準備は整いました！ 次はサイズを調整したり、ボーダーなどを追加していよいよデザインを整えていきます！