ログイン

問題13 画面いっぱいにキービジュアル表示しよう

HTML_CSSの問題

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¥
            

期待する画面

コードのアイコン

解答ソースコード

              <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¥
            
              .key-visual {
    width: 100%;
    height: 100vh;
    position: relative;
}
.key-visual >img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
¥CSS¥
            
答えのアイコン

解説

キービジュアルを画面いっぱいに表示したい場合は
画像エリアの要素にheight: 100vh;を付与してあげます。

vh→高さが画面いっぱい
vw→幅が画面いっぱい
vh,vwは、頻繁に使用しますので必ず覚えておきましょう。

画像を真ん中に配置する方法は、初級六を参考にしましょう。
ログインして解答を見る
今回登場したvhは、viewport heightの略で他にもvw(viewport width)やvmin(viewport minimum)、vmax(viewport max)などがあります。
画像などのサイズは「%」でも指定することができますが、「%」の場合親要素のサイズに影響され、必ずしもビューポート幅が基準とはなりません。
vwやvhは使用頻度も高いので、「%」との違いをしっかり理解しておきましょう。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!