display・visibility・opacity:0の違いとは？「見えない」CSSを使い分けよう！

Web制作をしていると、要素を一時的に非表示にしたい場面があります。

そんなときによく登場するのが、

display: none;

visibility: hidden;

opacity: 0;

この3つ。

どれを使っても画面上では要素が「見えなくなる」ので、

「結局、何が違うの？」

と思ったことはありませんか？

実はこの3つ、見た目は似ていても要素の扱われ方はかなり違います。

今回は、それぞれの特徴と使い分けについて整理してみます。

① display: none;

まずはWeb制作でもよく使う、

.box {

  display: none;

}

です。

display: none;を指定すると、要素は表示されなくなり、レイアウト上のスペースもなくなります。

例えば、

<div class="box1">BOX 1</div>

<div class="box2">BOX 2</div>

<div class="box3">BOX 3</div>

このBOX 2に、

.box2 {

  display: none;

}

を指定すると、

BOX 1

BOX 2

BOX 3

と並んでいたものが、

BOX 1

BOX 3

となります。

BOX 2が使っていたスペースもなくなり、BOX 3がその場所へ詰めて表示されます。

つまり、

「要素ごとレイアウトから消したい」

という場合に向いています。

② visibility: hidden;

続いて、

.box {

  visibility: hidden;

}

です。

こちらも画面上では要素が見えなくなります。

ただしdisplay: none;との大きな違いがあります。

それは、

要素があったスペースはそのまま残る

ということです。

例えばBOX 2を、

.box2 {

  visibility: hidden;

}

にすると、

BOX 1

（空白）

BOX 3

という状態になります。

BOX 2自体は見えませんが、BOX 2が使用していた場所は確保されたままです。

そのため、

「レイアウトを動かさずに、一時的に要素だけ隠したい」

という場合に便利です。

③ opacity: 0;

そして少し性質が違うのが、

.box {

  opacity: 0;

}

です。

opacityは「透明度」を指定するCSSです。

通常は、

opacity: 1;

で完全に表示され、

opacity: 0.5;

なら半透明、

opacity: 0;

なら完全に透明になります。

つまりopacity: 0;は、

要素を消しているのではなく、完全に透明にしているだけ

ということです。

そのため、要素が使っているスペースも残ります。

opacity:0は「見えないけど、そこにいる」

ここが特に面白いポイントです。

opacity: 0;を設定した要素は、透明になっているだけなので、基本的にはそこに存在しています。

例えば透明になっているボタンがあった場合、設定によっては見えていないのにクリックできてしまうことがあります。

これは、

visibility: hidden;

とは大きく違うところです。

そのため、クリックもさせたくない場合は、

.box {

  opacity: 0;

  pointer-events: none;

}

のようにpointer-eventsと組み合わせることがあります。

3つを比較してみると？

簡単に整理すると、

display: none;

見えない ＋ スペースもなくなる

要素をレイアウトから取り除きたい場合に便利。

visibility: hidden;

見えない ＋ スペースは残る

レイアウトを崩さずに要素を隠したい場合に便利。

opacity: 0;

透明になる ＋ スペースは残る

要素自体は存在しているため、クリックなどの操作を受ける場合があります。

こうして比べてみると、同じ「見えない」でも全然違いますね。

opacityはアニメーションにも便利！

opacityがよく使われる場面の一つが、フェードアニメーションです。

例えば最初に、

.item {

  opacity: 0;

  transform: translateY(30px);

  transition: 0.6s;

}

としておいて、

.item.show {

  opacity: 1;

  transform: translateY(0);

}

とすると、

透明

↓

徐々に表示

というフェードインを作ることができます。

opacityは0〜1の間で変化させられるので、「表示・非表示を滑らかに見せたい」場合に使いやすいのが特徴です。

JavaScriptからはどうなる？

ここでも少し注意が必要です。

display: none;を設定したからといって、HTMLそのものが削除されたわけではありません。

例えば、

const box = document.querySelector('.box');

のようにJavaScriptから要素を取得することはできます。

visibility: hidden;やopacity: 0;の場合も同様です。

つまり、

「画面に表示されていない＝DOMから消えている」ではありません。

ここは最初に混乱しやすいポイントかもしれません。

じゃあ、どれを使えばいい？

使い分けを簡単に考えるなら、

完全にレイアウトから消したい

→ display: none;

場所を残したまま隠したい

→ visibility: hidden;

フェードなど透明度を使った表現をしたい

→ opacity: 0;

と考えると分かりやすいと思います。

ただし、実際のWeb制作ではクリック操作やアクセシビリティなども関係するため、「見えなくなれば何でもOK」ではありません。

特にopacity: 0;は、見えない要素がクリックできてしまう可能性があることを覚えておきたいですね。

まとめ｜同じ「見えない」でも中身は全然違う！

今回紹介した、

display: none;

visibility: hidden;

opacity: 0;

は、どれも画面上では要素を見えなくできます。

しかし、

display

→ 要素のスペースもなくなる

visibility

→ 要素のスペースは残るが表示されない

opacity:0

→ 要素を透明にする。スペースも残る

という大きな違いがあります。

CSSを勉強していると、最初は「見た目が同じならどれでもいいのでは？」と思ってしまいます。

でも、それぞれの仕組みを理解すると、

「ここはdisplayがいい」

「ここはフェードさせたいからopacityを使おう」

と、目的に合わせて選べるようになります。

こうした小さな違いを一つずつ理解していくことが、思い通りのWebサイトを作れるようになる近道なのかもしれません。