CSSで要素を画面いっぱいに広げる方法
Webサイト制作において、要素を画面いっぱいに広げたい場面は多くあります。例えば、背景画像を画面いっぱいに表示したり、ヘッダーやフッターを画面幅に合わせて広げたりする場合などです。
このような場合、CSSを使って簡単に実現することができます。この記事では、要素を画面いっぱいに広げるためのさまざまな方法と、それぞれのメリット・デメリットについて解説していきます。
vw, vhを使った方法
vw, vhはそれぞれビューポートの幅と高さを表す単位です。1vwはビューポートの幅の1%、1vhはビューポートの高さの1%を表します。これらの単位を使うことで、要素の幅や高さをビューポートのサイズに合わせて動的に変更することができます。
要素を画面いっぱいに広げる場合は、width: 100vw; height: 100vh; と指定します。
<style>
.full-screen {
width: 100vw;
height: 100vh;
}
</style>
<div class="full-screen">
<p>画面いっぱいに広がります</p>
</div>
メリット
* コードがシンプルでわかりやすい * ビューポートのサイズに合わせて動的にサイズが変更されるデメリット
* スクロールバーが表示される場合がある親要素からはみ出して表示させる方法
子要素を親要素からはみ出して画面いっぱいに表示させる方法があります。この方法は、固定幅のヘッダーやフッターがある場合などに便利です。
<style>
.parent {
width: 500px;
margin: 0 auto;
}
.full-screen {
width: 100vw;
margin-left: calc(50% - 50vw);
}
</style>
<div class="parent">
<div class="full-screen">
<p>親要素からはみ出して画面いっぱいに広がります</p>
</div>
</div>
メリット
* 親要素の幅に関係なく画面いっぱいに表示できるデメリット
* 親要素の位置によっては表示が崩れる場合があるそれぞれの方法の使い分け
上記で紹介した2つの方法は、それぞれメリット・デメリットがあります。どちらの方法を使うかは、状況に応じて適切な方を選択する必要があります。
| 方法 | メリット | デメリット | 適した場面 |
|---|---|---|---|
| vw, vhを使う方法 | コードがシンプル ビューポートに合わせて動的にサイズ変更 |
スクロールバーが表示される場合がある | シンプルなレイアウトの場合 スクロールバーが表示されても問題ない場合 |
| 親要素からはみ出して表示させる方法 | 親要素の幅に関係なく画面いっぱいに表示できる | 親要素の位置によっては表示が崩れる場合がある | 固定幅のヘッダーやフッターがある場合 親要素の位置が固定されている場合 |
参考資料
よくある質問
Q1: 画面いっぱいに広げた要素がスクロールしてしまう
A1: HTMLとbodyに以下のCSSを追加してください。
html, body {
height: 100%;
overflow: hidden;
}
Q2: 親要素からはみ出して表示させた要素が、左側にはみ出してしまい画面いっぱいに広がらない
A2: margin-left だけでなく margin-right にも calc(50% - 50vw) を指定してください。
.full-screen {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
Q3: モバイル環境で表示が崩れてしまう
A3: モバイル環境では、ビューポートのサイズが異なるため、表示が崩れる場合があります。メディアクエリを使って、モバイル環境専用のCSSを記述することで、表示を調整することができます。
@media screen and (max-width: 768px) {
.full-screen {
/* モバイル環境用のスタイル */
}
}
【結論】親要素からはみ出して表示させたい子要素にCSSで、width:100vwと左右どちらかもしくは両方のmarginにcacl(50% - 50vw)指定する。
その他の参考記事:css li 横並び 均等