ハイブリッドカラムレイアウトの作成方法

CSSを使用してハイブリッドカラムレイアウトのグリッドを作成する方法を学習します。

スクリーン幅に応じて4カラム、2カラム、全幅カラムに変化するレスポンシブカラムレイアウトの作成方法を学習します。

ブラウザのウィンドウサイズを調整して、レスポンシブ効果を確認してください：

自分で試してみてください

ハイブリッドカラムレイアウトの作成方法

第1ステップ - HTMLを追加：

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

第2ステップ - CSSを追加：

この例では、900ピクセル未満の幅のスクリーンで2カラムに変換される4カラムレイアウトを作成します。しかし、600ピクセル未満の幅のスクリーンでは、カラムが並べ替えるのではなく重ね合わせられます。

/* 4つの等幅のカラムを作成し、それらを一緒に浮動させる */
.column {
  float: left;
  width: 25%;
}
/* 浮動をクリアする */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* 响应式レイアウト - 4カラムではなく2カラムにレイアウトを変更する */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* 响应式レイアウト - 2カラムを並べ替えるのではなく、重ね合わせる */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

自分で試してみてください

関連ページ

チュートリアル：CSSウェブサイトレイアウト

チュートリアル：CSSレスポンシブウェブデザイン