display: tableの活用

全3回

この記事ではIE8以降で使えるマルチカラムレイアウト手法を解説します。display: tableを使うと、今まで難しかったレイアウトをスマートに実現することができるでしょう。

仕様は変更されていませんが、IEのサポートが終了した現時点ではCSS GridやFlexboxを使って、同様のレイアウトができます。「CSS GridとFlexboxの使い分け」などを参照してください。

最終回 流し込む方向の制御

displayプロパティのtable関連値の実装応用例をさらに紹介します。一方、このプロパティを使う際に注意しなければならないことを、仕様書を参照しつつ押さえます。

第2回 フィットする特性と均等配置

これまでfloatで実現していた段落レイアウトをdisplay: tableで実現するだけでなく、さらに、その特性を活かした応用例を紹介します。日常業務でも使えそうなサンプルを用意しました。

第1回 フレキシブルな段組みレイアウト

2014年4月にWindows XPのサポートが終了し、業務で対応すべきブラウザがIE8もしくは、IE9以上に変化してきます。この記事ではIE8以降で使えるマルチカラムレイアウト手法を解説します。