HTML_CSS
Googleでログイン
問題13：画面いっぱいにキービジュアルを表示しよう
タイトル通り、キービジュアルを画面いっぱいに表示してみましょう。
HTMLファイルに記述してください。
テキストの部分が画面上に見えなくなるところまで、画面いっぱいにキービジュアルを表示してみてください。
スクロールしたらテキストが見えるような状態です。
見本を参考にしましょう。
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¥
補足
今回登場したvhは、viewport heightの略で他にもvw(viewport width)やvmin(viewport minimum)、vmax(viewport max)などがあります。
画像などのサイズは「%」でも指定することができますが、「%」の場合親要素のサイズに影響され、必ずしもビューポート幅が基準とはなりません。
vwやvhは使用頻度も高いので、「%」との違いをしっかり理解しておきましょう。
画像などのサイズは「%」でも指定することができますが、「%」の場合親要素のサイズに影響され、必ずしもビューポート幅が基準とはなりません。
vwやvhは使用頻度も高いので、「%」との違いをしっかり理解しておきましょう。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
画像エリアの要素にheight: 100vh;を付与してあげます。
vh→高さが画面いっぱい
vw→幅が画面いっぱい
vh,vwは、頻繁に使用しますので必ず覚えておきましょう。
画像を真ん中に配置する方法は、初級六を参考にしましょう。