CSSには以下の要素を非表示にするプロパティが3つありますが、その違いが分からないという人もいると思います。
今回はその違いについてサンプルを使って解説していきます。
（有料になっていたらすいません🙇♂️）
要素を非表示にする3つの方法
まず要素を非表示にする3つのCSSプロパティはこちらです。
要素を非表示にするCSSプロパティ
- display: none;
- opacity: 0;
- visibility: hidden;
上記は全て要素を非表示にしますが、非表示の仕方が異なります。
それがどう違うのかを見ていきます。
基本はこちらで、2つ目の要素を非表示にしながら解説していきます。
See the Pen
要素の非表示（デフォルト） by junpei (@junpei-sugiyama)
on CodePen.
一番下のボタンをクリックすると、2つ目の要素に非表示となるプロパティを付与していきます（上記は非表示になりません）
要素にカーソルを乗せるとポインターが表示されるので、それも確認しておいて下さい。
またコードは上記のHTML・CSSで確認できますが、今回は要素を非表示にするプロパティ以外は特に重要ではありません。
display: none;とopacity: 0;とvisibility: hidden;の違い
それでは3つのプロパティの違いを解説していきます。
簡単にまとめると以下のようになります。
| プロパティ | 要素の有無 | クリックイベント |
| display: none; | なし | 不可 |
| opacity: 0; | あり | 可能 |
| visibility: hidden; | あり | 不可 |
要素の『表示・非表示』と『有無』は別の話になるので、そこに注意して読み進めて下さい。
それでは実際どうなるか見ていきます。
display: none;
まずはdisplay: none;から見ていきます。
下のボタンをクリックすると、2つ目の要素がdisplay: none;になります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
要素2は消えて無かったものとなり、その下の要素が上に移動したのでレイアウトに影響ありとなります。
もちろんデザインによってはレイアウトに影響がない場合もありますが、display: none;を使う時にはレイアウトが崩れないか確認する必要があります。
そして見えなくなるだけでなく無かったものとなるので、当然クリックもできません。
opacity: 0;
次は同様に要素2をopacity: 0;にしてみます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
今度は非表示になりましたが、下の要素の位置は変わっていません。
そしてカーソルを乗せるとポインターが表示されるのでクリックはできます。
つまり視覚的に見えなくなっただけで、レイアウトには影響ありません。
opacityは透過率を調整するプロパティなので『無くなった』ではなく『透明になった』ということです。
ちなみにopacity: 0;は完全に透明で、opacity: 1;は完全に不透明（つまり普通に見える）、そしてopacity: 0.5;は以下のように半透明となります。
See the Pen
要素の非表示（opacity: 0.5;） by junpei (@junpei-sugiyama)
on CodePen.
もちろん0.1や0.9にも出来るので、透過率は細かく調整可能です。
visibility: hidden;
最後にvisibility: hidden;ですが、これは3つの中では一番使わないと思います。
しかし、ハンバーガーメニューやメガメニューなど、『透明にしたいけどクリックできないようにしたい』という時に使います。
これも同様に、要素2をvisibility: hidden;にしてみます。
See the Pen
要素の非表示（opacity: 0;） by junpei (@junpei-sugiyama)
on CodePen.
先ほどのopacity: 0;と同じに見えますが、カーソルを乗せてもポインターは表示されません。
つまり、レイアウトは変わらずにクリックイベント不可となります。
まとめ
今回は要素を非表示にする3つのプロパティの違いについて解説してきました。
display: none;とopacity: 0;は良く使うので分かる人も多いと思いますが、visibility: hidden;が他とどう違うのか分からない人もいたと思います。
この記事でその違いをしっかり把握しておきましょう。
| プロパティ | 要素の有無 | クリックイベント |
| display: none; | なし | 不可 |
| opacity: 0; | あり | 可能 |
| visibility: hidden; | あり | 不可 |
以上になります。
