要素の表示・非表示を指定するCSSプロパティ「visibility」

要素の表示・非表示を指定するCSSプロパティというとdisplayプロパティが主ですが、もう一つ、visibilityプロパティがあります。

visibilityプロパティの値

visibility: visible; /* 表示(初期値) */
visibility: hidden; /* 非表示 */

displayプロパティとの違い

displayプロパティとvisibilityプロパティの違いは、
非表示にした要素の領域を詰めるか、確保するか、です。

例

黄・赤・青の順に並んだボックスがあります。

display: none;の場合

赤いボックスにdisplay: none;を指定します。

赤いボックスの領域は無くなります。

visibility: hidden;の場合

赤いボックスにvisibility: hidden;を指定します。

赤いボックスの領域は確保されています。

まとめ

visibilityプロパティが必要な場面は少ないかもしれませんが、主にJavaScript・jQueryやCSSアニメーションと絡めて使う際に役立ちます。

参考サイト：visibilityはCSSアニメーションで制御可能なのでjQueryのfadeInみたいな感じのアニメーションをつくりたかったら、displayじゃなくてvisibilityをつかえば良いという事実 – みかづきブログ その3

また、display: none;ではページのレイアウトが崩れてしまうという時に重宝します。

displayプロパティで上手くいかないときは、visibilityプロパティを是非思い出してみてください。

この記事を読んだ方はこちらも読まれています

【解決法】Safariではinput要素をCSSの「display: none;」で消すことができない 【WordPress】Contact Form 7のスパム対策