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

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

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

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

要素を非表示にする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;が他とどう違うのか分からない人もいたと思います。

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

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。

• コピペで使えるWordPressの各テンプレート
• 実務でよく使う見出し一覧
• 実務でよく使うテキストのhoverアニメーション
• 実務でよく使うボタン内の矢印9種類
• Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

2023年12月31日まで！5大無料特典あり🎁

販売ページとレビューを見てみる

Twitterのレビューはこちら