ログイン
問題13

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

キービジュアルとは、ホームページのファーストビューなどでよく使われるイメージ画像のことです。メインビジュアルとも呼ばれます。 ホームページ内でもユーザーの印象を変える重要な部分になるので画面いっぱいに表示する方法は必須で覚えておきましょう。

アイコン画像

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

タイトル通り、キービジュアルを画面いっぱいに表示してみましょう。
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」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる