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

今回はヒーローイメージバージョンを作っていきます。

ヒーローイメージとは

ヒーローイメージ（hero image）あるいはヒーロー画像とは、Webサイトのファーストビューにて、画面を全面に覆い尽くすように配置した大きなサイズの写真やグラフィック要素のこと、あるいはそのレイアウトのこと。 同様に配置した動画を「ヒーロームービー」、それらの総称を「ヒーローヘッダー」と呼ぶこともある。

ヒーローイメージ（ヒーロー画像）とは 意味/解説 – シマウマ用語集より引用

ここで私が予測できたことは、多分vh,vwが出てくるだろうな、ということくらいです。vh,vwについては下記リンクをご覧ください。

基本的にはbase.scssと同じです。最後に以下のコードを追加するだけで完了します。

コードは短いので書いてしまいますね。

.mainvisual {
height: calc(100vh - #{$header-height-pc});
@include mq('tab') {
height: calc(100vh - #{$header-height-pc});
}
@include mq('sp') {
height: calc(100vh - #{$header-height-sp});
}
}

clacを使って背景画像の幅を割り出しています。100vhとだけ書くとヘッダーの高さ分が下に隠れてしまいます。それを解消するためにヘッダーの高さを予め引いておきます。

こういう場合変数は#{}で囲むんですね！勉強になりました。