どっちをいつ使う？visibility: hidden;とdisplay: none;の違いと適切な使い方

visibility: hidden;とdisplay: none;はどちらも要素を表示しないようにするプロパティですが、それぞれ意味が違います。

どっちでもええやん…と思って適当にやっていると思わぬ落とし穴にはまってしまうこともあったり、SEOやセキュリティにも影響してくるので、意味を理解してから使うようにしておきましょう！

サンプルコード

まずはそれぞれのサンプルコードを見てみましょう。

<ul>
  <li>1st</li>
  <li>2nd</li>
  <li>3rd</li>
</ul>

SCSSはこちら。

ul {
  li {
    &:nth-child(2) {
      visibility: hidden;
    }
    &:nth-child(3) {
      display: none;
    }
  }
}

シンプル過ぎて分かりにくいかもしれませんが、<li>の2番めの「2nd」と書いてある部分はvisibility: hidden;で見えなくなっていて、3番めの「3rd」と書いてある部分はdisplay: none;で見えなくなっています。

どちらも「見えなくなっている」という点では同じですね。

では、それぞれを詳しく解説していきますよー！

visibility: hidden;は「存在はしてるけど隠している」という状態にするプロパティです。

ブラウザのデベロッパーツールで見てみるとこんな感じになってるのが分かりますね。

<ul>
  <li>::marker "1st"</li>
  <li>::marker "2nd"</li>
  <li>3rd</li>
</ul>

CSSが何も指定されてない「1st」と、visibility: hidden;を指定した「2nd」が同じHTMLになっています。

つまり、HTMLとしてはちゃんと出力されているということになるので、SEOとしてはウェブページに存在していると認識されます。

次に、display: none;は「そもそも存在していない」状態にするプロパティです。

HTMLとして確認はできますが、display: none;を指定した「3rd」の部分には::markerという疑似要素すら出力されていません。

<ul>
  <li>::marker "1st"</li>
  <li>::marker "2nd"</li>
  <li>3rd</li>
</ul>

つまり、HTMLの要素としても存在していないため、SEOではウェブページに存在していないと認識されます。

というわけで、visibility: hidden;とdisplay: none;の違いがお分かり頂けたかと思います。

これはセキュリティに関しても影響があって、実際にreCAPTCHAのバッジを非表示にするために下記のように書いて、reCAPTCHA自体が動作しなくなったというケースに遭遇したことがあります。

.grecaptcha-badge {
  display: none;
}

これはコーダーの知見の浅さが招いたバッドケースですね。

「hiddenは隠すだけのもの」、「noneは存在させなくするもの」、と覚えておけば、どのシーンでどのプロパティを使うかを判断しやすくなると思います。

どちらも比較的ポピュラーなプロパティなので、ぜひ、覚えておいてくださいね！