CSS：displayプロパティによる変化一覧
CSSのプロパティで「display」ってありますけど、
displayプロパティってどのくらい利用していますか？
あまり多様するようなプロパティではないのですが、
それでもdisplayプロパティを使う時って出てくると思います。
このdisplayプロパティは色々な値を持っているのですが、
どんな値がどんなことになるのかって実は僕もあまり知らなかったりします。
そんなときに、
「Understanding CSS Positioning part 1 | KilianValkhof.com」
というエントリーを読んだので、いっそ勉強してみようと思い、
displayプロパティについて書いてみる事にしました。
ボックスとインライン
そもそもボックスとインラインって何？
という人が多いと思います。
「ボックスについて - CSSリファレンス」というところに、
わかりやすい説明が書いてあったので、まずはそこを参照してみてください。
簡単に言うと、block要素は行を独り占めできるもの、
inlineは行の中に入っているものなんてイメージで僕は認識している。
厳密に言うと違うかもしれないですが、あくまでイメージとして。
どんな風に違うかは実際にやってみましょう。
block
今回は単純にblockを指定しただけなので上のような結果になりました。
paddingやmarginをつけてもその値通り変化します。
inline
これも二つともinlineを指定しただけ。
尚、inlineの場合は改行をすると、少し隙間が空いてしまうようです。
隙間をなくすためには、改行をしないか、
もしくは改行した行の最後に<!--をつけ、
改行した後の頭に-->をつけてコメントアウトしておくだけで隙間がなくなります。
none
見てわかるように表示されなくなります。
つまり非表示ということです。
これを多様してしまうと、SEO的にスパムとしてみなされる可能性もあるので、
あまり多用しない方がいいと思います。
inline-block
どちらにもpadding:20pxを指定してみる。
・ inline-blockの場合
・ inlineの場合
inlineの場合は横のpassingしか適応されないのに対して、
inline-blockの場合上下にも適応される。
つまりinline上に配置されたblock要素ということになります。
list-item
list-itemは「li」を指定したのと同じような表示になります。
run-in
どちらにもpadding:20pxを指定してみる。
・ run-inの後にくるのがblockの場合
・ run-inの後にくるのがinlineの場合
これは、後ろに続くのがblockの場合、
そのblockの最初のinlineとして表示されるため、
見た感じではinlineが続いているように思える。
しかしblock以外のinlineが後ろに続く場合は、
独立したblockとしてみなされて表示される。
他にもあるけれど
displayの値は他にもcompactやtableというのもあるが、
今回は省略させてもらいます。
今回のでわかったのですが、inline-blockは高さも確保できる。
これを使ったトリックもあるのですが、その紹介はまた今度。
