HTML+CSSでの段組みレイアウト作成について

はじめに

HTML+CSSで段組み作る際にはdivタグとfloatスタイルを使うことが一般的と思わる。(よく知らないが)

それに取って代わりそうな、便利なスタイル指定を見つけたのでメモしておくこととする。

※IE8から対応しているのでそれなりに使えると思っている。

CSS Table display

display: table と display: table-cell の組み合わせで

お手軽に段組みレイアウト作成することができる。

display: table が 行に相当し、display: table-cell が セルに相当するイメージ。

記述する際は、display: table スタイルと同時に table-layout: fixed も記述すること。

これがないとセル幅が自動計算されてしまう。

以下は簡単なテーブルの例。

div{
    box-sizing: border-box;
}

.row{
    display: table;
    width: 100%;
    table-layout: fixed;
    background: gray;
    color: white;
}

.cell-1{
    display: table-cell;
    width: 25%;
    background: blue;
    color: white;
}

.cell-2{
    display: table-cell;
    width: 50%;
    background: tomato;
    color: white;
}

<div class="row">
    <div class="cell-1">行1列1</div>
    <div class="cell-2">行1列2</div>
    <div class="cell-1">行1列3</div>
</div>
<div class="row">
    <div class="cell-1">行2列1</div>
    <div class="cell-2">行2列2</div>
    <div class="cell-1">行2列3</div>
</div>
<div class="row">
    <div class="cell-1">行3列1</div>
    <div class="cell-2">行3列2</div>
    <div class="cell-1">行3列3</div>
</div>
<div class="row">
    <div class="cell-1">行4列1</div>
    <div class="cell-2">行4列2</div>
    <div class="cell-1">行4列3</div>
</div>

実行結果の確認はこちら http://jsfiddle.net/5denknxw/

複雑な段組みについて

作成途中で且つそこまで複雑では無いですが、http://jsfiddle.net/bjywym4a/ に配置しました。

IE8～, Chrome, Firefox でレイアウト崩れが無いことを確認しています。

複雑な段組みについて2

ブログっぽい段組みを http://jsfiddle.net/ufmhnsdj/ に配置しました。

IE8～, Chrome, Firefox でレイアウト崩れが無いことを確認しています。

2例だけですが、floatプロパティよりはかなり簡単に利用できるんじゃないかなと思います。