目次
ヘッダーのコーディング Header-block編
base.htmlからメニューのis-activeを取り除き、タイトルを変えたただけでblock.htmlと同じものが出来上がるはずです。
.header__inner
padding-top,padding-bottomを消します。
.header__logo
heightとpadding,text-alignを消します。
img
base.scssと同じ。
a
base.scssと同じ。
header__nav
高さを親要素から継承します。
ul
base.scssと同じ。
li
カンプから読み取ったメニューボタンの幅を指定。高さを継承します。今回&:last-childは使いません。
a
親要素(.header)のabsoluteに対してrelativeを指定。パディングを上下36px(⇦この数値はヘッダーの高さからメニューのフォントサイズ＋line-heightを引いた数÷2、という解釈で合っているでしょうか？(Slackで質問してみます)とって左右は0で詰めます。text-align: center;で文字を真ん中に。高さは継承。
&::after
&::afterは&::beforeにも置き換えられます。上線の場合イメージ的にこっちの方がわかりやすいかもしれません。bottom,leftの代わりにtop,leftで下線を指定します。
&:hover
&.is-activeの代わりに&:hoverを入れます。
メインビジュアルのコーディング Header-block編
base.html/scssと同じなため省略します。
コメント