「Navigationのデザイン」の編集履歴（バックアップ）一覧に戻る
まず最初に縦並び横並びの最もシンプルな形のナビゲーションを作っていきましょう。
以下のものを作っていきます。
縦並びのナビ(カーソルをのせるとトップの部分のように灰色になる)
横並びのナビ(カーソルをのせるとトップの部分のように灰色になる)
まずはulとlinkを使ってHTMLに記述していきます。
HTML
<div class="menu"> <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> </ul> </div>
という風に表示されることはまず問題ないでしょう。
さてここからCSSを記述していき、少しずつ完成に近づけていきたいと思います。
まず、左側にある黒い丸を消してしまいましょう。
CSS
.menu li {
margin: 0;
padding: 0;
list-style: none;
}
上のように記述することで各リスト同士を普通の文章のように近づけ(marginとpadding)、
list-styleでnoneの値を選択することで左にある黒丸を消します。
次に下のように記述していきます。
CSS
.menu li a {
display: block;
padding: 5px;
color: #000000;
font-size: 14px;
text-decoration: none;
}
display:block;によって「テキスト状のリンク」から「ボタン状のリンク」にします。
paddingを指定しているのもボタンの範囲を指定するためです。5pxの範囲内をボタンにするよ、という事です。
そしてtext-decolationはアンダーライン(文字の下の線)を消します。
リンク状の文字は初期設定でアンダーラインが表示されますが、ここでnoneを指定する事によってアンダーラインを消す
のです。
段々近づいてきましたね。
ここでリンクにカーソルを合わせた時に灰色にするために次の記述を書き加えます。
CSS
.menu li a:hover {
background-color: #eeeeee;
}
これは疑似要素というものを利用していて、詳しくは次回解説していこうと思っています。
hoverはaの上にカーソルがある時、どのような表示になるのか？を意味した疑似要素です。
さて、これで縦並びの基本的なサンプルは完成です！！
