親要素の幅やページの幅の比率で幅のサイズを指定する - CSS

CSSで親要素の幅やページの幅の比率で幅のサイズを指定するコードを紹介します。

概要

CSSで親要素の幅の比率で幅を指定する場合は % 単位を利用します。

例 : ページ(bodyタグ)の直下の要素の場合

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <style>
    <!--
    body {
      margin:2em;
      padding:1em;
      border:solid #ff6a00 1px;
    }

    .Frame {
      width:100%;
      background-color:#b9f6ff;
    }
    -->
  </style>
</head>
<body>
  <div class="Frame">テスト</div>
</body>
</html>

解説

bodyタグの子要素のFrameクラスのdivタグの幅を%で指定します。100%の値を設定した場合は、親要素の100%の幅になります。親要素のbodyではマージンが2em、パディングが1em設定されていますので、100%の幅はウィンドウ幅から左右それぞれ3em(6em)引いた幅が100%の幅となります。

表示結果

上記のHTMLをWebブラウザで表示します。左右のマージンとパディングを引いた幅で表示されます。

Frameクラスのwidthプロパティの設定を width:50% にした場合は、下図の表示となります。親要素の領域の幅である左右のマージンとパディングを引いた幅の半分の幅で枠が表示されます。

例 : ネストされている要素の場合

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <style>
    <!--
    body {
      margin:2em;
      padding:1em;
      border:solid #ff6a00 1px;
    }

    .Container {
      width:680px;
      margin:1em;
      padding:1em;
      border:solid #009860 1px;
    }

    .Frame {
      width:100%;
      background-color:#b9f6ff;
    }
    -->
  </style>
</head>
<body>
  <div class="Container">
    <div class="Frame">テスト</div>
  </div>
</body>
</html>

解説

bodyタグの子要素にContainerクラスのdivタグがあり、その子要素にFrameクラスのdivタグがあります。
Containerの幅は680pxで固定された幅の枠です。Frameクラスの幅を%で指定しています。Frameクラスの幅を100%の値で設定した場合は、親要素であるContainerクラスの枠の幅を100%とする幅になります。親要素のContainerクラスではマージンが1em、パディングが1em設定されていますので、100%の幅はContainerクラスの幅である680pxから左右それぞれ2em(4em)引いた幅が100%の幅となります。