四列レイアウトの作成方法：

四列レイアウトの作成方法

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

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

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

この例では、以下のように四列レイアウトを作成します

例

.column {
  float: left;
  width: 25%;
}
/* カラムの後のフロートをクリアします */
.row:after {
  content: "";
  display: table;
  clear: both;
}

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

この例では、以下のように作成しますレスポンシブ四列レイアウト：

例

/* レスポンシブレイアウト - スクリーン幅が600px未満の場合、三列を並べ替えて並排に配置しません */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

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

関連ページ

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

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