CSSのdisplay: block, inline, inline-blockはどれを使うべき?

この投稿では、スタイルシートcssによく出てくる、displayプロパティの適切な使い方について説明させていただいております。
displayには、様々なプロパティがあって、どこでどれを指定すればよいかわからなくなるときがあります。でも、基本を押さえておけばしっかり使いこなすことができます!

displayプロパティとは

displayプロパティは、要素の表示形式を指定するのに使います。大きく分けて、ブロック要素とインライン要素に分かれます。

ブロック要素

ブロック要素は、幅いっぱいに表示されます。次のような、ブロック要素の画像とテキストが並ぶ場合、テキストは画像の下にまわります。ボーダーを付けているので、わかりやすいと思います。

坂商デザイン制作

html

css

インライン要素

インライン要素は、1行に連続して表示されます。そして、ボーダーは画像の高さに関係なく、1行の高さになっていることがわかります。インライン要素は、高さを指定できない要素です。

坂商デザイン制作

html

css

インライン-ブロック要素

インライン-ブロック要素は、1行に連続して表示され、要素の高さを持てるようになります。

html

css

坂商デザイン制作

inline-blockの用例

ナビメニューによく見られる、横並びのリストを例にinline-blockの使い方をおさらいしたいと思います。

通常のlist-item

通常のリストでメニューを作成すると、次のようになると思います。displayは、list-itemという形式で、折り返されます。

html

css
なし

inline要素でのナビ

inline要素にすると、横並びになります。しかし、ボーダーはpaddingの高さを無視してテキストのまわりに引かれます。

html

css

inline-block要素のナビ

inline-block要素にすると、ボーダーが高さを認識し、ナビメニューらしいスタイルにすることができました。

html

css

記事のまとめ

以上の基本がしっかりわかっていれば、どのようなときにどのdisplayプロパティにすれば良いか、疑問に思わずWeb制作を進められると思います!
ちなみに、displayプロパティが、inlineやinline-blockの要素は、要素間に改行があると、改行が半角スペースになって要素間についてしまいます。このスペースがいやだという場合、解決策として親要素に、font-size: 0;を指定することでスペースが消えます。子要素のfont-sizeは指定しなおす必要があります。

html

css

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です