【CSS】display: noneとopacity: 0とvisibility: hiddenの違いを解説

要素を非表示にする方法っていくつかあるけど、違いが分からない・・・

CSSには以下の要素を非表示にするプロパティが3つありますが、その違いが分からないという人もいると思います。

今回はその違いについてサンプルを使って解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

要素を非表示にする3つの方法

まず要素を非表示にする3つのCSSプロパティはこちらです。

上記は全て要素を非表示にしますが、非表示の仕方が異なります。

それがどう違うのかを見ていきます。

基本はこちらで、2つ目の要素を非表示にしながら解説していきます。

See the Pen
要素の非表示（デフォルト） by junpei (@junpei-sugiyama)
on CodePen.

一番下のボタンをクリックすると、2つ目の要素に非表示となるプロパティを付与していきます（上記は非表示になりません）

要素にカーソルを乗せるとポインターが表示されるので、それも確認しておいて下さい。

またコードは上記のHTML・CSSで確認できますが、今回は要素を非表示にするプロパティ以外は特に重要ではありません。

display: none;とopacity: 0;とvisibility: hidden;の違い

それでは3つのプロパティの違いを解説していきます。

簡単にまとめると以下のようになります。

要素の『表示・非表示』と『有無』は別の話になるので、そこに注意して読み進めて下さい。

それでは実際どうなるか見ていきます。

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;が他とどう違うのか分からない人もいたと思います。

この記事でその違いをしっかり把握しておきましょう。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！