- Coding Methodology
- 第58回 サイズの異なる画像を縦横中央に配置する
第58回 サイズの異なる画像を縦横中央に配置する
IE6のサポート終了（2014年4月）まで一年を切る中、未だPCサイトにおける古いブラウザへの対応は需要が絶えないのが現状です。
新たに追加された便利な仕様も、レガシーブラウザへの対応のためにはひと工夫が必要となります。
今回は、商品一覧やギャラリーページなどによく見られる、サイズの異なる画像を縦横中央配置で並べる方法をご紹介します。
- 不適切なtableレイアウトは使わない
- 01 のように枠の中に入る画像サイズは一定ではなく、デザイン上中央配置としなければならないケースは多くありますが、なかなか縦方向の中央配置というのが難しいものです。
tableを用いてレイアウトすることも可能ですが、文書構造としてはあまり適切ではありません。
また、運用更新のしやすさや、imgタグが動的に吐き出されること等も想定すれば、可能な限りシンプルなマークアップで仕上げる必要があります。（02） この場合、要素をtableのセルの様に扱える「display: table-cell;」でのレイアウトが最も適切と考えられますが、それだけでは table-cell をサポートしていないIE6やIE7において縦方向の中央揃えを実現できません。
01レイアウトイメージ
02HTMLソース
- 独自拡張でIE7以下をカバー
- ここでは、IE7以下に対しても同様のレイアウトを再現するために「layout-grid-line」というプロパティを使い高さを指定します。（03）
聞き慣れないこのプロパティは、W3Cで審議中のものをIEが先行実装していたもので、グリッドの高さを指定する際に使用します。IE8以上では、標準モードにおいてこの値は無効になります。
これによりモダンブラウザには「display: table-cell;」が適用され、「vertical-align: middle;」で画像を上下中央に配置できます。
width と height にはそれぞれ枠のサイズ（画像の最大サイズ）を指定することで、それに満たない小さな画像は縦横中央に配置されるという仕組みです。 - また、画像が指定した枠の幅より大きな場合もあるケースでは、max-widthプロパティなどで制限することも有効ですが、 max-widthはIE8において正常に縮小されないバグがあるため、対策が必要です。
03CSSソース
