[CSS]要素を横並びに配置できる display:table-cell の基本的な使い方と注意点
スポンサード
スマホやタブレット向けのサイトの構築をする時、また IE下位バージョンへの対応を切り捨てられる時であればどんどん使いたいですね。
親要素(ul.nav)に
これで TD 同様、
display:table-cell の基本的な使い方 のデモ
均等幅に配置するには、親要素(ul.nav)に
※親要素の幅を決めないといけないので、
要素を均等幅で配置するデモ
スポンサード
要素を横並びで配置するには、CSS の float
や display: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-cell
は display: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>
要素を均等幅で配置するデモ
スポンサード
コメント