皆さんこんにちは。フリーのマークアップエンジニア草野です。
今回は前回作った仮想テーブルレイアウトを、レスポンシブ対応に変更してみたいと思います。今回は、

• ブラウザ幅に対して全体の枠は最大800pxでセンター揃え
• 写真とキャプションのサイズは固定サイズレイアウト時の比率をキープ

という条件で作ってみたいと思います。

１．仮想テーブルレイアウトのレスポンシブ化

【HTML】

<div class="media">
	<div class="media-ph"><img src="img/photo.jpg" alt=""></div>
	<div class="media-data">
		<dl class="caption">
			<dt>1000畳もの大きさを誇る藤棚</dt>
			<dd>あしかがフラワーパークにある樹齢150年の大藤棚。空いっぱいに広がる巨大な藤棚は圧巻です。</dd>
		</dl>
	</div><!-- /.media-data -->
</div><!-- /.media -->

【CSS】

/*簡易リセット*/
*{
	margin:0;
	padding:0;
}

/*フルードイメージ  ①*/
img{
	max-width: 100%;
	height: auto;
}

/*baseスタイル*/
.media{
	max-width: 800px; /*②*/
	margin: 30px auto;
	padding: 25px;
	background: #f9f2fc;
	box-sizing: border-box; /*③*/
}
.media-ph{
	width: 61.3333%; /*④*/
	padding-right: 20px; /*⑤*/
	display:table-cell;
	vertical-align: middle;
}
.media-data{
	width: 38.6666%; /*⑥*/
	display:table-cell;
	vertical-align: middle;
}
.caption {
	padding: 15px;
	background:#fff;
	border-radius: 10px;
}
.caption dt{
	margin-bottom:10px;
	color: #330066;
	font-weight: bold;
	font-size: 14px;
}
.caption dd{
	font-size: 12px;
}

①まずはレスポンシブ対応とするため、画像を伸縮できるようにフルードイメージ化します。

②全体の枠は基本横いっぱいまで広がりますが、800px以上は大きくならないようにmax-widthを設定しておきます。

③固定pxのpaddingを含んだ状態で最大値800pxにできるよう、ボックスモデル計算をborder-box基準に変更しておきます。

④・⑥ 写真とキャプションが入るボックスは、固定レイアウト時の比率を保つように%指定に変更します。
固定レイアウト時の数値は以下の状態ですので、④は460÷750=61.3333%、⑤は290÷750=38.6666%となります。

⑤display:table-cell;になると、ボックスモデルのサイズ計算は自動的にborder-boxとなりますので、「20pxのpaddingを含んだ状態で全体が61.3333%」という計算が成立します。

レスポンシブ化した実装サンプル

上記サンプルHTMLを、実際にウィンドウの幅を広くしたり狭くしたりして確認してみてください。
正しい比率を保ったまま全体が伸縮するようになっているでしょうか？

２．Firefox・IEへの対応

上記のサンプルで正しく比率を保ったまま伸縮した方は、おそらくChromeやSafariをお使いなのではないでしょうか？
実は上記のコードではFirefoxやIE10+では画像のmax-widthが無効となり、伸縮してくれないはずです。
このことは、レスポンシブのサイトを作っていて、display:table-cell;を使った際に結構ハマる項目ですので、対処法を押さえておきましょう。

.media{
	display:table; /*①*/
	table-layout: fixed; /*②*/
	width: 100%; /*③*/
	max-width: 800px;
	margin: 30px auto;
	padding: 25px;
	background: #f9f2fc;
	box-sizing: border-box;
}

親要素がdisplay:table-cell;であるimg要素に、max-widthを効かせるためには、table-cell;が指定されている要素の直接の親要素に対して以下の３つの指定を必ず加える必要があります。

• ① display: table;
• ② table-layout: fixed;
• ③ widthの明示

Firefox/IEのバグ修正版

上記３つの指定を加えたサンプルを、FirefoxやIE10+で確認してみてください。
今度はちゃんとChromeと同じように、指定した比率で伸縮していると思います。

今回のケースに限らず、横並びにしたいボックスに対して単純にdisplay:table-cell;を設定しただけでは思うようなレイアウトにならないことがよくあります。table-cellを利用する際には、その親要素に対して原則としてdisplay:table;を設定し、table要素領域を明示するようにした方が良いでしょう。

いかがでしたか？
レスポンシブWebデザインでもtable-cellは大活躍ですので、上記の注意点を忘れずにいろいろ試してみてくださいね。

次回も仮想テーブルレイアウトの活用例を紹介します。
お楽しみに！

• 
•