装飾する（header メインメニュー部分）

header メインメニュー部分を装飾する

今回はheader メインメニュー部分（global_navigation）の装飾を行います。

<ul id="g_nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Access</a></li>
    <li><a href="#">Contact us</a></li>
</ul>

ul、li要素の装飾

ul要素にはデフォルトスタイルシートとして上下にmarginプロパティが設定されていますが、必要ないので0に指定します。

#g_nav {
    clear: both;
    margin: 0;
    padding: 0;
}

background-colorプロパティで暗めの背景色を設定します。text-align、font-size、color、paddingプロパティなどを利用して見た目の調整を行っていきます。

li要素を横並びとするために、floatプロパティでleftを設定します。これにより、左側寄せでリスト項目が並ぶことになります。また、floatプロパティを使用するときは、明示的に幅(widthプロパティ)を指定する必要があります。

li要素の幅の算出を行います。全体の横幅(ul要素の幅)が800pxです。li要素は5つあるので、800px÷5=160pxとなります。全体の横幅越えてしまうと段組が崩れますので注意しましょう。

リスト項目の先頭に●（黒丸）が表示されてしまいますので、これを消します。list-style-type: none;を設定します。

#g_nav li{
    float: left;
    width: 160px;
    list-style: none;
}

a要素の装飾

li要素に含まれるa要素の設定です。

背景色が暗いため、文字色は明るくしましょう。colorプロパティを使います。

視認性を高めるため、文字を太くします。font-wightプロティでboldを設定します。

リンクには下線が引かれることが一般的ですが、メニューで下線が出ると格好悪いので消しましょう。text-decoration:none;を設定します。

display: block;とすることで、li要素の枠内のどこが押されてもリンクでジャンプできるようにします。

#g_nav a {
    display: block;
    padding-top: 16px;
    padding-bottom: 16px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    background-color: #504038;
    color: #f0f0f0;
    text-decoration: none;
}

今のままだとメニュー項目の上にマウスカーソルを載せたとき、見た目に何の変化も生じません。「良く分からないけどクリックしたらジャンプした」。これではWebサイト訪問者に不親切です。ユーザビリティ（わかりやすさ）を高めるため対策を行いましょう。

a要素の疑似クラス hoverを設定しましょう。マウスが乗った時にスタイルが適応されます。今回は文字色と背景色を明るくします。

#g_nav a:hover {
    background-color: #745850;
    color: #f0f0f0;
}

header部分のスタイリング完了

お疲れさまでした。ここまでの様子を見てみましょう。

headerに装飾を行ったサンプル文書

→次のページ：メインビジュアルの設定

←前のページ：装飾する（header ロゴ部分）