EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSS表示と可視性

displayプロパティは、CSSの最も重要なプロパティの一つで、要素がページ上でどのようにレンダリングされ、レイアウトされるかを制御します。

displayプロパティ早見表

値 動作 幅/高さ 典型的な要素
block 新しい行、フル幅 設定可能 div、p、h1-h6
inline 同じ行、コンテンツ幅 無視 span、a、em
inline-block 同じ行、寸法設定可能 設定可能 button、input
flex フレックスコンテナ — レイアウトコンテナ
grid グリッドコンテナ — レイアウトコンテナ
none 完全に非表示 — 任意の要素

displayの値

block

ブロック要素は1行全体を占有し、垂直方向に積み重なります：

サンプル

HTML 
<style>
.block {
  display: block;
  width: 200px;
  background: #e3f2fd;
  padding: 10px;
  margin: 5px 0;
}
</style>
<div class="block">ブロック要素1</div>
<div class="block">ブロック要素2</div>
▶ 試してみよう

inline

インライン要素は同じ行に留まり、コンテンツ幅のみを占有します：

サンプル

HTML 
<style>
.inline {
  display: inline;
  background: #fce4ec;
  padding: 5px;
}
</style>
<span class="inline">インライン1</span>
<span class="inline">インライン2</span>
<span class="inline">インライン3</span>
▶ 試してみよう

inline-block

インラインの配置とブロックレベルの寸法を組み合わせます：

サンプル

HTML 
<style>
.inline-block {
  display: inline-block;
  width: 150px;
  height: 80px;
  background: #e8f5e9;
  margin: 5px;
  text-align: center;
  line-height: 80px;
}
</style>
<div class="inline-block">ボックス1</div>
<div class="inline-block">ボックス2</div>
<div class="inline-block">ボックス3</div>
▶ 試してみよう

可視性と透明度

visibility: hiddenとdisplay: noneの違い

サンプル

HTML 
<style>
.hidden {
  visibility: hidden;
  background: #ffebee;
  padding: 10px;
}
.none {
  display: none;
}
.visible {
  background: #e8f5e9;
  padding: 10px;
}
</style>
<div class="visible">表示されている要素</div>
<div class="hidden">非表示だがスペースは占有</div>
<div class="visible">この要素はそのまま留まる</div>
▶ 試してみよう

opacity

要素の透明度（0〜1）を制御し、子要素を含むすべてのコンテンツに影響します：

サンプル

HTML 
<style>
.semi-transparent {
  opacity: 0.5;
  background: #2196f3;
  color: white;
  padding: 20px;
}
</style>
<div class="semi-transparent">50%透明（すべてのコンテンツに影響）</div>
▶ 試してみよう

要素の非表示方法の比較

方法 スペース占有 表示 インタラクティブ アニメーション
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はトランジションできません。

📖 まとめ

📝 演習

  1. block、inline、inline-blockのボックスを含むページを作成し、配置とサイズの違いを観察してください。
  2. ナビゲーションリンクをinline-blockに設定し、幅、高さ、パディングで水平ナビゲーションバーを作成してください。
  3. display: noneとvisibility: hiddenの違いを実演してください。
  4. display: inline-blockを使用して「ボタングループ」を作成し、空白の隙間の問題を処理してください。
100%