マージン、パディングを考慮しないビューポートの幅や高さの割合でオブジェクトのサイズを指定する - CSS

CSSでマージンやパディングを含めないビューポートの幅や高さの割合でオブジェクトのサイズを指定するコードを紹介します。

概要

CSSで%指定をすると、親要素の幅からマージンとパディング除いた、コンテンツ表示の有効な幅を100%として幅が設定されますが、親要素の幅ではなく画面の幅に対する割合で幅を指定したいことがあります。この記事では、CSSでビューポートの幅に対する割合を指定するコードを紹介します。

書式

CSSでビューポートの幅や高さに対する割合を指定する場合は、vw, vh, vmin, vmax の単位を利用します。

(数値):vw;

(数値):vh;

(数値):vmin;

(数値):vmax;

それぞれの単位の意味は下記になります。

ビューポートの幅と高さを基準にするCSS単位
単位	意味
vw	ビューポートの幅のパーセンテージ (1vw=ビューポートの幅の1%)
vw	ビューポートの高さのパーセンテージ (1vh=ビューポートの高さの1%)
vmin	ビューポートの幅、高さの小さいほうのパーセンテージ (1vmin=ビューポートの幅または高さの1%)
vmax	ビューポートの幅、高さの大きいほうのパーセンテージ (1vmax=ビューポートの幅または高さの1%)

現象の確認

下記のコードを準備します。
"frameA"クラスの幅を100%とし、bodyタグのマージンを64px取っています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    <!--
    body{
      margin:64px;
    }
    .frameA {
      margin:0;

      text-align: center;
      width: 100%;
      background-color: #b0aaff;
    }
    -->
  </style>
</head>
<body>
  <div class="frameA">
    あいうえお<br />
    かきくけこ<br />
    さしすせそ<br />
    ABCDEF<br />
  </div>
</body>
</html>

上記のHTMLをWebブラウザで表示します。下図の画面が表示されます。frameA の幅は100%で指定されていますが、マージンが左右に均等に取られている状態で表示されています。

マージンの値を100%より大きな値、120%に変更して表示を確認します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    <!--
    body{
      margin:64px;
    }
    .frameA {
      margin:0;

      text-align: center;
      width: 120%;
      background-color: #b0aaff;
    }
    -->
  </style>
</head>
<body>
  <div class="frameA">
    あいうえお<br />
    かきくけこ<br />
    さしすせそ<br />
    ABCDEF<br />
  </div>
</body>
</html>

上記のHTMLをWebブラウザで表示します。下図の画面が表示されます。frameA の幅は120%で指定されているため、左側のマージンは64px取られていますが、右側はあふれてしまい、マージンが取れていません。

100%の指定は、Bodyのマージンを考慮した幅であることが分かります。%指定で幅を指定した場合の動作の詳細はこちらの記事も参照して下さい。

vw,vh を指定した場合の動作

下記のコードを準備します。
"frameA"クラスの幅を100vwとし、bodyタグのマージンを64px取っています。

コード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    <!--
    body{
      margin:64px;
    }
    .frameA {
      margin:0;

      text-align: center;
      width: 100vw;
      background-color: #ffb2b2;
    }
    -->
  </style>
</head>
<body>
  <div class="frameA">
    あいうえお<br />
    かきくけこ<br />
    さしすせそ<br />
    ABCDEF<br />
  </div>
</body>
</html>

表示結果

100vwでビューポートの100%の指定ですが、右側はあふれてしまっています。100vwはビューポート全体の幅の100%のため、左側のマージン64pxがあるため、64px分あふれてしまっています。

ウィンドウの幅を狭めても、64pxあふれ続けていることが分かります。

コード

50vwに変更して動作確認します。
下記のコードに変更します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    <!--
    body{
      margin:64px;
    }
    .frameA {
      margin:0;

      text-align: center;
      width: 50vw;
      background-color: #ffb2b2;
    }
    -->
  </style>
</head>
<body>
  <div class="frameA">
    あいうえお<br />
    かきくけこ<br />
    さしすせそ<br />
    ABCDEF<br />
  </div>
</body>
</html>

表示結果

上記のコードをWebブラウザで表示します。マージンを含めないビューポート全体の幅の50%の幅の枠が表示されています。

ウィンドウの幅を縮めても、マージンを含めないウィンドウ全体の幅の50%の幅の枠になります。

補足: ページに横スクロールバーがある場合の動作

ページに横スクロールバーがある場合の動作も確認します。

%で指定した場合

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <style>
    <!--
    body {
      margin-left:32px;
      margin-right:32px;
    }

    .Container {
      width: 1200px;
      height: 64px;
      background-color: #F0F0F0;
    }

    .percent {
      width:100%;
      background-color:#ffd800;
    }
    -->
  </style>
</head>
<body>
  <div class="Container">
    <div>Test Page</div>
  </div>

  <div class="percent">テストです</div>
</body>
</html>

WebブラウザでHTMLファイルを開きます。下図のページが表示されます。

右側にスクロールすると、スクロールの途中で枠の右端になります。100%幅はページの幅ではなく、Webブラウザの画面幅で、かつマージンの値を除いた幅であることがわかります。

vwで指定した場合

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <style>
    <!--
    body {
      margin-left:32px;
      margin-right:32px;
    }

    .Container {
      width: 1200px;
      height: 64px;
      background-color: #F0F0F0;
    }

    .ViewWidth {
      width:100vw;
      background-color:#ae9eff;
    }
    -->
  </style>
</head>
<body>
  <div class="Container">
    <div>Test Page</div>
  </div>

  <div class="ViewWidth">テストです</div>
</body>
</html>

WebブラウザでHTMLファイルを開きます。下図のページが表示されます。