※ 当サイトではアフィリエイト広告を利用しています。
| 値 | 効果 |
| visible(default) | 要素が可視状態になります。 |
| hidden | 要素が不可視状態になりますが、要素の領域は確保されたままになります。 |
| collapse | hidden同様要素が不可視に。tableで使用するとその部分を詰めて表示されます。 (※ただし互換ブラウザに注意） |
visibility=視認性の意味。
要素の可視・不可視を指定できるプロパティ。
display:noneで不可視を設定した場合、要素の領域（レイアウト）自体も失われますが、
visibility:hiddenで不可視を設定すると、見えないものの要素の領域は残ります。
そして、visibilityは数値ではないものの、transitionでのアニメーションが可能なプロパティなんです！display:blockにするとtransitionによるアニメーションは使えないため、これはとても便利です。
使用例：コンテンツの非表示時にopacity:0を使いアニメーションさせたい場合。
opacityではコンテンツが見えなくはなるが、リンクなんかは残ってしまう。
display:noneを併用するとリンクなんかは消えるけど、アニメーションが効かない。
visibility;hidden を併用すると、アニメーションが効きながらもアクセシビリティツリーからは削除されるので、リンクも作用しなくなり、スクリーンリーダーとかも要素を読まなくなります。
スマホのメニューの表示・非表示をopacityの変化でアニメーションを付け、visibilityも同時に指定すると、リンクだけが残っちゃったなんてこともなくなります！
