こんにちは、マークアップエンジニアの草野です。
今回は仮想テーブルレイアウトの例として、このようなシンプルな例を作ってみたいと思います。
１．フロートレイアウトでの実装
【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>あしかがフラワーパークにある大藤棚。空いっぱいに広がる巨大な藤棚は圧巻です。</dd> </dl> </div> </div>
【CSS】
/*簡易リセット*/
*{
margin:0;
padding:0;
}
/*baseスタイル*/
.media{
padding: 25px;
background: #f9f2fc;
}
.media:after{
content:””;
display:block;
clear:both;
}
.media-ph{
width: 440px;
margin-right: 20px;
float:left;
}
.media-data{
width: 290px;
float:left;
}
.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;
}
フロートで実装した場合、このように写真とキャプションは上揃えとなってしまいます。
では次に仮想テーブルレイアウトで実装してみましょう。
２．仮想テーブルレイアウトに変更
.media-ph{
width: 440px;
margin-right: 20px;
display: table-cell;
vertical-align: middle;
}
.media-data{
width: 290px;
display: table-cell;
vertical-align: middle;
}
横に並べたい.media-ph、.media-dataをdisplay:table-cell;に変更します。
するとこの２つのブロックはtd/th要素とみなされ、ブラウザ側は1行2列のtable要素がそこに存在するとみなしてレイアウトするため、このように自動的に横並びとなります。
更にtd/thの中ではvertical-alignを使うことが可能となりますので、.media-phと.media-dataの中身を自動的に上下中央に揃えることが可能となります。とても便利ですね！
３．写真とキャプションの間に余白をあける
display:table-cell;はとても便利ですが、利用にあたっていくつか注意点もあります。
display:table-cell;が適用されると、その要素はtd/th要素と同じ振る舞いをするようになります。
それは使えるプロパティだけでなく、使えないプロパティもtd/th要素と同じになるということを意味しています。
table-cellでは使えないプロパティの代表が、marginです。表組みの場合、セルとセルはborderを挟んで隣接しており、そこにmarginは存在しませんので、いくら元の要素がdivだったとしても、table-cellにした時点でmarginは無効となってしまいます。
今回のケースの場合、写真とキャプションの間には20pxの余白を取りたいのですが、フロートレイアウトの時のように.media-phにmargin-right:20px;を設定しても無視されてしまいます。
display:table-cell;を設定した要素同士の間に余白を取りたい場合は、
- ①marginではなくpaddingを利用する
- ②それ自身ではなく子要素にmargin/paddingをつける
- ③border-spacingを使う
といった選択肢の中から、デザインに合ったものを選ぶ必要がありますので注意をしてください。
今回はシンプルに①の方法で対処してみようと思います。
.media-ph{
width: 440px;
padding-right: 20px;
display: table-cell;
vertical-align: middle;
}
いかがでしたか？display:table/table-cellは、IE8以上の全ての環境で利用することができますので、隣り合うコンテンツを上下中央で揃えたい場合の選択肢の一つとして是非活用してみてくださいね。
次回は、仮想テーブルレイアウトをレスポンシブ対応にしてみたいと思います。
ではまた。
