hijiriworld Web

「tableはダサいからdivを使おう！」とよく聞かれたのは5年前くらいからでしょうか。

それ以後、divにfloatを設定してレイアウトを組むのがスタンダードになりました。
ただし、floatというプロパティを正しく理解していない人はけっこう苦労したはず。

*floatについての正しい理解はこちらの記事を参考のこと > IE6の呪縛 フロート（float）を正しく理解する

ということで、floatというプロパティを正しく理解してclearfixをきちんと使えるようになると、floatレイアウトは楽勝になってきます。

ですが、このfloatレイアウトはマークアップが複雑になりがち。
可変レイアウトを基本とするモバイルファーストのWeb制作においては特に。

以下のようなレイアウトをもっとスマートに記述できないものか？

「display: table」と「display: table-cell」を使いましょう。

> HTML

<div class="table-cell-wrap">
	<div id="leftCell">left</div>
	<div>center</div>
	<div id="rightCell">right</div>
</div>

> CSS

.table-cell-wrap {
	display: table;
	width: 100%;
}
.table-cell-wrap > * {
	display: table-cell;
}

#leftCell { width: 100px; }
#rightCell { width: 100px; }

→サンプル1

とてもシンプルになりました。
さらに、table-cellの場合、vertical-alignが使えるので、内包する要素の縦方向の中央寄せも簡単です。
floatレイアウトの場合はネガティブマージンを設定したり…と、ちょっと面倒。

table-cellでtext-overflowを使う

可変レイアウトの場合、領域をはみ出した、つまりオーバーフローしたテキストを「…」で省略したくなります。

CSSのクラス定義は以下のようにします。

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

これを真ん中の可変セルに適用してみると…

→サンプル2

全然ダメですね。

これを解決する方法は、table-cellに対してmax-widthを設定してあげれば良いです。

.table-cell-wrap {
	display: table;
	width: 100%;
}
.table-cell-wrap > * {
	display: table-cell;
	max-width: 1px; /* for ellipsis */
}

→サンプル3

まとめとして、table-cellのOOCSSを定義するなら以下の通り。

.table-cell-wrap {
	display: table;
	width: 100%;
}
.table-cell-wrap > * {
	display: table-cell;
	max-width: 1px;
}

*参考 > OOCSS（オブジェクト指向CSS）のススメ

*floatに変わるレイアウトとしては他に、CSS3のフレックスボックスというのがあって、これが正式に採用されたら標準になるでしょーね