【CSS】高さ・横幅のサイズを画面全体にする簡単な方法|vw・vh

今回はCSSで、要素の高さ・横幅のサイズを画面全体にする簡単な方法となります。

【CSS】高さ・横幅のサイズを画面全体にする方法

以下のCSSは、classにcontentを持つ要素の横幅・高さを、画面全体のサイズにする例となります。

.content{
	width: 100vw;
	height: 100vh;	
}

vw・vhの値について

CSSのプロパティで長さを指定する場合、相対的な長さと絶対的な長さで指定する単位がありますが、vw・vh は次のように、それぞれビューポートを基準とする相対的な長さの単位となります。

また、「ビューポート」はブラウザのウィンドウの中で、メニューバーなどを除いた表示領域の部分となります。

  • 1vwでビューポートの幅1%のサイズとなり、100vwでビューポートの幅100%のサイズ
  • 1vhでビューポートの高さ1%のサイズとなり、100vhでビューポートの高さ100%のサイズ

width・heightプロパティの100%について

width・heightプロパティのパーセント値は、包含ブロックのサイズに対しての割合となります。

また、絶対値で指定していない要素の高さは、要素内のコンテンツに依存するため、heightの値に100%を指定した要素でも、画面全体のサイズとならない場合があります。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。