如何を作成：2つのカラムレイアウト

2つのカラムレイアウトを作成する方法

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

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

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

この例では、以下のように作成します：等幅のカラム：

フロート例

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

自分で試してみる

2つのカラムレイアウトを作成する現代的な方法はCSS Flexboxを使用します。ただし、Internet Explorer 10およびそれ以前のバージョンには対応していません。

Flex 実例

.row {
  display: flex;
}
.column {
  flex: 50%;
}

自分で試してみる

2つのカラムレイアウトを作成するには、フロートまたはflexを使用できます。ただし、IE10およびそれ以前のバージョンをサポートする必要がある場合は、フロートを使用する必要があります。

ヒント：Flexible Box Layout Moduleに関する詳細情報を知りたい場合は、以下のチュートリアルを読んでください： CSS Flexbox チュートリアル。

この例では、2つの不等宽のカラムを作成します：

例

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

自分で試してみる

この例では、以下のように作成します：レスポンシブ2つのカラムレイアウト：

例

/* レスポンシブレイアウト - スクリーン幅が600px未満の場合、2つのカラムを並べ替えではなく積み重ねにします */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

自分で試してみる

関連ページ

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

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