はじめに
本記事では前回の記事で作成したhaderのHTMLに対してCSSのコーディング解説をしていきます。
ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<header class = "header"> <div class="header-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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
body,h1, li, ul{ margin: 0; padding: 0; } .header{ width: 100%; height: 80px; background-color: #000; } .header-inner{ display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; } h1{ color: #fff; line-height: 80px; } .header-nav-list{ display: flex; line-height: 80px; } .header-nav-item{ list-style: none; } .header-nav-item:not(:first-child){ margin-left: 30px; } .header-nav-item-link{ text-decoration: none; color: #fff; } |
解説
body, h1,li,ulの対して余白がデフォルトで反映されてしまっているためmargin, paddingを0にし無駄な余白をなくしています。
headerクラスに対しては今回幅100%, 高さ80pxで背景の色を#000に設定しています。
h1タグとnavタグを横に配置するためにdisplay:flexを用い、それぞれ両端に配置するために
justify-contentの値をspace-betweenに設定しています。
h1,liをそれぞれ上下中央に配置するためにline-heightの値をheaderの高さと同じ80pxに設定しています。
aタグに対しては下線が残ってしまっているのでtext-decorationをnoneにしています。
実行結果
