CSS アドバンス

CSS レスポンシブ グリッドビュー

多くのウェブサイトは、グリッドビュー（Grid-View）に基づいて設計されています。これは、ページを複数のカラム（列）に分割し、その組み合わせでレイアウトを構成する手法です。レスポンシブデザインにおいては、このカラムの幅を「％（パーセント）」で指定することで、画面サイズに合わせて流動的に変化させます。

1. 12カラムシステムの概念

レスポンシブデザインの黄金律として、12カラムシステムが広く使われています。なぜ「12」なのか？ それは、12が 2, 3, 4, 6 で割り切れるため、非常に柔軟な分割が可能だからです。

  • 2分割: 6カラム + 6カラム
  • 3分割: 4カラム + 4カラム + 4カラム
  • 4分割: 3カラム + 3カラム + 3カラム + 3カラム

2. 準備：box-sizing の設定

グリッドを作成する前に、最も重要な設定があります。それは box-sizing: border-box; です。

通常、CSS ではパディングやボーダーを追加すると要素の総幅が増えてしまい、計算が狂ってレイアウトが崩れます。border-box を指定することで、パディングやボーダーを「幅（width）」の中に含めることができ、直感的なサイズ指定が可能になります。

* {
  box-sizing: border-box;
}

3. グリッドビューの構築手順

基本的なレスポンシブグリッドは、以下の 3 つの要素で構成されます。

3.1 カラム幅の計算

12カラムシステムでは、1カラムあたりの幅は $100\% / 12 = 8.33\%$ となります。これをベースにクラスを作成します。

クラス名幅の計算パーセンテージ
.col-11 / 128.33%
.col-33 / 1225%
.col-66 / 1250%
.col-1212 / 12100%

3.2 CSSの実装

カラムを横並びにするために float: left; を使用し（現代では Flexbox や Grid も使われますが、原理理解にはこれが最適です）、行をリセットするための clearfix を用意します。

[class*="col-"] {
  float: left;
  padding: 15px;
}

/* カラムの幅指定 */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
/* ... .col-12まで続く */

/* 行（row）の後に回り込みを解除 */
.row::after {
  content: "";
  clear: both;
  display: table;
}

4. レスポンシブ化（メディアクエリ）

PCで見るときは 3 カラム（.col-4 × 3）でも、スマホで見るときは文字が小さくなりすぎるため、1 カラム（100%幅）にしたい場合があります。

メディアクエリを使用して、モバイルファースト（またはデスクトップファースト）で幅を上書きします。

/* デフォルト（スマホ）：全幅表示 */
[class*="col-"] {
  width: 100%;
}

/* デスクトップ（768px以上）：指定したカラム幅を適用 */
@media only screen and (min-width: 768px) {
  .col-1 {width: 8.33%;}
  .col-3 {width: 25%;}
  .col-6 {width: 50%;}
}

ポイント
グリッドビューを自作できるようになると、Bootstrap などのフレームワークが内部で何を行っているのかが手に取るようにわかるようになります。構造を理解することは、トラブルシューティングの際にも非常に役立ちます。