display

レイアウト・配置

要素の表示方法を指定するプロパティです。ブロック要素、インライン要素、フレックスコンテナ、グリッド、noneなど、様々な表示形式を設定できます。インライン・インラインブロックの違いも重要です。

構文

Syntax
display: block | inline | inline-block | flex | grid | none | table | ...

コード例

例 1

display: flex;
実行結果
Item 1
Item 2
Item 3

要素をフレックスコンテナにして、子要素を柔軟にレイアウト

例 2

display: grid;
実行結果
1
2
3
4
5
6

要素をグリッドコンテナにして、2次元レイアウトを実現

例 3

display: none;
実行結果
要素が非表示になります

要素を完全に非表示にする（領域も確保されない）

例 4

display: inline;
実行結果
inline1inline2inline3
display: inline（幅・高さ指定不可、横並び）

インライン要素として表示。幅・高さ・margin/paddingの上下が効かない。

例 5

display: inline-block;
実行結果
inline-block1inline-block2inline-block3
display: inline-block（幅・高さ指定可、横並び）

インライン要素のように並ぶが、幅・高さ・margin/paddingの上下も指定できる。

💡 TIPS

flexとgridはモダンレイアウトの基本。display: noneとvisibility: hiddenの違い、inline/inline-blockの違いも覚えておこう。

⚠️ よくある間違い

display: noneを使うと要素が完全に消えるため、アニメーションが効かない。inlineは上下margin/paddingやwidth/heightが効かない。inline-blockは横並び時の隙間に注意。

関連プロパティ

ブラウザサポート

全ブラウザ対応