CSS: CSS表示と可視性
最終更新：2026-10-13
displayプロパティは、CSSの最も重要なプロパティの一つで、要素がページ上でどのようにレンダリングされ、レイアウトされるかを制御します。
displayプロパティ早見表
| 値 | 動作 | 幅/高さ | 典型的な要素 |
|---|---|---|---|
block |
新しい行、フル幅 | 設定可能 | div、p、h1-h6 |
inline |
同じ行、コンテンツ幅 | 無視 | span、a、em |
inline-block |
同じ行、寸法設定可能 | 設定可能 | button、input |
flex |
フレックスコンテナ | — | レイアウトコンテナ |
grid |
グリッドコンテナ | — | レイアウトコンテナ |
none |
完全に非表示 | — | 任意の要素 |
1. displayの値
(1) block
ブロック要素は1行全体を占有し、垂直方向に積み重なります：
▶ サンプル
▶ 試してみよう(2) inline
インライン要素は同じ行に留まり、コンテンツ幅のみを占有します：
▶ サンプル
▶ 試してみよう(3) inline-block
インラインの配置とブロックレベルの寸法を組み合わせます：
▶ サンプル
▶ 試してみよう2. 可視性と透明度
(1) visibility: hiddenとdisplay: noneの違い
▶ サンプル
▶ 試してみよう(2) opacity
要素の透明度（0〜1）を制御し、子要素を含むすべてのコンテンツに影響します：
▶ サンプル
▶ 試してみよう3. 要素の非表示方法の比較
| 方法 | スペース占有 | 表示 | インタラクティブ | アニメーション |
|---|---|---|---|---|
display: none |
❌ | ❌ | ❌ | ❌ |
visibility: hidden |
✅ | ❌ | ❌ | ✅ |
opacity: 0 |
✅ | ✅ | ✅ | ✅ |
position: absolute; left: -9999px |
❌ | ❌ | ✅ | ❌ |
❓ よくある質問
Q display: noneとvisibility: hiddenの違いは何ですか？
A display: noneは要素を完全に削除します——スペースは占有せず、周囲の要素が隙間を埋めます。visibility: hiddenは視覚のみを非表示にし、要素はスペースを占有し続けます。アニメーショントランジションには、opacity: 0とtransitionを組み合わせる方がスムーズです。
Q inline-block要素間の隙間を削除するにはどうすればいいですか？
A inline-block要素間の4pxの隙間は、HTMLの空白（改行やスペース）から来ています。解決策：親に
font-size: 0を設定してから子でリセットするか、タグを改行なしで同じ行に書きます。Q opacity: 0とvisibility: hidden——どちらがパフォーマンスが良いですか？
A opacity: 0の要素はクリックイベントをトリガーできますが、visibility: hiddenはできません。パフォーマンスは似ていますが、opacityはトランジションアニメーションをサポートしてスムーズな表示/非表示を実現でき、visibilityはトランジションできません。
📖 まとめ
displayはレイアウトの核心プロパティですblock、inline、inline-blockの違いを理解すると、要素の配置を制御するのに役立ちますdisplay: noneとvisibility: hiddenはどちらも要素を非表示にしますが、一方はスペースを占有し、もう一方は占有しません——ユースケースが異なります- モダンレイアウトでは、
display: flexとdisplay: gridが最も強力なレイアウトツールです
📝 練習問題
block、inline、inline-blockのボックスを含むページを作成し、配置とサイズの違いを観察してください。- ナビゲーションリンクを
inline-blockに設定し、幅、高さ、パディングで水平ナビゲーションバーを作成してください。 display: noneとvisibility: hiddenの違いを実演してください。display: inline-blockを使用して「ボタングループ」を作成し、空白の隙間の問題を処理してください。
