問題
13画面いっぱいにキービジュアルを表示しよう
キービジュアルとは、ホームページのファーストビューなどでよく使われるイメージ画像のことです。メインビジュアルとも呼ばれます。 ホームページ内でもユーザーの印象を変える重要な部分になるので画面いっぱいに表示する方法は必須で覚えておきましょう。
HTML_CSSの問題に挑戦しよう！
問題
「画面いっぱいにキービジュアルを表示しよう」
タイトル通り、キービジュアルを画面いっぱいに表示してみましょう。
HTMLファイルに記述してください。
テキストの部分が画面上に見えなくなるところまで、画面いっぱいにキービジュアルを表示してみてください。
スクロールしたらテキストが見えるような状態です。
見本を参考にしましょう。
あらかじめエディタに書くコード
<div class="key-visual" style="background: #000;">
<img src="https://ninjacode.work/assets/img/kv.png">
</div>
<div class="text-area">
<p>テキストテキストテキスト</p>
<p>テキストテキストテキスト</p>
<p>テキストテキストテキスト</p>
<p>テキストテキストテキスト</p>
<p>テキストテキストテキスト</p>
</div>
¥HTML¥
期待する画面
解答と解説
解説
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
キービジュアルを画面いっぱいに表示したい場合は
画像エリアの要素にheight: 100vh;を付与してあげます。
vh→高さが画面いっぱい
vw→幅が画面いっぱい
vh,vwは、頻繁に使用しますので必ず覚えておきましょう。
画像を真ん中に配置する方法は、初級六を参考にしましょう。
補足
今回登場したvhは、viewport heightの略で他にもvw(viewport width)やvmin(viewport minimum)、vmax(viewport max)などがあります。
画像などのサイズは「%」でも指定することができますが、「%」の場合親要素のサイズに影響され、必ずしもビューポート幅が基準とはなりません。
vwやvhは使用頻度も高いので、「%」との違いをしっかり理解しておきましょう。
