HTMLの要素をdisplayで制御することがよくある。
block要素をinline要素にしたり、その逆もしかり。
要素のもつ特徴はある程度そのままで、見た目上の制御を行いたいときに利用するものと認識している。
このdisplayプロパティで、少しはまったので調べた結果を取りまとめ。
そもそもdisplayは下記のページで書かれている通りの値が想定されている。
CSS/Properties/display http://www.w3.org/wiki/CSS/Properties/display
- inline
- block
- list-item
- run-in
- inline-block
- テーブル系(table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption)
- none
- inherit
ただし、ブラウザの開発ツールを使って補完されるリストを見るとさらに種類がある。
ブラウザで追加しているのか、上記のドキュメントが古いだけなのかはわからないが、
Webプロダクトを参照するブラウザを限定してしまえば、さまざまな種類を使えるらしい。
しかし、ブラウザを限定できない時は基本的に、inlineとblockとrun-inを使うようにした方がよさそうであるという見解に個人的になっている。
run-inは、子要素に合わせてdisplayの値が切り替わるのでよさそう。IEもFirefoxもChromeも今の使い方の範囲では問題なさそうに見える。
inline-blockが使えるのかと思ったが、ブラウザに依存して想定通りに動作しない。
ちょっと古めだが下記の記事があった。
CSSは、簡単に組めそうなところではまる。一つのはまりポイントとしてdisplayがあるかもと考えて、取りまとめ。