プラカンブログSTAFF BLOG

2015.07.21

今頃ですが、便利になったCSSの「display」

title

こんにちは。デザイナーの鈴木です。
3回目のブログ登場です。

前回まではプラグインの紹介をしてきましたが、今回はCSSについて紹介します。

Windows XPがサポートを終了し、ブラウザのサポートがIE8以上になったことで、レイアウトの幅が広くなりました。
その中でも便利になった「display」についてです。

「display」の概要

displayは、ブロックレベル・インライン等の要素の「表示形式」を指定するプロパティです。

ブロック要素とは、見出し、段落、リストなどの一つのまとまった単位として表される要素で、インライン要素とは、主に文章の一部として利用される要素です。

ブロック要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。
また「none」を使用すると、要素を非表示にでき、すべての子孫要素も非表示にします。

「display」の値

下記は一部ですが、値を紹介します。

none 要素の表示を非表示にします。すべての子孫要素も非表示になります。
inline 要素は、1つ以上のインライン要素ボックスを生成します。
block 要素は、ブロック要素ボックスを生成します。
list-item 要素は、コンテンツのためのブロックボックスを1つと、リストマーカ用のインラインボックスを1つ生成します。
inline-block 要素はブロック要素ボックスを生成しますが、周囲のコンテンツは一個のインラインボックスとして認識し、一緒に流し込まれるようになります。
table <table> 要素と同じように認識されます。
table-cell <td> 要素と同じように認識されます。

とりわけ便利な「display: table」

今まで段組みのレイアウトの場合「float」を使用してきましたが、「display: table」でも実現できるようになりました。

<特徴>

tableとして認識されるので、カラム落ちすることはなく、カラムの高さは、一番縦長の内容と同じ高さになります。
内容量が異なるナビゲーションのa要素でも、高さがそろい、クリック範囲が統一でき、便利です。

img01

 

CSSも簡単で、次の2点を覚えていれば問題ありません。
・全カラムを包含する要素にdisplay: table;を適用
・各カラムの要素にはdisplay: table-cell;を適用

.container{
  display: table;
}
.container a{
  display: table-cell;
}

<天地中央揃えが可能>

今まで「float」で段組みしていた場合、「vertical-align: middle;」が有効ではなく、悩ましいところでしたが、tableとして認識されるので「vertical-align: middle;」も有効になり、内容量が異なる要素の天地中央揃えが可能になりました。
もちろん天地頭揃えや尻揃えにも対応しています。

まとめ

今まで「float」で対応していたところが、「display: table」で対応可能になり、ソースも簡素化し、いいことずくめです。

またレスポンシブに対応したサイト作りが増え、画像ではなくデバイスフォントの対応が必要になり、内容量にも対応できる「display: table」には助けられています。
まだ「display: table」を使用していない方は是非試してみてください!

他にも「display」の値はあるので、少しずつ研究し、より良いサイト作りに活かしたいと思います。

今回はここまでになります。
それではまたの機会に!

参考リンク

下記サイトは制作するに当たって参考にしたサイトになります。
「display」をもっと詳しく紹介しています。
詳細が知りたい方はどうぞ!

https://developer.mozilla.org/ja/docs/Web/CSS/display
https://app.codegrid.net/entry/css-table-1
http://www.htmq.com/style/display.shtml

この記事は、SUZUKI が書きました。