MENU

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

目次

ヘッダーのコーディング 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と同じなため省略します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次