THE HAM MEDIA BLOG

CSS:displayプロパティによる変化一覧

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
INLINE
BLOCK
display
CSS

CSS disolay?

CSSのプロパティで「display」ってありますけど、
displayプロパティってどのくらい利用していますか?

あまり多様するようなプロパティではないのですが、
それでもdisplayプロパティを使う時って出てくると思います。

このdisplayプロパティは色々な値を持っているのですが、
どんな値がどんなことになるのかって実は僕もあまり知らなかったりします。

そんなときに、
Understanding CSS Positioning part 1 | KilianValkhof.com
というエントリーを読んだので、いっそ勉強してみようと思い、
displayプロパティについて書いてみる事にしました。

ボックスとインライン

そもそもボックスインラインって何?
という人が多いと思います。

ボックスについて - CSSリファレンス」というところに、
わかりやすい説明が書いてあったので、まずはそこを参照してみてください。

簡単に言うと、block要素は行を独り占めできるもの、
inlineは行の中に入っているものなんてイメージで僕は認識している。
厳密に言うと違うかもしれないですが、あくまでイメージとして。

どんな風に違うかは実際にやってみましょう。

block

sample
sample

今回は単純にblockを指定しただけなので上のような結果になりました。
paddingやmarginをつけてもその値通り変化します。

inline

sample
sample

これも二つともinlineを指定しただけ。
尚、inlineの場合は改行をすると、少し隙間が空いてしまうようです。

隙間をなくすためには、改行をしないか、
もしくは改行した行の最後に<!--をつけ、
改行した後の頭に-->をつけてコメントアウトしておくだけで隙間がなくなります。

sample
sample

none

sample
sample

見てわかるように表示されなくなります。
つまり非表示ということです。
これを多様してしまうと、SEO的にスパムとしてみなされる可能性もあるので、
あまり多用しない方がいいと思います。

inline-block

どちらにもpadding:20pxを指定してみる。

・ inline-blockの場合

sample
sample

・ inlineの場合

sample
sample

inlineの場合は横のpassingしか適応されないのに対して、
inline-blockの場合上下にも適応される。

つまりinline上に配置されたblock要素ということになります。

list-item

サンプルテキスト
サンプルテキスト
サンプルテキスト

list-itemは「li」を指定したのと同じような表示になります。

run-in

どちらにもpadding:20pxを指定してみる。

・ run-inの後にくるのがblockの場合

sample
sample

・ run-inの後にくるのがinlineの場合

sample
sample

これは、後ろに続くのがblockの場合、
そのblockの最初のinlineとして表示されるため、
見た感じではinlineが続いているように思える。
しかしblock以外のinlineが後ろに続く場合は、
独立したblockとしてみなされて表示される。

他にもあるけれど

displayの値は他にもcompactやtableというのもあるが、
今回は省略させてもらいます。

今回のでわかったのですが、inline-blockは高さも確保できる。
これを使ったトリックもあるのですが、その紹介はまた今度。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。