CSS ・ レイアウト
visibility
表示・非表示（場所は残る）
要素を見えなくします。display: none と違い、見えなくなった要素の場所はそのまま残り、レイアウトは変わりません。
01
サンプルコード
HTML
1<div class="row">
2 <div class="box">A</div>
3 <div class="box hidden">B</div>
4 <div class="box">C</div>
5</div>
6<div class="row">
7 <div class="box">A</div>
8 <div class="box none">B</div>
9 <div class="box">C</div>
10</div>
CSS
1.row {
2 display: flex;
3 gap: 8px;
4 margin-bottom: 10px;
5}
6.box {
7 width: 60px;
8 padding: 10px;
9 text-align: center;
10 background: #f6ead8;
11 border: 1px solid #b68235;
12}
13.hidden {
14 visibility: hidden;
15}
16.none {
17 display: none;
18}
02
実行結果
ブラウザでの表示上の行は B の場所が残り、下の行は B が詰められています
03
解説
visibility: hidden は、要素を見えなくするプロパティです。見えなくなっても、要素の大きさの分の場所はそのまま残ります。
上の例の1行目は B に visibility: hidden、2行目は display: none を指定しています。1行目は B の場所が空いたまま、2行目は B がなくなって C が詰まっています。
visibility は継承するため、親を hidden にして子だけ visible に戻すこともできます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
visible | 表示する（初期値） |
hidden | 見えなくする。場所は残る |
collapse | 表の行・列に使うと、その行・列を詰めて非表示にする（ほかの要素では hidden と同じ） |
transition でふわっと表示する
display は transition で変化しませんが、visibility と opacity は組み合わせてなめらかに切り替えられます。
CSS
1.menu {
2 visibility: hidden;
3 opacity: 0;
4 transition: opacity .3s, visibility .3s;
5}
6.menu.is-open {
7 visibility: visible;
8 opacity: 1;
9}
注意点
- 01visibility: hidden の要素はクリックできず、読み上げソフトでも読まれません。
- 02opacity: 0 は見えないだけで、クリックや読み上げの対象になります。目的に合わせて使い分けます。