[CSS]displayをまとめてみたらやっぱりinline-block一択だなと思った件




displayをまとめてみたらやっぱりinline-block一択だなと思った件

displayプロパティってよく使いますよね。blockとか特に。
でも今回は「要素の横並び」についてまとめてみましたので、誰かの役に立てば幸いです。

まず今回はdisplayプロパティについてなのでfloatは無視して進めていきます。

displayプロパティの値

まずはdisplayプロパティの値は何があるのかをまとめておきます。
と言ってもdisplayプロパティの値はたくさんあるので「MOZILLA DEVELOPER NETWORK(MDN)」のdisplay概要を貼っておきますので興味があるかたはご覧ください。

ということで今回はdisplayプロパティの中でも「inline」「inline-block」「table-cell」「flex」について書いていこうと思います。

inline

横並びにしたい要素に対してdisplay:inlineを指定して横並びにします。

inlineの難点は親要素を突き破ってしまうことと、左右に隙間が空いてしまうことです。
左右の隙間の解消法はこちらの記事を参照してください。
[CSS]display:inline-blockでできる隙間をなくす方法(inlineにも使えます)

またinlineはwidth、height、上下マージンは無視されてしまいます。

See the Pen rWwKEL by mitsuki sagayama (@sagayama) on CodePen.

inline-block

inline-blockも横並びにしたい要素に対してdisplay:inline-blockを指定します。

親要素は突き破りませんが、inline同様、左右に隙間が空いてしまいます。
解消法は下の記事をごらんください。
[CSS]display:inline-blockでできる隙間をなくす方法

inline-blockはwidth、height、margin、paddingすべて効きます。

See the Pen PbjBzL by mitsuki sagayama (@sagayama) on CodePen.

table-cell

横並びにしたい要素にたいしてdisplay:table-cellを指定します。

table-cellはマージンが無視されてしまいます。
tdのような扱いができる値です。

See the Pen ENXppQ by mitsuki sagayama (@sagayama) on CodePen.

flex

flexはCSS3プロパティです。
横並びにしたい要素の親要素にdisplay:flexを指定します。

一番の難点はIEが全滅という点でしょうね。

See the Pen pNwVOZ by mitsuki sagayama (@sagayama) on CodePen.

まとめ

要素を横並びにするためには、どうしたらいいか?(displayを使って)
という内容で書いてきましたが、inlineはwidth、height、上下マージンが無視されて融通がきかなそう、table-cellはマージンが無視される、flexはIE全滅。
というわけで今のところinline-block一択でお仕事はしております。

隙間をどう埋めるかがありますが、使い勝手の良いプロパティだと思います。

ただぶっちゃけちゃうとmainとasideなどのレイアウトにはまだfloatを使ってます。
理由は使い慣れてるからです。

その他の細かいレイアウトはinline-blockです。そろそろ統一して書かないとですね。

タイトルとURLをコピーしました