〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

CSS 100vhと100%のはみ出る問題の解決策を徹底解説

CSS 100vhと100%のはみ出る問題の解決策を徹底解説

本記事は、「CSSでコーディングしている時に100vhがはみ出る」と思いつつ

UIHACK
編集長
UIHACK 編集長

・100vhがコンテンツからはみ出るのを解消する方法
・100vhがデスクトップブラウザ
・レスポンシブデザインでの100vhの動作の違い

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向け現役エンジニアが解説します。

この記事では、「前半」では「CSS 100vhとは?基本的な説明と特性の解説」「後半」では「スクロールバーを考慮してUIを作成する方法」スマートフォンでの実装方法の違い」をサンプルコードを交えて解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください!

CSS 100vhとは?基本的な説明と特性の解説

CSS 100vhは、Webデザインで画面の高さを100%にするための特別な書き方です。“vh”“viewport height”の略で、スマホやPCの画面の高さに合わせて要素の高さを調整する方法です。

まずは、以下にサンプルコードをご覧下さい。

100vhの完成デモ

HTML

<div class="full-screen-section">
    この要素は画面全体の高さに合わせて表示されます。
</div>
<div>
    これはCSS 100vhを使っている要素外のコンテンツです。
</div>
HTML
プチ解説

.full-screen-sectionクラスの要素に対して、height: 100vhを指定しています。これにより、この要素は画面の高さいっぱいに広がるようになります。

CSS

.full-screen-section {
  height: 100vh;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #333;
}
CSS
プチ解説

・このサンプルコードでは、<div class=”full-screen-section”>内に”この要素は画面全体の高さに合わせて表示されます。”というテキストが表示されます。

・このサンプルコードを実際にブラウザで表示してみると、.full-screen-sectionクラスの要素が画面全体の高さに合わせて表示されることが確認できると思います。

このように、CSS 100vhを使うことで、特定の要素を画面の高さいっぱいに表示することができます。ただし、スマートフォンのアドレスバーやデスクトップブラウザのスクロールバーの影響に注意して、適切な対応をすることが重要です。

一方で、CSS 100vhには特性による課題も存在します。特にスマートフォンのアドレスバーやデスクトップブラウザのスクロールバーなどのUI要素が影響を与えることがあります。アドレスバーの高さやスクロールバーの存在によって、コンテンツが画面からはみ出る問題が発生することがあります。

スマートフォンなどのUI要素が影響を与える問題に対処するためには、適切なCSSプロパティ調整する必要があります。

例えば、Webkit-fill-availableを使用してスマートフォンのアドレスバーを考慮した高さを指定したり、min-height: 100vhを使用してスクロールバーを考慮した高さを指定したりする方法があります。

100vhを使ったレスポンシブデザインにおける注意点と解決策

CSSの100vhは、Webデザインで画面の高さを100%指定する方法です。これを使うと、スマホやPCの画面の高さに合わせて要素を表示できますが、使う際に気をつけるべきポイントがあります。特に、スマートフォンのアドレスバーやデスクトップブラウザのスクロールバーによって、画面からはみ出すことがあるんです。

完成デモ

HTML

<div class="full-screen-section">
  この要素は画面全体の高さに合わせて表示されます。<br>
  スマートフォンのアドレスバーによる影響を考慮しています。
</div>
<div class="normal-section">
  これは100pxの高さの通常の要素です。<br>
  他のコンテンツと共存することができます。
</div>
HTML
プチ解説

このHTMLコードでは、CSS 100vhの注意点を考慮して、Webkit-fill-availablemin-heightを活用しています。また、メディアクエリを使ってスマートフォン向けに適切なスタイルを設定しています。

CSS

.full-screen-section {
  height: -webkit-fill-available;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #333;
}

.normal-section {
  height: 100px;
  background-color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 18px;
  color: #333;
}

@media (max-width: 767px) {
  .full-screen-section {
    height: auto;
    padding-top: 80px; /* アドレスバー分のスペースを確保 */
  }
}
CSS
プチ解説

上記のコードをローカルファイルにコピーしてブラウザで表示してみてください。

画面サイズを変えながら試してみると、100vhWebkit-fill-availableの違いがわかるかもしれません。また、スマートフォンで表示した際にアドレスバーが要素の表示に影響を与えないように調整されていることにも気づくでしょう。

min-height 100vhを活用してヘッダーを完全表示させる方法

ヘッダーを画面全体に広げて表示するためのCSSのテクニックを紹介します。これにより、スマートフォンのアドレスバーの影響を考慮して、ヘッダーが画面から切れずに完全に表示されるようになります。

完成デモ

HTML

<header>
  ヘッダー部分
</header>
<div class="content">
  <p>ここにコンテンツが入ります。スクロールしてみてください。</p>
  <!-- 長いコンテンツを追加して、スクロールバーを表示させます -->
  <p>この部分は長いコンテンツです。</p>
  <p>この部分は長いコンテンツです。</p>
  <p>この部分は長いコンテンツです。</p>
  <p>この部分は長いコンテンツです。</p>
  <p>この部分は長いコンテンツです。</p>
</div>
HTML

CSS

header {
    min-height: 100vh;
    background-color: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }

.content {
  padding: 20px;
  font-size: 18px;
  line-height: 1.6;
}
CSS
プチ解説

min-height: 100vh; これは、ヘッダーの最低の高さを画面全体の高さに合わせるという意味です。つまり、ヘッダーが画面の高さいっぱいに広がることを意味します。

display: flex;フレックスボックスと呼ばれるレイアウト方法を使って、ヘッダーの内容を中央に配置しています。

min-height 100vhを活用してヘッダーを完全表示させる方のまとめ

min-height 100vhを使うことで、ヘッダーを画面の高さいっぱいに広げて表示することができます。これによって、スマートフォンのアドレスバーの影響を考慮したデザインを実現し、ユーザーエクスペリエンスを向上させることができます。HTMLとCSSを使って、ウェブページを見た目どおりにデザインすることができるよ!

Webkit-fill-availableの有効活用と問題点の解決

Webkit-fill-availableは、CSSの一つの機能で、スマートフォンのアドレスバーによる影響を考慮して要素の高さを自動的に調整することができます。これを使うことで、スマートフォンのアドレスバーが表示された時でも要素がちゃんと見えるようになります。特に、iPhoneやSafariブラウザでは有効な機能ですが、他のブラウザでも一部対応しています。

完成デモ

HTML

<header>
  Webkit-fill-availableの有効活用と問題点の解決
</header>
<div class="content">
  <p>Webkit-fill-availableは、スマートフォンのアドレスバーの影響を考慮して要素の高さを自動的に調整する便利な機能です。</p>
  <p>スマートフォンのアドレスバーによるはみ出しを回避し、要素を画面の高さに合わせて表示できるようになります。</p>
  <p>しかし、Webkit-fill-availableは一部のブラウザでしか対応していないため、他のブラウザでは正しく動作しないことがあります。</p>
  <p>そのため、代替手法を検討したり、他のブラウザでの対応策を考える必要があります。</p>
  <p>Webkit-fill-availableを使う際には、注意して互換性を確認し、ユーザーエクスペリエンスを向上させるための工夫が必要です。</p>
</div>
HTML

CSS

header {
  height: -webkit-fill-available;
  background-color: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.content {
  padding: 20px;
  font-size: 18px;
  line-height: 1.6;
}

/* Webkit-fill-available未対応のブラウザ向けのスタイル */
@media (max-width: 767px) {
  header {
    height: 100vh;
  }
}
CSS
プチ解説

header { height: 100vh; }: Webkit-fill-availableが対応していないブラウザ向けに、ヘッダーの高さを100vh(画面全体の高さ)に指定しています。

Webkit-fill-availableの有効活用と問題点の解決のまとめ

Webkit-fill-availableはスマートフォンのアドレスバーの影響を考慮して要素の高さを調整する便利な機能ですが、全てのブラウザで対応しているわけではないため注意が必要です。Webkit-fill-availableを使う場合には、互換性を確認し、他のブラウザでの対応策を考えることで、問題を解決してユーザーエクスペリエンスを向上させることが重要です。

Height 100vh vs 100% – 違いと使い分けのポイント

ウェブデザインでは、要素の高さを指定する際にheight: 100vhheight: 100%という2つの方法がよく使われます。これらは似ているように見えますが、実はちょっと違います。ここでは、それらの違いを理解し、どの場面でどちらを使うべきかを考えてみましょう。

完成デモ

プチ解説

このHTMLとCSSコードは、「Height 100vh vs 100% – 違いと使い分けのポイント」というタイトルのページを表します。ページには2つのボックス(box1とbox2)があります。

HTML

<div class="container">
  <div class="box1">
    <p>height: 100vh</p>
    <p>画面全体に要素を表示</p>
  </div>
</div>

<div class="container">
  <div class="box2">
    <p>height: 100%</p>
    <p>親要素の高さに合わせて要素を表示</p>
  </div>
</div>  
HTML

CSS

.container {
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box1 {
  width: 300px;
  height: 100%;
  background-color: #ffcc99;
  border: 2px solid #333;
  text-align: center;
  padding: 20px;
}

.box2 {
  width: 100%;
  height: 100%;
  background-color: #99ccff;
  border: 2px solid #333;
  text-align: center;
  padding: 20px;
}
CSS
プチ解説

height: 100vhのボックス(box1)は、画面全体に広がるように指定されています。スマートフォンのアドレスバーの影響を受けずに要素を画面全体に表示します。

height: 100%のボックス(box2)は、親要素(container)に合わせて伸縮します。親要素がheight: 100vhで指定されているため、box2も画面全体に広がります。

これらのコードをブラウザで表示すると、height: 100vhとheight: 100%の違いが分かると思います。

height: 100vhボックスは常に画面全体を占め、スクロールバーがあっても影響を受けません。

一方、height: 100%ボックスは親要素に合わせて伸縮し、親要素がheight: 100vhの場合は画面全体に広がります。

height: 100vhとheight: 100%の使い分けのポイントを表にまとめて見ました

対象要素の配置スクロールバーの有無親要素の高さ
height: 100vh画面全体を対象とし、要素を画面いっぱいに表示スクロールバーの有無にかかわらず画面全体の高さに対して要素を表示親要素の高さに依存しない(親要素の高さに影響されない)
height: 100%親要素に対してのみ適用される親要素の高さに合わせて要素が伸縮親要素が具体的な高さを持っている必要がある
height: 100vhとheight: 100%の使い分けのポイントを表にまとめて見ました
プチ解説

この表を参考にして、適切なレイアウトを実現するために、height: 100vhとheight: 100%を使い分けることが重要です。ウェブデザインの際には、要件に合わせて適切なプロパティを選択しましょう。

あなたにオススメの本

【4年連続、売上第1位!】
【全国の書店員がオススメする本(2019年度 CPU大賞)第1位!】

読者の圧倒的な支持!シリーズ35万部突破の大ヒット!
¥2,486 (2023/08/01 15:07時点 | Amazon調べ)

CSS 100vhと100%のはみ出る問題の解決策を徹底解説の結論とまとめ

UIHACK
編集長
UIHACK 編集長

今回は、100vhと100%のはみ出る問題についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

本記事で学んだ事
  • CSS 100vhとは?基本的な説明と特性の解説
  • 100vhを使ったレスポンシブデザインにおける注意点と解決策
  • min-height 100vhを活用してヘッダーを完全表示させる方法
  • Webkit-fill-availableの有効活用と問題点の解決
  • Height 100vh vs 100% – 違いと使い分けのポイント

もう一度、最初から「CSS 100vhとは?基本的な説明と特性の解説」を読む↑

HTML・CSSでログイン画面を実装したい方は、ぜひ以下の記事もご覧ください。

モチベが上がらなくて!映画でも観て気分転換したい方は、ぜひ以下の記事もご覧ください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です