visibility

要素が使う空間を残したまま、見える・見えないを切り替えるプロパティ。表の2行目を隠し、空間が残る場合と折りたたまれる場合を比べます。

遊んでみよう

表の2行目で、非表示と空間の扱いを比較

visibilityを2行目へ適用する3行の表
1	前の行
2	変更する行
3	次の行

visible — 3行すべてを表示しています

CSS

.element visibility: visible;

値のパターン

表示の状態 visibility

visibilityの構成要素

01visible

要素を表示する

初期値です。要素の箱と中身を通常どおり描画します。

02hidden

空間を残して隠す

要素は見えなくなりますが、配置で使っていた空間はそのまま残ります。

03collapse

表の行や列などを折りたたむ

表の行・列やFlexboxの項目などで空間も取り除きます。通常の要素ではhiddenと同様です。

早見表

初期値はvisibleです。一般的な要素を一時的に隠し、配置を保ちたいときはhiddenを使います。

01visible表示する初期値

02hidden空間を残して非表示配置を保つ

03collapse行や列などを折りたたむ対象に注意

04inherit親要素の値を使う継承値

よくある使い方

入力エラーの場所を先に確保する

エラーメッセージを通常は隠して空間だけ残し、表示時にフォームが大きく動くのを防ぎます。

.error[aria-hidden="true"] { visibility: hidden; }

同じ位置で内容を切り替える

重ねたパネルの大きさを保ちながら、現在見せる内容だけをvisibleにします。

.panel:not(.is-current) { visibility: hidden; }

表の行を折りたたむ

表の行を一時的に除くとき、collapseなら列幅の計算への影響を抑えて空間も取り除けます。

tr.is-collapsed { visibility: collapse; }

ポイント

隠しても、配置の空間は残る。

visibility: hiddenは要素を描画せず、通常はアクセシビリティツリーやタブ移動の対象からも外しますが、レイアウト上の空間は残します。空間ごと取り除くならdisplay: none、半透明にするならopacityを使います。visibilityはすべての要素に適用でき、子要素へ継承されます。hiddenを継承した子孫でもvisibility: visibleを明示すると表示できます。collapseは表の行・列やFlexboxの項目などで空間を除きますが、通常の要素ではhiddenと同様に扱われ、ブラウザー差にも注意が必要です。