ヘッダーのコーディング Header-3column編
今回はロゴとナビに加えて「電話する」ボタンがあるデザインです。コーポレートサイトっぽい！その名の通り、まずはHTMLで.header内に3つボックスを作ります。
今回はblock.html/scssをベースにします。ロゴ、ナビ、電話するをまとめて.innerで括ります。あとはタイトルを変更したら準備は完了です。早速CSSの解説に入ります。
.header
block.scssと同じ。
.header__inner
block.scssと同じ。
.header__logo
margin: 0;を加えます。スマホ版をwidth: auto;にします。
img
block.scssと同じ。
a
block.scssと同じ。
.header__nav
まずカラムの幅をclacで割り出します。計算式は100% – ロゴの幅 – ボタンの幅です。カンプから読み取りましょう。タブレット版はロゴの幅が違う点に注意です。高さは継承します。
padding-leftを使ってロゴを左寄せにします。タブレット版では幅を狭く、スマホ版ではautoにします。display: none;となっているので必要ないと思うのですが。こちらも後でSlack案件です。笑
ul
タブレット版でメニューがちょうど真ん中に来るようにjustify-content: center;を指定しておきます。あとはblock.scssと同じです。
li
メニューボタンのひとつひとつの幅を指定します。block.scssと同じですね。タブレット版でメニューボタンの幅が大きくなりすぎないよう小さめに設定しておきます。
a
block.scssと同じ。
&::after
block.scssと同じ。
&:hover
block.scssと同じ。
.header__contact
margin-left: auto;を使って全体を右に寄せます。スマホ版では非表示にします。と、ここにもwidth:auto;の指定がありますね。何故でしょうか。保留です。
.header__contact-item
ボタンとの隙間のマージンを取ります。文字を小さめに白く、太めに。line-heightを少々。(料理みたい)タブレット用にもフォントサイズを指定しておきます。
.button-tel
ここでスニペットやmixinが役立ちますね！赤背景に白文字にします。
&:hover
block.scssと同じ。
メインビジュアルのコーディング Header-3column編
block.scssと同じなため省略します。少し画面全体がギュっとした印象？これもコーディングで反映すべきか。
コメント