display:noneとvisibility:hiddenの違い：隠した後の場所は残る？

カードを一枚隠したら、隣が左へ詰まった。別の指定では空白が残る。同じ「見えない」でも、レイアウトの扱いは違うよ。今回は、display:noneとvisibility:hiddenを、三枚のカードで比べよう。

CSSの基本を知っている人向け。作例はブラウザだけで操作できる。非表示にしてもデータを削除したり、秘密にしたりする仕組みではない点も分けて考えるよ。

display:noneは、表示する箱を作らない

.card {
  display: none;
}

通常のレイアウトでは、その要素が表示用の箱を作らなくなり、場所も占めなくなる。横並びのカードの真ん中を隠すと、後ろのカードが前へ詰まる。

HTMLから要素そのものを消したわけではない。JavaScriptで探せることも、ブラウザ内の文書構造（DOM）に内容が残っていることも、見た目の非表示とは別だよ。

visibility:hiddenは、場所を残して見えなくする

.card {
  visibility: hidden;
}

箱が占める場所は残し、表示を隠す。横並びの中央を隠すと、左右のカードは元の位置のまま、中央が空いたように見えるよ。

今回の作例では、子要素へvisibilityを上書きするような指定は使わない。複雑な入れ子や表のcollapseなど、別の振る舞いがある場合は条件を分けて確認しよう。

三枚のカードで、位置を比べよう

1. 最初はA・B・Cの三枚が見える。
2. 「display:none」を選ぶ。Bが消え、Cが左へ詰まる。Bの計測幅は0になる。
3. 「visibility:hidden」を選ぶ。Bの場所は空くが、Cは元の位置へ戻る。Bの計測幅は60pxになる。
4. 「表示する」へ戻すと、三枚そろう。

作例では、Bの枠を含む幅と、Cの左端の位置を表示する。Chromiumで、display:noneではBの幅0・Cが前へ移動し、visibility:hiddenではBの幅60px・Cの位置が維持されることを確認した。

「最初から試す」で表示する初期状態へ戻せるよ。作例の数値は、この小さなカードの条件での結果で、すべてのレイアウトが同じ数値になるわけではない。

見えなければ、同じ操作状態になるわけではない

MDNでは、visibility:hiddenの要素はフォーカスを受け取れず、アクセシビリティツリーからも取り除かれると説明されている。display:noneも表示と支援技術へ渡す情報に影響するため、説明を隠したいだけなのか、操作対象も外したいのかを考えよう。

一方、opacity:0は透明にする指定で、この二つと同じ意味ではない。透明なまま操作やフォーカスの対象が残る場合があるので、「見えなくする指定なら何でもよい」と置き換えないでね。

非表示は、秘密情報を守る仕組みではない

CSSで隠した内容も、配信したHTMLやデータに含まれていれば、利用者が確認できる場合がある。まだ公開しない本文や秘密情報を、非表示スタイルだけで守らないようにしよう。

実際の画面では、切り替え後に説明が失われないか、フォーカスが隠れた部品へ取り残されないかも見る。文字や図を減らすときは、色以外でも状態を伝える記事と同じように、必要な情報が残るか考えてみてね。