実践コーディングスキル - 第8章 Lesson5

第4回:ロゴとナビゲーションをマークアップしよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ウェブマガジンのヘッダーを作成する方法を解説しています。
ここでは、ヘッダーのロゴとナビゲーションのHTMLを書いていきます。



この動画で学べること

・ロゴのマークアップ方法

・ナビゲーションのマークアップ方法



ロゴのマークアップ方法

今回は、ヘッダーのロゴとナビゲーションをマークアップしていきましょう。
まずは前回作ったheaderの緑の背景色を白色に変更し、#header_innerの背景色は消しておきます。



header{
width: 100%;
height:77px;
background-color: #fff;
border-bottom: 3px solid #f6ac4d;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
padding-top: 25px;
}


header #header_inner {
width: 960px;
height: 52px;
margin: 0 auto;
}



では保存してブラウザで見てみましょう。
ヘッダーの背景が白くなれば大丈夫です。



次に、ロゴとナビゲーションのマークアップに進みましょう。
ロゴはサイトのタイトルとなる一番重要な部分なので、<h1>で<img>タグを囲みます。
そして、<img>タグにsrc属性とalt属性を追加して、画像を表示させるのに必要な情報を記述しましょう。



<h1>
<a href="index.html"><img src="images/logo.png" alt="Design Leaker" height="52" width="218"></a>
</h1>




ナビゲーションのマークアップ方法

では次に、ナビゲーション部分もマークアップしていきましょう。
<nav>タグの中に<ul>、<li>タグを書いていき、クリックをした時に別のページに飛ばすことができるように<a>タグを入れておきます。
一つリストが書けたら、複製して文字を書き換えていきましょう。
また、サイト全体の文字の種類を設定するため、<body>タグに次のようなスタイルをかけておきます。



<nav>
<ul>
<li><a href="#">ウェブデザイン</a></li>
<li><a href="#">WORDPRESS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">ウェブマーケティング</a></li>
</ul>
</nav>



body {
font-family: "メイリオ", Meiryo;
}