display:tableという便利な子

http://c-brains.jp/blog/wsg/13/04/08-111325.php
【CSS】画像を上下中央に表示する(IE7以下にも対応させる) – バシャログ。

上記のサイトでも取り上げられていたが、
CSSのdisplayプロパティにtable及びtable-cellというものがあって
それを使用することでHTMLのtableタグを使わずにtableを組むことができる。
ただし、IE7以下には対応していないので個別で対応する必要がある。
しかもfloatとは違ってこのプロパティはtableなので高さ(height)もがっちりと管理できるので便利。
幅と高さを両方とも指定してボックスを横並びにしてグローバルナビを作ることも可能だ。

http://www.marguerite.jp/Nihongo/WWW/RefCSS/display.html
display プロパティ。 – CSSリファレンス

詳細をちゃんと調べたら、CSSリファレンスに詳しく記述があった。
このCSSリファレンスによれば、tableとtable-cell以外にもtable系のdisplayプロパティがあるようだが、
ググってみる限りは多くの人はtableとtable-cellの2種類のみを実際には用いているようだ。
(なので、この2つをマスターすれば実用的には問題ないということであろう)

簡単な表組みであれば従来のHTMLのtableタグ(+CSS)で問題ない。
(と思うのです。。古めかしいと仰られる方もいるかと思いますが。)
しかしながら、このtableプロパティを応用することでfloatで段組(マルチカラム)をするより
簡単に確実にデザインできるような気がするのです。

http://www.geocities.jp/multi_column/
CSSによる段組(マルチカラム)レイアウト講座

通常のfloatで組む場合でもパターンは限られてくるので
上記のURLの講座を練習して慣れてしまえば問題ないようには感じます。

しかしながら、今回は「display:table」を使うという話ですので
floatを使わずにカラムを実現してみる。

<div id=”body”>
<span class=”left”>左</span>
<span class=”center”>中央</span>
<span class=”right”>右 </span>
</div>

このようにHTMLがあるとしたら

#body {
display: table;
}

.left, .center, .right {
display: table-cell;
}

CSSはこのように組めば良い。floatよりコードが若干シンプルにできる。
大枠の部分にdisplay: tableを入れて、個別の要素にdisplay: table-cellを振れば良い。

#body {
display: table;
width: 100%;

}

.left, .center, .right {
display: table-cell;
}

.left .right {
width: 20%;
}

.center {
width: 60%;
}

先に上げたものに幅を指定して左右それぞれ全体の20%、真ん中を60%で指定してみた。
もちろん相対(%)ではなくて、固定(px)でも組める。

このようにしてカラムを組んでいけばリキッドレイアウトもできてしまうと。
便利良いよね、、IEの存在がなければすぐに使うのにぃ~と思ったりしました。
IEの影響の少ないスマートフォン専用サイト等には良いのかもね。

いかがでしょう?便利じゃないでしょうか。
また勉強しながら続編を書きたいと思います!

コメントを残す