エフェクト
visibility
visibility は、要素を見えなくします。見えなくしても要素の場所は残るので、まわりのレイアウトは動きません。
構文
visible | hidden | collapseプレビュー
コード
.box {
display: flex;
}
.box > :nth-child(2) {
visibility: hidden;
}コントロール
解説
値の書き方
visible（初期値）、hidden、collapse のどれかを書きます。
このページのプレビューは、補助の宣言で箱を display: flex にして、2 番目の項目だけに visibility を書いています（.box > :nth-child(2) は「箱の 2 番目の子」を選ぶセレクタです）。hidden にすると 2 の項目は見えなくなりますが、ほかの項目は動かず、2 の項目があった場所が空きます。
場所は残る
hidden は要素を描かないだけで、レイアウトはそのままです。場所ごと取り除くなら display: none を書きます。
見えなくした要素は、クリックできず（pointer-events: none と同じ）、Tab キーでフォーカスも移らず、スクリーンリーダーにも読まれません。opacity: 0 も見えなくなりますが、こちらはクリックもフォーカスもでき、スクリーンリーダーにも読まれます。
子要素だけを見せられる
visibility は継承するので、hidden を書いた要素の子要素も見えなくなります。ただし、子要素に visibility: visible を書くと、その子要素だけは見えます。opacity: 0 では、子要素だけを見せることはできません。
collapse
フレックスボックスの項目に書くと、項目を詰めて隠します。項目は並びから外れますが、フレックスの行の高さ（交差軸の大きさ）は、項目があったときのまま残ります。これに対応しているのは Firefox だけで、Chrome・Edge・Safari では hidden と同じく、項目の場所が空きます。
表の行（tr など）や列（col など）に書くと、その行や列を詰めて隠します。Safari は列にはまだ対応していません。フレックスボックスの項目、表の行と列、ルビの注釈以外の要素では、hidden と同じです。
transition での切り替わり
visible とほかの値の間を transition すると、途中はずっと visible になります。そのため opacity と一緒に transition すると、消えるときはフェードアウトが終わってから見えなくなり、現れるときは最初から見えるようになって、フェードインが見えます。