お久しぶりです。引っ越していてしばらくネットから離れていました。新しい家にまだ回線を引いてないのでWi-Fiが使えません。ギガを気にしながらのテザリングだと、自然とネット時間が減って勉強に集中できるのでこれもアリかもしれませんね。
今回の課題はヘッダーから早々に苦しんでいますがなんとか1周目が終わりました。これからバリエーションのひとつひとつを1記事ずつUP予定なのでお付き合いください。
一度通しでコードリーディング(iPad＋GoCoEdit)して分からないところを洗い出したのですが、アルパカさんの記事にほとんど解説がありました。大変ありがたいです。
それではまずノーマルバージョン(回答例でいうbase.html)の解説をどうぞ！HTMLについては別段書くことが見当たらなかったため、CSSから解説していきます。ルー語になって鬱陶しいですがご了承ください。笑
ヘッダーのコーディング
.header
ヘッダーは上部に固定ということで、position: fixedの出番です。positionが出てくる時はtopやleft等がセットで出てくるのを覚えておきましょう。今回はピッタリ上にくっつけるため値は両方0に。
ここで早速最初に定義しておいたレイヤーの出番です。書き方はこんな感じ。
z-index: map-get($layer, "header");
横幅、背景色、高さも設定しておきます。
スマホ版の高さもここで設定しておきます。最初に定義しておいた変数を使います。
.header__inner
子要素であるロゴとメニューのブロックを横並びにしたいため、Flexboxにします。align-items: center;で縦方向真ん中に揃えます。上下にパディングをつけてきます。スマホ版は狭めに。
.header__logo
margin: 0;にし、余白をなくします。line-heightをつけることによって上下に行間をつけます。
img
カンプから読み取ったロゴの幅を設定します。vertical-align: top;を指定して隙間をなくすのがポイントです。タブレット、スマホ版は小さめに。
なぜ画像にvartical-alignが必要かは以下のページが参考になりました。
リンク
a
下線をなしにします。transition⇦ここでこのプロパティが出てくる意味がイマイチ分からないためSlackで質問することにします。
.header__nav
margin-left:auto;で右寄せにします。スマホ版は非表示に。
ul
リストの先頭のドットを外します。パディングとマージンを0にしカツカツにします。子要素を横並びにしたいため、Flexboxを使います。縦方向中央揃えに。
li
文字と文字の間隔を空けるため、margin-rightを用います。擬似要素を使って最後の右線のみ消します。
a
下線をなくし、文字色を設定します。ボタン的に使うためにブロックレベル要素にします。ここら辺は大概セットですね。擬似要素を使い下線を作るためpositionをrelativeにしておきます。
::&after
今回の要の部分ですね。HTMLでis-activeクラスをつけたメニューに下線をつけます。擬似要素を使って線を引く方法についてはこのページが詳しかったです。
まずcontentは空に、positionをabsoluteにします。left,bottomで下線の位置を調節します。widthが線の幅、heightが線の太さ、backgroundが線の色になります。ここでopacityを0にしておくことで、is-activeクラス以外のメニューを下線なしにします。ここにもtransitionプロパティが出てきますね。一旦保留。
positionとabsoluteに関してはこちらの記事がわかりやすかったです。
最後に、is-activeのみopacity(透過度)を1にすることで下線が表示されます。
メインビジュアルのコーディング
※私はSassで_nav-header.scssと_mainvisual.scssなど分けていますが、今回のデイトラの課題ではややこしくなるため真似するのはおすすめできません。
.mainvisual
高さはカンプから読み取った高さにします。幅は100％にしておきます。
背景は無色にし、背景画像を読み込みます。繰り返しなしでセンターに。coverでちょうど良く覆うサイズに。画像に文字を乗せたいため、positionをrelativeにしておきます。overflow:hidden;ではみ出た部分は非表示にします。タブレット、スマホでは縦幅短めに。
文字を乗せる下準備として、text-align: center;と、line-height: 1.2を指定しておきます。
ここからは大概セットなので、スニペットに登録しておくと便利です。スニペットは以下のリンク先が実例豊富です。ありがたや。
これで画像が上下左右真ん中に表示されます。
最初に定義しておいたタブレット版、スマホ版の余白をここで使います。
.mainvisual__title
キャッチコピーはカンプから読み取ったフォントサイズ、太さを記述します。タブレット、スマホでは小さめに設定。
.mainvisual__lead
中位のフォントサイズに。フォントウェイトを太めに。上マージンを少し取ります。タブレット、スマホでは小さめサイズに。
.mainvisual__button
上マージンをとって文字との距離を空けます。タブレット、スマホでは若干狭めに。
.button-mainvisual
ボタンも大抵のプロパティがセットで出てくるため、スニペットに登録しておくと便利です。
プロパティの順番がおかしくなりますが、ボタン本体と文字を分けて書きます。イラレでいうと、図形を描いてその上にテキストボックスで文字を乗せるイメージですね。
まずはdisplay: inline-block;でインラインブロック化します。ボタン本体の横幅はカンプから読み取った数値を記述します。これ以上は広がらないようにmax-widh100%;も合わせて記述します。縦幅は文字の大きさとパディングで決まります。
border-radiusで角丸に仕上げます。ボックスシャドウはカンプから読み取った数値を。背景色はメインカラーに。これでボタンの本体の完成です。
次に文字周りを指定します。サイズ、文字色、太さをカンプから読み取って入力します。装飾を取り除きます。文字を中央寄せに。
最後に、ホバーするとカーソルが指マークに変化するようにします。ここで出てくるtransitionも保留。
以上がbaseバージョンの解説でした。
コメント