CSSで2カラムのデザインを作る方法4選

CSSで2カラムのデザインを作る方法4選

CSSで2カラムや3カラムのデザインを作る方法はいくつもあり、細かな要望によって最適な方法は異なるため多くの方法を知っておくに越したことはありません。この記事ではその中でも扱いやすく出番の多い4つの方法をご紹介します。

目次

子にそれぞれfloatを利用する

child1
child2
.parent {
  overflow: hidden;
}
.child1 {
  float: left;
  width: 400px;
}
.child2 {
  float: right;
  width: 190px;
}

最も基本的なfloatを使った方法です。それぞれの子要素をfloatで左右それぞれに設置します。

子にfloatを利用した場合、親要素(灰色部分)の高さが算出できなくなるためレイアウトが崩れてしまうことがあります。

これを解決するには親要素にclearfixを使ってafter領域でfloatをクリアするか、親要素にoverflowを利用します。

display: table;を使う

child1
child2
.parent {
  display: table;
  width: 100%;
}
.child1,
.child2 {
  display: table-cell;
  width: 50%;
}

display: table;を使うことで要素をテーブル要素のように振る舞わせることができます。

一見簡単に複数カラムを実現できますが、この方法で複数カラムを実現した場合、レスポンシブデザインに対する柔軟性を欠いてしまうことには留意しておきましょう。

具体的には『PCで表示すると2列、スマホで表示すると1列になる』ようデザインしたくても、この方法だと常に2列で表示されてしまいます。

display: inline-block;を使う

child1
child2
.parent {
  text-align: center;
}
.child1 {
  display: inline-block;
  width: 380px;
}
.child2 {
  display: inline-block;
  width: 180px;
}

子要素にdisplay: inline-block;を使うことで2カラムや3カラムを実現する方法です。

display: inline-block;を適用された要素は並び方はinline的、中身はblock的な性質を持ちます。

つまり並びはインライン要素のように横に並んでいきつつも、ブロック要素のように幅や高さ、上下左右の余白を自由に設定することができます。

display: flex;を使う

child1
child2
.parent {
  display: flex;
  justify-content: space-around;
}
.child1,
.child2 {
  width: 280px;
  text-align: center;
}

CSS3のdisplay: flex;を親要素に定義することでその直下の要素を並列にし2カラムや3カラムを実現する方法です。

古いブラウザでは利用できない場合がありますが自由度は高く、子要素の順番を並べ替えたり、一部の子要素のみを左右または上下に寄せたり、一部の子要素のみ幅を大きくしたりすることが可能です。

一方で並列で並べてしまうため、display: table;同様、PCとスマホでカラム数を変えることはできません。

このエントリーをはてなブックマークに追加

コメントを残す

頂いたコメントは一読した後表示させて頂いております。
反映まで数日かかる場合もございますがご了承下さい。