kawama.jp

display:tableが便利

カテゴリ: CSS — タグ: , , — 2013年7月5日 21:15 — Comments (0)hatebu count

display:tableという、cssのプロパティがあります。
要素を擬似テーブルにすることができるというもので、こんなふうに使います。

<div style="display:table;">
  <div style="display:table-cell;">左</div>
  <div style="display:table-cell;">中央</div>
  <div style="display:table-cell;">右</div>
</div>

floatでも同じことができますが、display:tableのほうがだいぶ楽です。
崩れとかあまり気にしなくてよくなるし、cssの記述量もかなり減ると思います。

さらにwidth:100%とかvertical-alignとかも使えるのでかなり柔軟にレイアウトできるようになります。

例えばこんなのとか。

<div style="display:table;width:500px;">
  <div style="display:table-cell;background-color:orange;padding:10px;">左<br>左<br>左<br>左<br>左</div>
  <div style="display:table-cell;background-color:limegreen;width:100%;padding:10px;vertical-align:middle;text-align:center;">中央</div>
  <div style="display:table-cell;background-color:yellow;vertical-align:bottom;padding:10px;">右</div>
</div>





中央

各ブラウザの対応状況はこちらを参照。

http://fmbip.com/litmus/

気になるのはieの対応状況ですが、8以降は対応してるようです。

そろそろie7も切り捨てられる頃合いだと思うので、pcサイトでも今後は利用する機会が増えてくるんじゃないでしょうか。

自分はガンガン使っていこうと思ってます。

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Copyright (C) 2002 - 2017 kawama All Rights Reserved. — Powered by WordPress