装飾する（header 部分）

header ロゴ部分を装飾する

今回はheader部分の装飾を行います。

header部分には「logo（Webサイトのタイトル・マーク）」と「head_navigation（横並び）」の2つが含まれます。順に手を加えていきましょう。

ロゴにリンクを設定

まず、ロゴをクリックされたら、Webサイトの先頭ページ（トップページ）に戻ることができるようにしましょう。これはスタイルシートではなく、HTMLファイルにa要素を加えることで実現させます。

HTML

<h1 id="logo"><a href="/">XHTML Sample</a></h1>

これでWebサイトのどのページにいても、ロゴをクリックすることでトップページにもどれるようになりました。

ロゴをどう表現するか

さて、実際にロゴ部分に着手するわけですが、このロゴの扱いについては大きく3つの方法があります。

テキストをそのまま表示させる。
img要素により画像として表示する。
backgroudn-imageプロパティにより、背景画像として表示する。テキスト部分は表示させないよう工夫する。

一番簡単なのは、テキストをそのまま表示させることです。今回はimg要素を利用して画像を表示させます。ロゴに利用する画像はデザイン原案からスライスしたものを利用します。

head_navigation部分を装飾する

ロゴの右側に sitemap、privacy policyへのリンクを設置します。logo、head_navigation、それぞれにfloat指定することによりロゴの右側への表示を実現させます。floatを行った場合は、clearすることを忘れないようにしましょう。今回は次の要素であるdiv要素（id名 g_nav）で解除を行います。

CSS

#logo {
    float: left;
    width: 400px;
}
#h_nav {
    float: right;
    width: 220px;
}
#g_nav {
    clear: both;
}

今回、リストの表示にはimg要素を利用します。また各項目を横並びにしたいため、スタイルシートにて display: inline を指定しています。

HTML

<h1 id="logo"><a href="/"><img src="./img/logo.jpg" alt="XHTML Sample" width="278" height="38"></a></h1>

<ul id="h_nav">
    <li><a href="#"><img src="./img/h_nav01.jpg" alt="SITEMAP" width="59" height="9" /></a></li>
    <li><a href="#"><img src="./img/h_nav02.jpg" alt="PRIVACY POLICY" width="101" height="9" /></a></li>
</ul>

<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>

CSS

#logo {
    float: left;
    width: 400px;
}
#h_nav {
    float: right;
    width: 220px;
}
#h_nav li{
    display: inline;
    list-style: none;
}
#g_nav {
    clear: both;
}

次回はグローバルナビゲーション部分の装飾を行います。

→次のページ：装飾する（header メニュー部分）

←前のページ：装飾する（body全体部分）