余白と文字色の指定
ナビゲーションバーは他の要素と同じく24pxの高さしかないので、そのままではスマートフォンなどのタッチパネル端末ではタップしづらいです。そこで、上下に12pxのpaddingを指定して高さを伸ばしてタップしやすくします。
nav ul li a { display : block; padding : 12px 0}
CSSでhtml要素のfont-sizeを16px、line-heightを1.5に指定していますので、font-sizeとline-heightを含めた高さは24pxです。上下に12pxのpaddingを指定すると合わせて24pxになり、24px単位でのレイアウトを維持できます。
上下のpaddingを12pxにする
あわせてナビゲーションの文字色を「#d8c2a4」に指定します。
nav ul li a {
display : block;
color : #d8c2a4;
padding : 12px 0}
高さと文字色の設定を反映したのが下の図です。
高さと文字色を設定したナビゲーションバー
a:hoverの指定
ナビゲーションバーの仕上げとして、ロールオーバーを設定します。タッチパネルを採用しているスマートフォンではロールオーバーは無効ですが、ノキア製の一部の端末のように、ポインターを利用する機種もあります。a:hoverを指定して、ナビゲーションの上にカーソルなどが重なったときに、各ナビゲーションパネルの色が変わるようにします。
nav ul li a:hover {
color : white;
background-color : #7d4934}
ナビゲーションバーのCSSをまとめると以下のようになります。
■サンプル2[CSS:style.css]
/* @group Nav */
nav {
margin-bottom : 24px;
background-color: #7D4934;
background: -moz-linear-gradient(top, rgba(81,24,8,0.71) 0%, rgba(91,25,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,24,8,0.71)), color-stop(100%,rgba(91,25,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* W3C */
}
nav ul { overflow : hidden}
nav ul li { width : 25%; float : left}
nav ul li a {
display : block;
color : #d8c2a4;
padding : 12px 0}
nav ul li a:hover {
color : white;
background-color : #7d4934}
/* @end */
このCSSを反映したのが下の図です。
完成したナビゲーションバー。マウスオーバーで背景色が変わる
以上でヘッダー部分が完成しました。
