忍者CODE

ログイン

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

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
ファーストビューで最も大事な、キービジュアルを画面いっぱいに出してみよう。
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は、使用しますので覚えておきましょう。

画像を真ん中におく方法は、初級六を参考にしましょう。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET