Visibility プロパティ

最終更新：2026-09-13

visibility Visibility プロパティ

visibility プロパティは要素が可視かどうかを制御します。display:none との決定的な違いは、hidden であってもレイアウト上のスペースを占める点です。要素は単に視覚的に描画されないだけです。初期値の visible は要素を通常通り表示します。このプロパティは継承され、スペースを残したまま要素を隠すのによく使われます。

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

📝 構文

visibility: visible | hidden | collapse;

⚙️ 値

値	タイプ	説明
`visible \| hidden \| collapse`	キーワード	要素が可視かどうかを制御する（hidden でもスペースを占める）。

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： visibility:hidden の要素はスペースを占めたままです。display:none はレイアウトから完全に削除します。

❓ よくある質問

Qvisibility:hidden と display:none の違いは何ですか？

Avisibility:hidden は要素を見えなくしますが、レイアウト上の元のスペースを維持します。文書フローに残り、スクリーンリーダーにも読まれます。display:none は要素をフローから完全に削除し、スペースを取らず、スクリーンリーダーからも隠します。スペースを残して隠すには visibility:hidden（例えばレイアウトの計測中やコンテンツの待機中）を、要素を完全に削除するには display:none を使ってください。

Qvisibility:hidden と opacity:0 の違いは何ですか？

Aどちらも視覚的に要素を隠しつつスペースを保ちますが、opacity:0 はクリックやイベントを許し、滑らかな遷移もサポートします。一方 visibility:hidden はマウスイベントへの応答を止め、クリックは通り抜け、遷移のサポートも限定的です。opacity は新しいスタッキングコンテキストを作りますが、visibility は子のレイアウトに影響せず、子は visibility:visible で個別に復元できます。フェードには opacity を、本当の相互作用の削除には visibility を選んでください。

Qvisibility は継承されますか？

Aはい。visibility は数少ない継承される CSS プロパティの一つです。親が hidden に設定されると、子は既定で隠れますが、子は visibility:visible で自分自身を強制的に表示できます。これはサブメニューや展開パネルで便利です。親コンテナを隠し、ホバー時に子だけを表示すれば、親自身のスタイルに触れずに済み、実装がシンプルで自己完結的になります。

Qvisibility は遷移（トランジション）できますか？

Avisibility は離散型のプロパティなので、遷移はふつうフェードではなく切り替わります。一般的な手法は opacity と一緒に遷移させることです。アニメーションの終わりに visibility を切り替えながら、opacity を 0 から 1 へフェードさせます。これで清潔なフェードイン／フェードアウトが得られ、モーダルやツールチップなどの表示／非表示アニメーションによく使われます。隠れている間は要素を非相互作用に保ちつつ、opacity 単独と同じ仕上がりが得られます。