CSSで2カラムを作ってみる

CSSで2カラムといっても、その作成方法は様々です。
多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。

1. floatを利用する

基本的な方法です。
子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。
これらの問題を解決するには、clearfix か overflowを利用する必要があります。

.parent {
  overflow: hidden;
}
.child1 {
  float: left;
  width: 240px;
}
.child2 {
  float: right;
  width: 128px;
}

2. floatとmarginを一定方向にかける

片方にfloat、片方はfloatをかけた方向に隣の要素の横幅以上のmarginをとる方法です。
floatのかかっている数値は固定して、文字の部分を伸縮させる時などに非常に効果的です。

この方法を利用すると、floatのかかっていないボックスの高さに依存して、親の高さがとれます。
そのため場合によっては、floatを解除しなくても、レイアウトを崩さずにコーディングすることも可能です。

.child1 {
  float: left;
  width: 240px;
}
.p-child2 {
  margin-left: 256px;
}

3. floatと隣接のボックスにoverflow: hidden;をかける

上記の方法だとmarginに数値を設定する必要があるため、より柔軟にするためにoverflowを利用します。
overflowを利用すると、書式コンテキストが確立するため、回り込みが起こらずに2カラムを実現することができます。
レイアウトに、より柔軟性を持たせたい時に有効な手法です。

.child1 {
  float: left;
  width: 240px;
  margin-right: 16px;
}
.p-child2 {
  overflow: hidden;
}

4. floatとマイナスマージン

親のボックスが400pxで、子のボックスに幅190pxとmargin 20pxが指定されている場合。

(190+20)*2 = 420

全体幅が420pxとなり、400pxの親のボックスよりも大きくなるため、通常ならカラム落ちが発生します。
しかしマイナスマージンを加えることで、IE8以上であればカラム落ちを防げます。

.parent {
  overflow: hidden;
  margin-right: -20px;
}
.child1,
.child2 {
  float: left;
  width: 190px;
  margin-right: 20px;
}

この方法は2カラムだけに限定するよりも、数カラムになっているリストなどにも役立つ方法です。
このパターンは、よく使えるわりに計算が面倒くさいので、Preprocessorのmixinなどを利用すると計算が必要なくなります。

SCSS, Sass, Less, Stylus の例

SCSS

@mixin layout-pattern($areaWidth, $colNum, $colGap, $childEl: li, $legacy: false) {
// layout-pattern(親の横幅, カラム数, カラムの間隔, 子のセレクタ, IE7以下に対応する？(デフォルトは、対応しない))

  $colAreaWidth: $areaWidth + $colGap;
  overflow: hidden;
  margin-right: -#{$colGap};
  @if $legacy {
    width: $colAreaWidth;
    zoom: 1;
  }
  #{$childEl} {
    float: left;
    $colWidth: $colAreaWidth / $colNum - $colGap;
    width: floor($colWidth);
    margin-right: $colGap;
    @content;
  }
}

ul {
  @include layout-pattern(400px, 5, 8px)
}
.test {
  @include layout-pattern(400px, 4, 16px, ".col") {
    border: 1px solid #000;
    margin-bottom: 20px;
    box-sizing: border-box;
  }
}

Sass

=layout-pattern($areaWidth, $colNum, $colGap, $childEl: li, $legacy: false)
  // layout-pattern(親の横幅, カラム数, カラムの間隔, 子のセレクタ, IE7以下に対応する？(デフォルトは、対応しない))
  $colAreaWidth: $areaWidth + $colGap
  margin-right: -#{$colGap}
  overflow: hidden
  @if $legacy
    width: $colAreaWidth
    zoom: 1
  #{$childEl} 
    $colWidth: $colAreaWidth / $colNum - $colGap
    float: left
    width: floor($colWidth)
    margin-right: $colGap
    @content

ul 
  @include layout-pattern(400px, 5, 8px)

.test
  @include layout-pattern(400px, 4, 16px, ".col") 
    border: 1px solid #000
    margin-bottom: 20px
    box-sizing: border-box

Less

// もう少しブラッシュアップしたい
.layout-legacy(@legacy-width) when (@legacy) {
  width: @legacy-width;
  zoom: 1;
}
.layout-pattern(@areaWidth, @colNum, @colGap, @childEl: li, @legacy: false) {
  // layout-pattern(親の横幅, カラム数, カラムの間隔, 子のセレクタ, IE7以下に対応する？(デフォルトは、対応しない))
  @colAreaWidth: @areaWidth + @colGap;
  overflow: hidden;
  margin-right: -@colGap;
  .layout-legacy(@colAreaWidth);
  @{childEl} {
    float: left;
    @colWidth: @colAreaWidth / @colNum - @colGap;
    width: floor(@colWidth);
    margin-right: @colGap;
    .child-content(); 
  }
}

ul {
  .child-content() {}
  .layout-pattern(400px, 5, 8px);
}
.test {
  @childEl: .col;
  .child-content() {
    border: 1px solid #000;
    margin-bottom: 20px;
    box-sizing: border-box;
  };
  .layout-pattern(400px, 4, 16px, @childEl);
}

stylus

browserLegacy = false; // IE6, 7に対応するか

layout-pattern(var) 
  colAreaWidth = var[0] + var[2]
  overflow hidden
  margin-right -1 * var[2]
  if browserLegacy
    width colAreaWidth
    zoom 1
  
layout-pattern-child(var) 
  colWidth = (((var[0] + var[2]) / var[1]) - var[2])
  float left
  width floor(colWidth)
  margin-right var[2]


ul 
  layout = 400px 5 8px
  // 変数をスペース区切りで設定
  // foo = 親の横幅 カラム数 カラムの間隔
  layout-pattern(layout)
  li
    layout-pattern-child(layout)

.test 
  layout = 400px 4 16px
  layout-pattern(layout)
  .col
    layout-pattern-child(layout)
    border 1px solid #000
    margin-bottom 20px
    box-sizing border-box

.parent {
  position: relative;
  
  /*高さがでないことを示すため、あえてボックスよりも短くしている*/
  height: 50px;
}
.child1 {
  position: absolute;
  top: 16px;
  left: 8px;
  width: 240px;
}
.child2 {
  position: absolute;
  top: 16px;
  right: 8px;
  width: 128px;
}

.parent {
  position: relative;
}
.child1 {
  position: absolute;
  top: 16px;
  left: 8px;
  width: 240px;
}
.p-child2 {
  margin-left: 264px;
  font-size: 14px;
}

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

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

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

.parent {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

.parent {
  display: flex;
  justify-content: space-around;
}
.child1,
.child2 {
  width: 160px;
}