• RSS

[CSS]要素を横並びに配置できる display:table-cell の基本的な使い方と注意点

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

要素を横並びで配置するには、CSS の floatdisplay:inline-block を用いるか、あるいは <table> タグを用いるか…の方法がありますが、
今回紹介させていただく display:table-cell でも同じことができます。

float などとの大きな違いは「要素を均等幅で配置できる」ので、スマホのような可変のデザインにも適している点だと思います。

display:table-cell のメリットと注意点

display:table-cell のメリット

個人的にはこの辺が display:table-cell を使うメリットだと思います。
・要素を<table>(テーブル)、<td>(セル)として扱うので、テーブルレイアウトの代用になる。
・テーブルのセルとして扱うので、要素の縦位置(vertivcal-align)を指定できる。
・要素を均等幅で配置できる。

display:table-cell の注意点

上記のような素晴らしいメリットがあるのになかなか積極的に使えない…理由は以下の注意点があるためです。
・IE7以下はアウト(IE8以降で利用可能)

スマホやタブレット向けのサイトの構築をする時、また IE下位バージョンへの対応を切り捨てられる時であればどんどん使いたいですね。


display:table-cell の基本的な使い方

display:table-cell は以下のような使い方をします。
/*CSSの記述*/
<style>
ul.nav	{
display:table;
}
ul.nav li{
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>
/*HTMLの記述*/
<ul class="nav">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>

親要素に display:table を指定し、テーブル扱いとする

display:table-celldisplay:table とセットで使う事が多いです。

親要素(ul.nav)に display:table を指定することで「表(<table>)」の扱いになりますので、子要素(ul.nav li)に display:table-cell を指定して <table> の「セル(TD)」と同じ扱いにすることができます。

これで TD 同様、vertical-align:middle で縦位置の指定もできるようになります。

display:table-cell の基本的な使い方 のデモ


均等幅で配置するために、親要素に table-layout:fixed を指定

上記までの例で子要素(ul.nav li)は横並びで配置できますが、均等幅の配置まではできません。

均等幅に配置するには、親要素(ul.nav)に table-layout:fixed を利用します。
※親要素の幅を決めないといけないので、width の指定も必要になります。
/*CSSの記述*/
<style>
ul.nav	{
display:table;
table-layout: fixed;
width:100%;
}
ul.nav li{
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>
/*HTMLの記述*/
<ul class="nav">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>

要素を均等幅で配置するデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す