XPのサポートが終了し、業務で対応すべきブラウザがIE8もしくは、IE9以上に変化してきます。この記事ではIE8以降で使えるマルチカラムレイアウト手法を解説します。XPのライフサイクルが終了し、普段の仕事でサポートをしなくてはいけないとされるブラウザは多くの場合、IE8以上、あるいはIE9以上へと前進したことでしょう。これにより、レイアウトの手法は大きく変わることになります。tableの挙動を解説し、あなたのCSSレイアウトテクニックを向上させることを目指します。IE8はCSS2.1をフルサポートしています。CSS2.1の仕様内には、displayの値にtableがありますが、IE7までは利用することができませんでした。tableを使うと、今まで難しかったレイアウトをスマートに実現することができます。tableを応用することで段組が実現できます。同様のレイアウトは従来からfloatプロパティでも実現できました。tableならではの次の特長があります。絶対にカラム落ちしないすべてのカラムの高さは、一番縦長と同じ高さになる段組サンプルHTML次のHTMLコードで段組が実現できます。.blockの中に段組み部分となる3つの.block__elementが配置されています。後続するコンテンツ...</div>CSSCSSについては、次の2点に注目してください。table-cell;と横幅を適用する次のCSSは主要な部分だけを抜粋しています(以下同)。#666;}上記の例では、3カラムですが、2カラムや4カラム以上であっても同じ方法で実現できます。いえ、この程度でしたらfloatプロパティでも実現可能でしょう。段組をする際、a要素のクリックできる範囲が、カラムによって異なる挙動をしばしば見かけます。table;を応用すれば、すべてのカラムの高さが揃うのでこういった、不自然な挙動を簡単に自然にすることができます。カラムの高さの統一カラムの高さ統一によって、a要素のクリック範囲も統一される。HTMLHTMLは先ほどのサンプルとほとんど変わりがありません。必要な箇所をaタグで括っただけの違いです。後続するコンテンツ...</div>CSS子要素セレクタを活用し、.blockの直下に配置される要素に対して、table-cellが適用されるようにします。#dd3;}カラム内の天地中央揃えtable-cellでレイアウトされたカラムは、vertical-alignが有効です。middle;)ことができます。middle;を使って、カラムを天地中央に揃える。HTMLインラインのボックス、ブロックのボックス問わず、table-cell直下の要素を天地揃えをコントロールすることができます。middle;を適用します。#666;}もちろんvertical-alignの値は、middle以外(topやbottomなど)も適用可能です。table-cell;は横に伸び縮みします。この特性を利用すれば、「入れ子」や、レスポンシブなブロックをスマートに実装できます。Webサイトを作る際、ブロックの「入れ子」はしばしば発生します。同じブロック(コンポーネント)が、異なる横幅のコンテナー内で利用されるケースです。table;を使えば、1コードでさまざまな横幅のケースに対応することができます。table;を使って、さまざまな横幅のコンテナーに対応する。table;による多段カラムは、フレキシブルに横方向に伸縮させることができます。縮めてもfloatのレイアウトように崩れることはありません。それぞれの.blockのHTML構造は、まったく同じであることに注目してください。同じ.blockの横幅は自動で伸縮することになります。ここには少し長いテキストを入れたりします。ここには少し長いテキストを入れたりします。ここには少し長いテキストを入れたりします。ここには少し長いテキストを入れたりします。後続するコンテンツ...</div>CSSCSSのポイントは以下の4点です。table;で実現した多段カラムは、floatのようにカラム落ちすることはなく、代わりに横幅が伸縮します。これはデメリットにもなりえます。URLのような英数字のみで構成された長い文字列は、自動折り返しされません。折り返ししないなどの理由で、横長のボックスが格納されてしまう場合、意図しない自動伸縮が発生してしまいます。見ての通り、親からはみ出るだけでなく隣のカラムを圧迫します。hidden;を設定すれば回避できると想像される方もいるかもしれません。table-cellにはそれが通用せず、強制的に収まるサイズまで伸びてしまうのです。fixed;を指定します。これでコンテンツ内容により、ほかのカラムの圧迫を阻止し、意図しない崩れが発生する可能性を回避できます。隣接するカラムの圧迫を防ぐ。hidden;を発動させることができます。break-word;を合わせて指定しておきます。この実装により、はみ出した画像は見切れ、折り返し不能だったテキストは強制的に折り返します(一昔前は、Firefoxで意図したとおりに動きませんでしたが、現在は解決しています)。意図していた見栄えHTMLclass属性値が.block__element2のdiv要素の中には、長いテキストや、横長の画像が格納されています。100%;を指定します。hidden;を指定します。table;によるレイアウトを業務で使うことができるようになりました。table表示によるレイアウトは、崩れにくいという固さとフレキシブルに伸縮するという柔軟さを併せ持っており、複雑なコンポーネントの組み合わせや、マルチデバイス対応といった、いまどきのCSS設計に求められる悩みの多くを解決します。table;の特性はほかにも使い道があります。次回はさらなる応用例を解説します。晃浩フロントエンド・エンジニア2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。WebGLの扱いも得意としている。外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Meetupの主催者。プロフェッショナルガイド』(共著:毎日コミュニケーションズ、2011年5月28日)』などがある。特定商取引法に基づく。