今回はとても単純でシンプルな形の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の上にカーソルがある時、どのような表示になるのか？を意味した疑似要素です。
さて、これで縦並びの基本的なサンプルは完成です！！
横並びのナビゲーションを横並びにする方法はふたつあるので両方、解説していこうと思います。
1、inline-blockを使用する方法
こちらの方法の方がマイナーというかあまり知られていないみたいなのですが、上で作った縦並びのナビゲーションのCSSに
.menu li {
display: inline-block;
}
と指定すると横並びになります。
このinline-blockはとても便利で
「インライン要素のように横並びにしてブロック要素のように縦横を調整、指定できる」
という優れものです。
2、float: left;を使用する方法
こちらの方法を使う人の方が多いかな、と感じますが、こちらの方法をとる場合は
後にfloat:left;が影響しないようにclearfixを施さなければなりません。
clearfixについてはこちらの記事をご覧ください。
http://www63.atwiki.jp/nicepaper/pages/32.html
CSS
.menu ul:after {
content"";
display: block;
clear: both;
}
.menu li {
float: left;
width: auto;
}
上のulに対する指定がclearfix、下のliに対する指定が横に並べるという行程です。
clearfix自体はul全体い対するもので、横に並べるのは個々のlistという事です。
CSS
.menu li {
margin: 0;
padding: 0;
list-style: none;
}
.menu li a {
display: block;
padding: 5px;
color: #000000;
font-size: 14px;
text-decoration: none;
}
CSS
.menu li {
margin: 0;
padding: 0;
list-style: none;
}
.menu li a {
display: block;
padding: 5px;
color: #000000;
font-size: 14px;
text-decoration: none;
display: inline-block;
}
以上が最もシンプルな形のナビゲーション作りでした！！
