webサイトのコーディングにおいて、KV（キービジュアル）の高さを画面いっぱいにするためにCSSで100vhをあてる人は多いと思います。私も実際、KVに100vhを適用することは多いです。ただ、100vhを使う上で注意しなければならないことがあります。それは、「デバイスによる表示崩れ」です。
たとえば、このようなKVのサイトを作成したと想定します。ヘッダー、KVのタイトルエリア、スクロールボタンがあり、高さが100vhと設定しています。また、検証ツールを用いて、ユーザー数が最も多い1920×1080で表示しています。コードは以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="header__inner">
<div class="header__logo">LOGO</div>
<nav class="header__nav">
<ul class="header__list">
<li class="header__item">ホーム</li>
<li class="header__item">お知らせ</li>
<li class="header__item">ブログ</li>
<li class="header__item">お問い合わせ</li>
</ul>
</nav>
</div>
</div>
<div class="kv">
<div class="kv__title-wrapper">
<h1 class="kv__title">KVのタイトルが入ります。</h1>
<div class="kv__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
<div class="kv__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
</div>
<div class="kv__scroll">スクロールしてください→→→→→</div>
</div>
<div class="scroll"></div>
</body>
</html>* {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 100px;
background-color: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.header__inner {
height: 100%;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.header__list {
display: flex;
column-gap: 30px;
}
.header__item {
list-style-type: none;
}
.kv {
height: 100vh;
/* min-height: 1080px; */
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: #d7d7d7;
}
.kv__title-wrapper {
width: 50%;
text-align: center;
}
.kv__title {
font-size: 48px;
margin-bottom: 30px;
}
.kv__text {
font-size: 18px;
margin-top: 20px;
}
.kv__scroll {
position: absolute;
bottom: 0;
writing-mode: vertical-lr;
letter-spacing: 0.08em;
}1920×1080では一見何の問題もないように思えますが、検証ツールで1280×720に設定してみると、見え方は以下のようになります。
お分かりいただけましたでしょうか？明らかに表示崩れしてしまっていますね。100vhを適用した要素の高さがデバイスの高さと同じになるため、このようにデバイスの高さが小さいケースでは表示崩れを起こしてしまうケースがよくあります。
このような表示崩れの対処法として、要素の高さの最低値を決めるmin-heightを設定する必要があります。今回は、.kvに対してmin-height: 1080pxを追加してみました。すると、以下のような見え方になります。
.kvの最低の高さを1080pxとしたため、デバイスの高さ720pxを超えてスクロールします。そのため、画面の高さいっぱいのキービジュアルというような見た目にはなりませんが、表示崩れを防ぐことができました。
今回はmin-heightを設定しましたが、2560×1440などの大きなデバイスで余白が大きくなりすぎてデザインがおかしくなるケースもありますので、そのような場合はmax-heightも併用しましょう。大きなデバイスをどこまで対応するかは個人の判断によりますが、2500pxぐらいまでは見た方がいいかなと思います。
以上が、100vhを使う上での注意点でした。100vhを使っているサイトで、あるサイズのデバイスで見ると表示崩れしているケースが結構多いです！100vhを使うときは検証ツールで様々なサイズで確認し、min-heightやmax-heightが必要かどうか考慮するようにしましょう。