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

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

給付金で最大54万円OFF!独学では手に入らないウェブスキルが身に付く日本初のW3C認定スクールが無料カウンセリング受付中!

サンプルコード

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

<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;で見えなくなっています。

See the Pen
visibility: hidden;とdisplay: none;の違い
by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

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

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

visibility: hidden;

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;

次に、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は存在させなくするもの」、と覚えておけば、どのシーンでどのプロパティを使うかを判断しやすくなると思います。

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