要素の表示・非表示
display visibility opacity hidden
要素の表示・非表示を切り替える方法はいくつかあり、それぞれレイアウトやアクセシビリティへの影響が異なります。
🔗 このページはバニラJS（ブラウザ標準API）を使った表示・非表示の実装です。React / Framer Motion を使った実装は「見せる・隠す」ページを参照してください。
デモ：display（レイアウトから消える）
前の要素
表示切替要素
後の要素
非表示にすると後の要素が詰まる（レイアウトから除外される）
デモ：visibility（スペースは保持）
前の要素
表示切替要素
後の要素
非表示でもスペースが残る（レイアウトは変わらない）
デモ：opacity（透明度）
opacity: 1.0の要素
0でも要素は存在し、クリックイベントは発生する（pointer-events:none が必要）
比較：表示切替の方法
| 方法 | レイアウト | クリック | スクリーンリーダー | アニメーション |
|---|---|---|---|---|
| display:none | ❌ 消える | ❌ 不可 | ❌ 読まれない | ❌ 不可 |
| visibility:hidden | ✅ 保持 | ❌ 不可 | ❌ 読まれない | ✅ 可能 |
| opacity:0 | ✅ 保持 | ✅ 発生する | ✅ 読まれる | ✅ 滑らか |
| hidden属性 | ❌ 消える | ❌ 不可 | ❌ 読まれない | ❌ 不可 |
コード例
js
const el = document.querySelector('.box');
// display（DOMから除外）
el.style.display = 'none';
el.style.display = 'block'; // 'flex', 'grid' なども
// visibility（空間は残る）
el.style.visibility = 'hidden';
el.style.visibility = 'visible';
// opacity（透明化、イベントは残る）
el.style.opacity = '0';
el.style.opacity = '1';
// hidden 属性
el.hidden = true; // display:none と同等
el.hidden = false;
// フェードイン・アウト（opacityとtransitionの組み合わせ）
// CSS: .box { transition: opacity 0.3s; }
el.style.opacity = '0';
el.style.pointerEvents = 'none'; // クリック無効化
// 表示するとき
el.style.opacity = '1';
el.style.pointerEvents = '';NEWcontent-visibility: auto（レンダリング最適化）
画面外の要素のレンダリングをスキップし、長いページの描画パフォーマンスを大幅改善するCSSプロパティです。
js
/* CSS */
.section {
content-visibility: auto;
/* レンダリング前のサイズを指定（レイアウトシフト防止） */
contain-intrinsic-size: 0 500px;
}
/* 非表示にする（display:none と異なり、後で表示されたとき自動描画）*/
.section {
content-visibility: hidden;
}
/* ブラウザ対応: Chrome 85+, Edge 85+, Firefox 125+ */🤖 AIプロンプトテンプレート
以下のようなReactのstate管理による要素の表示・非表示切り替えのサンプルコードを生成してください： - useStateでboolean状態を管理してdisplay:none相当の表示切り替えを実装 - opacityとtransitionを組み合わせたフェードイン・アウトアニメーション - visibility:hiddenとdisplay:noneの違いを活かした使い分けパターン - モーダル・ドロップダウン・アコーディオンの表示切り替えの実装例 - content-visibility: autoを使った画面外要素のレンダリング最適化
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。