はじめに
本記事ではWEBサイトのheader部分のHTMLのコーディング解説をしていきます。
ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<header class = "header"> <div class="header-inner inner"> <h1>Company</h1> <nav class="header-nav"> <ul class="header-nav-list"> <li class = "header-nav-item"><a class="header-nav-item-link" href="#">メニューA</a></li> <li class = "header-nav-item"><a class="header-nav-item-link" href="#">メニューB</a></li> <li class = "header-nav-item"><a class="header-nav-item-link" href="#">メニューC</a></li> <li class = "header-nav-item"><a class="header-nav-item-link" href="#">メニューD</a></li> </ul> </nav> </div> </header> |
解説
本記事では会社名の部分(Company)を見出しタグ(<h1>)を用いていますが会社のロゴ画像などがある場合はimgタグを用いる場合もあります。
メニュー部分についてはリストタグがよく使われるためリストタグを用いてコーディングしています。
実行結果
