display（表示形式）プロパティ

最終更新：2026-09-13

display display（表示形式）プロパティ

display プロパティは要素がページでどう表示されるかを定義します。ブロックレベル要素、インライン要素として振る舞うか、Flex や Grid などのモダンなレイアウトモデルを使うかを決めます。CSS レイアウトの中で最も基本的で強力なプロパティの一つであり、ほぼすべての要素のドキュメントフロー内の振る舞いを変えられます。

カテゴリ
初期値	inline
継承	いいえ
適用対象	all
アニメーションタイプ	discrete
CSS バージョン	CSS1
状態	標準

📝 構文

display: block | inline | inline-block | flex | grid | none | table | table-row | table-cell | contents | flow | flow-root | list-item;

⚙️ 値

値	タイプ	説明
`block \| inline \| inline-block \| flex \| grid \| none \| table \| table-row \| table-cell`	キーワード	定義済みの表示タイプ。
`contents \| flow \| flow-root \| list-item`	キーワード	その他の表示タイプ。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
display	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： display:none は要素をドキュメントフローから完全に削除し、スペースを占めず、スクリーンリーダーからもアクセスできなくなります。視覚的に隠すだけでスペースを維持したい場合は visibility:hidden を使ってください。

重要： インライン要素では width、height、上下の margin は効果がありません。設定可能な寸法で水平レイアウトが必要な場合は inline-block や flex を使ってください。

❓ よくある質問

Qinline、inline-block、block の違いは何ですか？

Ainline 要素は水平に流れ、width、height、上下の margin を受け付けず、内容でサイズが決まります。上下の padding は視覚には影響しますがレイアウトは動かしません。block 要素は 1 行を占め、width、height、すべての margin を受け付けます。inline-block は両方を兼ね、inline のように水平に流れつつ block のように寸法と margin を受け付けます。水平に並べつつ寸法を制御したい場合は inline-block を使ってください。

Qdisplay:flex と display:grid はそれぞれいつ使うべきですか？

Aflex はナビバー、リスト、中央揃え、2 カラムの行など、単一の主軸を持つ一次元レイアウト向けです。子は軸に沿って自動的な配置と伸縮とともに並びます。grid は行と列を同時に制御する二次元レイアウト向けで、ページ全体の骨組み、カードのグリッド、複雑な配置に使います。簡単な目安は、1 行または 1 列なら flex、格子状なら grid です。

Qdisplay:none と visibility:hidden の違いは何ですか？

Adisplay:none は要素とそのサブツリーを描画から完全に削除し、スペースを占めず、スクリーンリーダーにも読まれず、操作もできなくなります。visibility:hidden は視覚的に隠すだけで、スペースは保持され、スクリーンリーダーにも読まれます。display:none の要素の JS イベントリスナーは残っていますが発火しません。表示/非表示の切り替えに遷移アニメーションを付けるなら、visibility と opacity の組み合わせが適しています。

Qなぜ inline 要素に width が効かないのですか？

Aspan や a のようなインライン要素は行ボックスを生成しないため、ブラウザーはその width、height、上下の margin を無視します。インライン要素に寸法を持たせるには display:inline-block や block に変更するか、flex や grid のコンテナに入れて flex/grid アイテムにします。そうすれば width が通常通り効き、上下の padding も周囲のレイアウトを押し動かせるようになります（普通の inline では起きません）。