デイトラWeb制作コース中級編DAY12 ヘッダー・メインビジュアルのコーディング⑦

.header

高さの指定がありません。あとはbase.scssと同じです。

.header__inner

今回は使いませんが回答例にはコードが書かれています。この件もSlackで質問してみます。

.header__logo

ここに高さを指定します。マージンは0。パディングを上下に20pxずつ取ります。左右のパディングはなしでカツカツに。スマホ版ではheightをautoにして上下に12pxずつパディングを取ります。

img

ここはbase.scssと同じです。

a

base.scssと同じ。

.header__nav

今回はここが要ですね。上下それぞれにボーダーをつけます。背景色を設定。全て同じ色です。overflow: auto;にしてはみ出た部分の処理をブラウザに任せます。

ul

base.scssと同じようにFlexboxをここで使ってメニューを横並びにします。

タブレット版、スマホ版それぞれの横幅から、最初に設定したパディングを引き算しておきます。.innerに同じ分の指定があるからです。

li

widthが25%となっていますが、20%(100÷5)の間違いではないのかな？Slackできいてみます。でもきちんと表示されています。右側のみボーダーを引きます。.header__navと同じ色。&:last-childで最後のボーダーのみなしに。

a

ここも重要ポイントですね。display: block;でブロックレベル要素にしてボタン化。.headerのposition: absolute;に対してrelativeを指定。パディングはショートハンドで指定。16px 16px 15px;(上、左右、下)とありますが、下だけ15pxなのは何故でしょうか。

スマホ版はパディングを狭めに、white-space: nowrap;で文字を改行させないように。

&:hover

ホバーした時にメニューのボタンが赤くなるように指定。あらかじめ定義した変数を使用。