← カテゴリ一覧に戻る

表示・非表示（display, visibility）

displayvisibilityopacitycontent-visibility

要素の表示・非表示を制御するには複数の方法があります。それぞれレイアウトへの影響やインタラクティビティが異なるため、用途に応じて使い分けることが重要です。

デモ：3つの非表示手法の違い

以下の3行のうち、2行目の要素は各手法で非表示にされています。

display: none — レイアウトから完全に除去

Box 1
Box 2
Box 3

Box 2は消え、Box 3がBox 1の隣に来る

visibility: hidden — スペースを保持したまま不可視

Box 1
Box 2
Box 3

Box 2の空間は残り、Box 3の位置は変わらない

opacity: 0 — 透明だがスペースもイベントも保持

Box 1
Box 2
Box 3

Box 2は透明。空間もマウスイベントも有効（ホバーできる）

コード例

/* display の主な値 */
.block        { display: block; }
.inline       { display: inline; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.grid         { display: grid; }
.contents     { display: contents; } /* ラッパー要素自体を消す */
.hidden       { display: none; }     /* レイアウトから完全除去 */

/* visibility */
.invisible    { visibility: hidden; }  /* 空間は保持 */
.visible      { visibility: visible; } /* デフォルト */

/* opacity */
.transparent  { opacity: 0; }   /* 透明（イベント有効） */
.semi         { opacity: 0.5; }  /* 半透明 */
.opaque       { opacity: 1; }    /* 不透明（デフォルト） */

/* display: contents — ラッパーの見た目を消す */
.wrapper {
  display: contents; /* このdivは無かったかのようにレンダリング */
}

/* トランジションと組み合わせ */
.fade {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fade.visible {
  opacity: 1;
}

比較：3つの非表示手法

観点display: nonevisibility: hiddenopacity: 0
レイアウト上のスペース❌ 消える✅ 保持✅ 保持
マウスイベント❌ 無効❌ 無効✅ 有効
スクリーンリーダー❌ 読まない❌ 読まない✅ 読む
CSSトランジション❌ 不可（直接）✅ 可能✅ 可能
主な用途条件付き表示レイアウト維持の非表示フェードアニメーション

NEWcontent-visibility: auto（2021）

画面外のコンテンツのレンダリングをブラウザがスキップするようにします。長いページのパフォーマンスを大幅に改善できる強力な最適化プロパティです。

/* 画面外コンテンツのレンダリングをスキップ */
.article-section {
  content-visibility: auto;
  /* ブラウザがレイアウト計算用に使うヒント */
  contain-intrinsic-size: 0 500px;
}

/* @starting-style — display:none からのアニメーション（2023） */
.dialog {
  opacity: 1;
  transition: opacity 0.3s, display 0.3s allow-discrete;
}
.dialog[hidden] {
  display: none;
  opacity: 0;
}
@starting-style {
  .dialog {
    opacity: 0; /* 表示開始時の初期値 */
  }
}

@starting-style（Chrome 117+, Firefox 129+）を使うと、display: none からの表示時にもトランジションを適用できます。

🤖 AIプロンプトテンプレート

CSSのdisplay・visibility・opacityプロパティを使った表示・非表示の実装例をReact + Tailwind CSSで作成してください。

要件:
- display: none / block / inline / inline-block / flex / grid の違いを視覚的に比較
- visibility: hidden と display: none の挙動の違い（スペース占有の有無）
- opacity: 0 と display: none と visibility: hidden の3つの比較（アニメーション対応の違い含む）
- ボタンクリックで要素の表示・非表示を切り替えるインタラクティブデモ
- CSSトランジションを使った表示切り替えアニメーション（opacity + visibility の組み合わせ）
- レイアウトへの影響の違いを分かりやすく示すデモ

3つのプロパティの違いをインタラクティブに比較できるデモにしてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo