CSS 入門

CSS パーセント（%）レイアウト

CSS における パーセント（Percentages） は、異なる画面サイズに適応するレスポンシブレイアウトを作成するための非常に柔軟な手段を提供します。

ピクセル（px）などの固定単位とは異なり、パーセントは親要素（包含ブロック）のサイズに対して相対的に計算されます。これにより、要素を比例的にスケーリングさせることができ、あらゆるデバイスで意図した通りの外観を維持することが可能になります。

この章では、基礎的なレスポンシブレイアウトを構築するために、パーセントを効果的に使用する方法を解説します。

1. パーセント指定の幅（Width）を理解する

レスポンシブデザインにおいて、パーセントの最も一般的な用途は要素の width プロパティの設定です。要素の幅をパーセントで指定すると、それは親コンテナの幅に基づいて計算されます。

1.1 基礎例：2カラムレイアウト

2つの <div> 要素が親コンテナの幅を 50% ずつ占めるシンプルな2カラムレイアウトを考えてみましょう。

HTML コード：

<div class="container">
  <div class="column">カラム 1</div>
  <div class="column">カラム 2</div>
</div>

CSS コード：

.container {
  width: 80%; /* コンテナは親要素の幅の 80% を占有 */
  margin: 0 auto; /* コンテナを水平中央に配置 */
}

.column {
  width: 50%; /* 各カラムはコンテナ幅の 50% を占有 */
  float: left; /* カラムを横並びに配置（フロート） */
  box-sizing: border-box; /* 重要：パディングとボーダーを総幅に含める */
  padding: 20px;
  border: 1px solid #ccc;
}

この例のポイント：

  • .container は 80% に設定されており、これは <body> 要素（包含ブロックと仮定）の幅の 80% を占めることを意味します。margin: 0 auto; によって中央揃えにしています。
  • .column 要素は 50% に設定されているため、各カラムは .container の幅の半分を占めます。
  • float: left; を使用して2つのカラムを並べています（※現在は Flexbox や Grid が主流ですが、基礎理解のために紹介します）。
  • box-sizing: border-box; は極めて重要です。 これがないと、パディング（padding）とボーダー（border）が 50% の幅に「追加」されてしまい、合計幅が 100% を超えてカラムが改行されてしまいます。

2. パディングとボーダーによるレイアウト崩れの解決

前述の通り、パーセント幅を使用しながら同時にパディングやボーダーを使用する場合、必ず box-sizing: border-box; を指定してください。そうしないと、レイアウトが崩壊します。

NG例（box-sizing 未指定）：

.column {
  width: 50%;
  float: left;
  padding: 20px;
  border: 1px solid #ccc;
}

この場合、各 .column の実際の幅は 50% + 20px(左) + 20px(右) + 1px(左) + 1px(右) となり、明らかに 50% を超えるため、横に並ばず段組みが崩れます。

3. ネスト（入れ子）構造でのパーセント計算

パーセントはネストして使用できます。パーセント幅が設定された要素の中に、さらにパーセント幅の要素がある場合、その幅は直近の親要素を基準に計算されます。

<div class="outer">
  <div class="inner">内部コンテンツ</div>
</div>
.outer {
  width: 75%; /* 外側の div は親要素の 75% */
  background-color: #eee;
  padding: 20px;
}

.inner {
  width: 80%; /* 内側の div は .outer の 80% */
  background-color: #ddd;
  margin: 0 auto; /* 内側の div を中央揃え */
  padding: 10px;
}

ここでは、.outer はその親の 75% ですが、.inner は .outer の 80% です。したがって、.inner の実際の絶対幅は「祖父」要素の幅の 75% × 80% = 60% になります。

4. パーセント指定の高さ（Height）

幅ほど頻繁には使われませんが、height プロパティにもパーセントを使用できます。ただし、パーセントによる高さ指定は、包含ブロック（親要素）に明示的な高さが定義されている場合のみ有効です。

親要素の高さがコンテンツによって決まる（デフォルトの height: auto）場合、子要素のパーセント高さは auto として解析され、機能しません。

4.1 実行例 1：親要素に明確な高さがある（有効）

<div class="container">
  <div class="content">この内容はコンテナの高さの 50% を占めます。</div>
</div>
.container {
  width: 300px;
  height: 400px; /* 明確な高さ */
  background-color: #f0f0f0;
}

.content {
  width: 100%;
  height: 50%; /* コンテナの高さ (400px) の 50% = 200px */
  background-color: #ddd;
}

4.2 実行例 2：親要素の高さが未定義（無効）

.container {
  width: 300px;
  /* height が未設定 */
  background-color: #f0f0f0;
}

.content {
  width: 100%;
  height: 50%; /* 親が auto のため、ここも auto になる */
  background-color: #ddd;
}

この場合、.content の高さはコンテナの 50% ではなく、中身のテキスト量によって決まります。

5. ビューポート単位（vh/vw）による高さ・幅の設定

要素の高さをブラウザの表示領域（ビューポート）に対して相対的に決めたい場合は、vh（Viewport Height）単位を使用するのが便利です。1vh はビューポートの高さの 1% に相当します。

例：

.container {
  width: 100%;
  height: 100vh; /* ビューポート全体の高さを占有 */
  background-color: #f0f0f0;
}

.content {
  width: 50%;
  height: 50vh; /* ビューポートの高さの半分を占有 */
  background-color: #ddd;
}

同様に、vw はビューポートの幅（Viewport Width）を表します。

6. パーセント指定のマージン（Margin）とパディング（Padding）

マージンやパディングにもパーセントを使用できます。

ここで最も重要なルールは、パーセント指定の margin と padding は、常に包含ブロックの「幅（Width）」を基準に計算されるということです。たとえ margin-top や padding-bottom といった垂直方向の指定であっても、参照されるのは親の「幅」です。

6.1 実行例 1：全方向均等なパディング

.box {
  width: 200px;
  padding: 10%; /* 四方すべてが幅の 10%（つまり 20px）になる */
  background-color: #f0f0f0;
}

6.2 実行例 2：垂直方向のマージン

.element {
  width: 300px;
  margin-top: 5%; /* 幅の 5%（つまり 15px） */
  margin-bottom: 5%; /* 幅の 5%（つまり 15px） */
  background-color: #ddd;
}

7. 実践：レスポンシブ・フォトギャラリー

パーセントの真の威力は、これらを組み合わせて柔軟なレイアウトを作成することにあります。

<div class="gallery">
  <img src="image1.jpg" alt="画像 1">
  <img src="image2.jpg" alt="画像 2">
  <img src="image3.jpg" alt="画像 3">
</div>
.gallery {
  width: 90%;
  margin: 0 auto;
}

.gallery img {
  width: 30%; /* ギャラリー幅の 30% */
  margin: 1%;  /* ギャラリー幅の 1% */
  float: left;
}

この例では、.gallery が画面幅の 90% を占めて中央に配置されます。各画像はギャラリー幅の 30% を占め、1% のマージンを持ちます。これにより、画面サイズが変わっても画像が比例して縮小・拡大されるレスポンシブなギャラリーが完成します。

エンジニアからのアドバイス：
この例ではレイアウトに float: left; を使用していますが、現在の現場では Flexbox や Grid を使うのが一般的です。これらモダンな技術を組み合わせることで、より高度でメンテナンス性の高いレスポンシブ設計が可能になります。