コーディングメソドロジー

第58回 サイズの異なる画像を縦横中央に配置する

IE6のサポート終了(2014年4月)まで一年を切る中、未だPCサイトにおける古いブラウザへの対応は需要が絶えないのが現状です。
新たに追加された便利な仕様も、レガシーブラウザへの対応のためにはひと工夫が必要となります。
今回は、商品一覧やギャラリーページなどによく見られる、サイズの異なる画像を縦横中央配置で並べる方法をご紹介します。

不適切なtableレイアウトは使わない
01 のように枠の中に入る画像サイズは一定ではなく、デザイン上中央配置としなければならないケースは多くありますが、なかなか縦方向の中央配置というのが難しいものです。
tableを用いてレイアウトすることも可能ですが、文書構造としてはあまり適切ではありません。
また、運用更新のしやすさや、imgタグが動的に吐き出されること等も想定すれば、可能な限りシンプルなマークアップで仕上げる必要があります。(02) この場合、要素をtableのセルの様に扱える「display: table-cell;」でのレイアウトが最も適切と考えられますが、それだけでは table-cell をサポートしていないIE6やIE7において縦方向の中央揃えを実現できません。

01レイアウトイメージ

レイアウトイメージ

02HTMLソース

HTMLソース

独自拡張でIE7以下をカバー
ここでは、IE7以下に対しても同様のレイアウトを再現するために「layout-grid-line」というプロパティを使い高さを指定します。(03
聞き慣れないこのプロパティは、W3Cで審議中のものをIEが先行実装していたもので、グリッドの高さを指定する際に使用します。IE8以上では、標準モードにおいてこの値は無効になります。
これによりモダンブラウザには「display: table-cell;」が適用され、「vertical-align: middle;」で画像を上下中央に配置できます。
width と height にはそれぞれ枠のサイズ(画像の最大サイズ)を指定することで、それに満たない小さな画像は縦横中央に配置されるという仕組みです。
また、画像が指定した枠の幅より大きな場合もあるケースでは、max-widthプロパティなどで制限することも有効ですが、 max-widthはIE8において正常に縮小されないバグがあるため、対策が必要です。

03CSSソース

CSSソース

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム