2010年05月31日

画像の縦方向のセンタリング その2

こんにちは、馬場です。


ものすごく以前(半年前?)になってしまうのですが、
画像の縦方向のセンタリングについてのお話が
途中になっているので、今回はその第2回目、
「displayを使ったセンタリング」のお話をさせていただきます。

「なんのことだか忘れちゃったよ〜。」という方がほとんどだと思いますので、
下記より、前回の記事をご覧いただければと思います。



displayを使ったセンタリング(IE6〜7未対応)


前回の記事で書いているように、
tableであれば
縦方向のセンタリングも全く難なく対応可能です。


ということで、tableと同じ動きになるように
スタイルを設定すれば良いことになります。


下記、サンプルをご確認ください。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.5のものです。

(htmlコーディング)
<div class="wrapper2">
<div><img src="yoko.gif" alt="" /></div>
<div class="none">&nbsp;</div>
<div><img src="tate.gif" alt="" /></div>
</div>
(cssサンプル)
* {
margin:0;
padding:0;
}
.wrapper2 {
margin:10px;
}
.wrapper2 div {
display:table-cell;
width:200px;
height:200px;
border:1px solid #71BED9;
background-color:#DBEDFA;
text-align:center;
vertical-align:middle;
}
.wrapper2 div.none {
width:10px;
border:0;
background-color:transparent;
}
サンプルを表示


サンプルのように
display:table-cell
を設定することで
tableのセルと同じ振る舞いをすることとなるため、
画像の真ん中寄せを実現することができました。


ただ、IE7以前は「table-cell」に対応していないため、
別の対応をする必要があります。

inline-blockと同等の効果を持たせると実現できるようですが、
またの機会に検証したいと思います。
(まだinline-blockについても述べていないので・・・)

次回の私の記事では、
画像の縦方向のセンタリングについて
ダミーイメージとvertical-alignを使ったセンタリング
をご紹介します。
posted by baba at 21:16 | Comment(0) | TrackBack(0) | テクニック

2010年05月14日

colspan使用時のテーブル列幅指定について

こんにちは。島津です。
今回は、テーブルの列の幅指定に関する話題です。

表組みを使う時、内容やデザインにしたがって
列の幅サイズを指定することはよくあると思いますが、
colspanによるセル結合と組み合わせて使った場合に
実はちょっとした落とし穴があります。

とりあえずサンプルをご覧下さい。

▼スクリーンショット

※上がWindows Firefox3、下がWindows Internet Explorer7です。
(htmlコーディング)
<table>
<tr>
<th class="col01">商品No.</th>
<th class="col02">商品名</th>
<th class="col03">価格</th>
<th class="col04">概要</th>
</tr>
<tr>
<td class="col01">01</td>
<td class="col02">キャロットケーキ</td>
<td class="col03">¥400</td>
<td class="col04">採れたての甘いにんじんを使った、見た目もかわいいケーキです。野菜が苦手なお子様にも</td>
</tr>
<tr>
<td class="col01">02</td>
<td class="col02">ミシシッピマッドケーキ</td>
<td class="col03">¥600</td>
<td class="col04">当店人気No.1!チョコレート生地にナッツがぎっしりの、濃厚な味わい。コーヒーとの相性も抜群です</td>
</tr>
<tr>
<td class="col01">03</td>
<td class="col02">シーフードケーキ</td>
<td class="col03">¥750</td>
<td class="col04">瀬戸内海産の新鮮な魚介をふんだんに使った、次世代スイーツ!強靭な胃腸をお持ちの方に。</td>
</tr>
<tr>
<td class="col01">04</td>
<td class="col02">激辛ハバネロケーキ</td>
<td class="col04" colspan="2">大変申し訳ございませんが、諸事情によりこちらの商品は取り扱いを中止させて頂きました。</td>
</tr>
</table>
(cssサンプル)
body {

color:#766;
font-size:75%;

}
table {

font-size:100%;
border:solid 1px #A99;
border-collapse:collapse;

}
th,td {

padding:5px;
border:solid 1px #A99;
text-align:center;

}
th {

background-color:#FFF4F7;

}
td {

background-color:#FFF9F4;

}
td.col03 {

text-align:right; color:#EE0000;

}
td.col04 {

text-align:left;

}

/* テーブル列幅指定 */
.col01 {

width:40px;

}
.col02 {

width:120px;

}
.col03 {

width:40px;

}
.col04 {

width:200px;

}
最下段、セルを結合した箇所の表示が異なっています。

Firefoxでは(デバッグツールのFirebugによると)
「col03」と「col04」を足し算した幅になっていました。

一方IE7では、表組み上セルは結合されているものの
中の要素はキッチリ「col04」の幅のままになっているようで、
右側に「col03」分の余白が空いています。

ブラウザによる仕様の違いだと思うのですが、
px単位で列幅を指定するとこの現象が起こるみたいです。

本当は結合セル用のクラスを定義するのが望ましいのですが、
結合のパターンがたくさんある場合はなかなか難しいかも知れませんので
ここはひとつ、幅指定の方針をちょっと変えてみます。

▼スクリーンショット

※上がWindows Firefox3、下がWindows Internet Explorer7です。
(cssサンプル)
/* テーブル列幅指定 */
table {

width:500px;

}
.col01 {

width:10%;

}
.col02 {

width:30%;

}
.col03 {

width:10%;

}
.col04 {

width:50%;

}
テーブルの幅の方を固定にし、列幅は%単位で指定しています。
クラスを増やさずCSSの修正だけで、同じように表示されるようになりました。

もともと、テーブルで列幅を%指定する場合は、合計が100%にならなくても
大抵ブラウザが勝手に調整してくれるので、px指定するより柔軟性があって
安全ではないかと思います(セル結合有無に関わらず)。

paddingやborderを一緒に指定する場合は、px指定の場合と
若干横幅が変わってくるので、最終的には目視で微調整するのが確実ですね。

今回は以上です。ありがとうございました。

posted by baba at 19:12 | Comment(0) | TrackBack(0) | 情報
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。