目次
ヘッダーのコーディング Header-center編
今回は時々見かけるロゴサンドイッチタイプですね！.header内に左、センター、右とブロックを作りましょう。左に2つ、右に3つメニューを振り分けたら準備完了です。
block.html/scssをベースとしています。
.header
block.scssと同じ。
.header__inner
block.scssと同じ。
.header__logo
widthを設定してtext-align: center;で真ん中寄せにします。
img
block.scssと同じ。
a
block.scssと同じ。
.hader__nav
block.scssと同じ。
ul
block.scssと同じ。
li
タブレット版の幅を小さめにしておきます。
a
block.scssと同じ。
&::after
block.scssと同じ。
&:hover
block.scssと同じ。
.header__nav-left
ここでclacの登場です。widthの計算式は、50% – ロゴの半分の幅 です。これで余った領域が2分割されます。左マージンは0に詰めます。右パディングを広めにとってロゴとの距離をとります。タブレットでは右パディングを狭めにとります。
ul
justify-content: flex-startでブロックを左に配置しています。便利ですね！
.header__nav-right
左マージンは詰めます。nav-leftとは逆に、padding-leftを設定します。タブレットでは左パディングを狭めに取ります。
ul
こちらはjustify-content: flex-end;でブロックを右に配置しています。
ヘッダーのコーディング Header-center編
block.scssと同じ。
これでやっとDAY12が終わりです。お疲れ様でした。
コメント