REDLINE MAGAZINE | display:table関連を使って横並び均一配置REDLINE MAGAZINEトップページへ

すべてのエントリを見る

display:table関連を使って横並び均一配置

IE8でdisplay:table関連が使えるようになったとのことで実験。これ、素直にCSSだけで実現できたらいいなーと思ってる。あと何年後?って話だけど。(IE的な意味で)先に書いておきますが、全然実用性はないです。単なる実験というか練習というかやってみたいだけというか、好奇心の塊です(何

以下のサンプルはFirefox、IE8 Beta2、Safari、Operaで確認しました。

幅の決まってる親ボックスの中に均等に並べたい

※当然IE6.7ではまったく効いてないけど、今回それはスルーで。

サンプル・その1 横並びの画像を均等配置

少し前にこちらの横並びの画像を均等配置する | ヨモツネット(←こちらはIE6にも対応)を拝見してこれ素敵すぐる!と思ったので趣旨はその延長。まずは横並びの画像を均等配置してみる。

>>サンプルその1 画像を均一に並べる

幅500pxのボックス(グレー枠)を設けてdisplay:tableに。ulタグにはdisplay:table-rowを指定。その中にliタグを4つ。liタグにはdisplay:table-cellを与え、その中に幅100pxの画像を配置。liタグがその親ボックスの中で均等な幅で並んだ上でtext-aign:centerで中央寄せ。

<style type="text/css"><!--
div.sample{
	display:table;
	width:500px;
	border:2px solid #999;
	}
div.sample ul{
	display:table-row;
	}
div.sample ul li{
	display:table-cell;
	text-align:center;
	line-height:0;
	}		
--></style>

<div class="sample">
<ul>
<li><img src="0811_01_01.png" alt="サンプル画像" /></li>
<li><img src="0811_01_01.png" alt="サンプル画像" /></li>
<li><img src="0811_01_01.png" alt="サンプル画像" /></li>
<li><img src="0811_01_01.png" alt="サンプル画像" /></li>
</ul>
</div>

※div.sample ul liのline-height:0;はliタグを用いた際に下にできる隙間を回避するために入れただけ。

ただ、このままでは親ボックスで指定した幅よりもliタグ内容量の幅が増えても改行しないん。なので中身の幅が親で指定した幅以下になる時、もしくは横に広がってもいいやってケースでないと使えない。意味的におかしくないなら決まった個数ごとにul入れていってもいいんだろうけど。

サンプル画像

上のソース書く前に想定してたのは左図みたいな場所で画像並べる時に使えないかな、と。最初から絶対ここには4つしか並べない、幅も決まってるみたいなケース。

だけどよく考えたら別に最初から幅も個数も決まってるなら普通にfloatさせてmarginで位置整えたらいい話だよね。そもそも何のための均等配置って考えたら、あんま意味ないね、これ。

ちなみに、上のソースでliタグ内の画像サイズが個々に異なる場合、上のままだと幅は均等のまま、下揃えで揃う。liタグにはdisplay:table-cellを当ててるのでvertical-alignでmiddleでもtopでも揃える事は可能。

サンプル・その2 横並びのテキストを均等配置

今度は中身が画像じゃなくてテキストだったらの話。

>>サンプルその2 テキストを均一に並べる

今度はliタグに分かりやすいようにborder入れました。基本的にはサンプル1と同様。liタグに高さとvertical-align:middleを追加。別にvertical-alignを入れなければ上揃えになるだけ。サンプル1の方同様にline-height:0;を入れるとOperaとSafariではmiddleよりちょっと上に上がったのでline-heightは削除した。

<style type="text/css"><!--
div.sample{
	display:table;
	width:500px;
	border:2px solid #999;
	}
div.sample ul{
	display:table-row;
	}
div.sample ul li{
	display:table-cell;
	height:50px;
	text-align:center;
	vertical-align:middle;
	border:1px solid #f00;
	}		
--></style>

<div class="sample">
<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
</div>

幅が可変の親ボックスの中に均等に並べたい

サンプル・その3 横並びの画像均等配置・可変対応

サンプル1のおまけだけど、div.sampleの幅を%で指定すれば可変レイアウトにも対応できるねっていう趣旨。

>>サンプルその3 画像均等配置・可変対応

<style type="text/css"><!--
div.sample{
	display:table;
	width:70%;
	border:2px solid #999;
	}
div.sample ul{
	display:table-row;
	}
div.sample ul li{
	display:table-cell;
	text-align:center;
	line-height:0;
	}		
--></style>

<div class="sample">
<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>
</div>

左右ビタ揃えで均等に並べたい

サンプル画像

左図のレイアウトの時の話だけど、上のサンプルではtext-align:centerを使ってるからそれぞれのliタグの幅は均一にはなるけど、一番左と一番右が親ボックスに左右ビタで引っ付かない。とはいえ、一番左と一番右にtext-align:leftやらrightやらのclassを付けるのもスマートではないのでここは疑似クラスで対応してみる。

サンプル・その4 横並びの画像均等配置・左右はビタ揃え

>>サンプルその4 画像均等配置・左右ビタ

:first-childと:last-childを利用して最初と最後のliタグにそれぞれtext-alignを追加。

div.sample ul li:first-child{
	text-align:left;
	}
div.sample ul li:last-child{
	text-align:right;
	}

並べるのが3つの場合はキレイと思うけど、4つとかだとなんか、親ボックスの幅にもよるけど真ん中の2つと左右の間隔はやっぱなんか変になる。うーん。どうしよ。私は面倒くさがりやなので多分そういう時は真ん中2つの画像に余白を持たせて書き出してコントロールするな。セコいな。言い訳としては「下手にCSSにmargin入れるよりキレイかと思って!」とか言い張ってみましょうか。やっぱりセコいな。

サンプル・その5 IE8って:last-child効かないのでjQueryで。

IE8って:last-child効かない。てかCSS3、あまり対応してない・・・よね。パワーアップしてもイケてないぞ、IE。仕方がないのでjQueryに助けてもらう。こんなん追加。

$("div.sample ul li:last-child").css({"text-align":"right"});

>>サンプルその5 画像均等配置・左右ビタ IE8対応

今日はCSSだけで実験してみようと思ってたのに、やっぱりJSの力を借りる羽目になってしまった・・・。IEめ。

ちなみに今回私が使用してるIE8 beta2は IETester のものです。

<< Firefox3とFirefox2のselectの幅 | IE6 → 透過PNG+overflow=混ぜるな危険(追記有) >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/201

コメント (2)

どうもはじめまして、RSS登録していつもいつも拝見させてもらってます。
おお!これは便利そうと思い、一応僕の環境で試したところ、IEの6と7でかなりの崩れが見受けられます。
IEめーーーー!!

>wadadanetさん
コメントありがとうございますー。
IE6.7ではdisplay:table関連は効かないので今回はその子達は完全無視な内容です(n'∀')η
普通にliタグが並んでるだけになりますよね。displayの値に対する対応状況は各ブラウザでこんな感じ。
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20373825,00.htm
今回のdisplay:table関連はIE8からってことで、遠い未来にIE8が普及した時、こういうの使えたらいいなーというお話でした(n' ω 'n)
紛らわしくてごめんなさい><




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。