【CSS】display: noneとは？visibility: hiddenの違いについても詳しく解説します。

今回はCSSのdisplay: noneとvisibility: hiddenの違いについて解説します。

この方法を知ることで、display: noneとvisibility: hiddenの使い分けをすることができます。

一緒に理解を深めていきましょう。

display: noneとvisibility: hiddenの違いは該当要素があるかないか
- display:noneは丸ごとなくなる
- visibility: hiddenは見えなくなる
display: noneとvisibility: hiddenの使い方
どちらもタブ操作不可でスクリーンリーダーに読み込まれない
- スクリーンリーダーに読み込ませたい場合は「visiblity-hidden」クラスを自作しよう
まとめ

display: noneとvisibility: hiddenの違いは該当要素があるかないか

display: noneとvisibility: hiddenの二つは要素の表示・非表示を操作する際に使用します。

その際、二つの大きな違いは「該当要素があるかないか」です。

一つずつ詳しく説明していきます。

display:noneは丸ごとなくなる

display: noneを使用すると指定された要素は丸ごとなくなってしまうような扱い方になります。

下の画像をご覧ください。

1番目の要素にdisplay: noneを指定した画像です。

1番目の要素はdisplay: noneを指定したので丸ごとなくなり、1番目の要素があった場所に2番目の要素が詰めるような形で表示されています。

visibility: hiddenは見えなくなる

visibility: hiddenも同様に1つ目の要素に指定してみます。

下の画像をご覧ください。

1つ目の要素は無くなりましたが、その分のスペースは空いているように見えます。

デベロッパーツールで詳しくみてみましょう。

1つ目の要素にvisibility: hiddenを指定している状態ですが、デベロッパーツールで要素の形を確認することができました。

visibilityという単語を訳すと「可視性」という意味になりますが、hiddenを指定していることで見えない状態になっています。

つまり、存在するけれど見えないようにするのがvisibility: hiddenということです。

まとめると・・・

該当箇所がない ⇨ display:none
該当箇所がある（けど見えない） ⇨ visibility:hidden

これが二つの大きな違いです。

display: noneとvisibility: hiddenの使い方

それでは、この二つはどのように使い分けすれば良いのでしょうか。

使用時の注意点についても解説します。

一つずつ見ていきましょう。

要素を完全に非表示にするときはdisplay: none

ユーザーに一切見せる必要がなく、レイアウト上のスペースも削除したい場合は display: none; を使用します。

例えば、以下のようなケースでは display: none; が適しています。

不要なコンテンツを一時的に非表示にする
- タブ切り替えなどで、選択されていないタブのコンテンツを非表示にする場合
特定のデバイスでのみ表示・非表示を切り替える
- レスポンシブデザインで PC とスマホで異なる要素を表示する場合

display: noneの使用の注意点

display:noneはCSSの中でもとっても便利なプロパティですが、その分使用する場合には注意が必要です。

理由は次の通りです。

要素自体を全て無くすという大きい影響力がある
SEOに影響する可能性がある

下記で詳しく解説します。

非表示にするのであって、ダウンロードされないわけではない

display:noneは非表示になるということをこれまでお伝えしましたが、display:noneを指定していても一旦全て読み込まれ、その後、display:noneが指定されている要素は表示されないようになります。

つまり、あくまで非表示になるのであって、ダウンロードはされます。

例えば、下記のコードで img タグを使って画像を読み込んでいますが、style="display: none;"　を適用すると画像は非表示になりますが、画像自体はダウンロードされていますので、表示のページスピードが落ちてしまいSEOに影響がでてしまいます。

<img src="img-display-none.jpg" alt="非表示の画像" style="display: none;">
<img src="img-display-block.jpg" alt="表示中の画像" style="display: block;">

PC向けに容量の大きい画像を用意していたはずが、スマホユーザーがそれをダウンロードしてしまってギガを消費していた、ということになりかねます。

img タグはブラウザが HTML の解析時点で img の src をリクエストする仕様のためdisplay: none を指定しても取得されてしまうためです。

ダウンロードさせたくない場合は、下記のようにCSSを利用して、background-image で表示させます。

これはブラウザはHTML の解析後に CSS を適用する際、対象の要素が「実際に表示されるかどうか」を確認し、必要なリソースだけを読み込むためダウンロードされません。

.visible-bg {
   display: none;
   background-image: url('bg-img-display-block.jpg'); /* 背景画像 */
   background-repeat: no-repeat;
   width: 200px;
   height: 100px;
}

こちらにimgタグとbackgroud-imageを適用したデモを用意しましたので、ブラウザのディベロッパーツールのネットワークコンソールを使ってダウンロードされているかご確認ください。

DEMO

また、その他の方法として、レスポンシブ対応をするためにdisplay: none を利用するのであれば picture タグを使う方法も可能です。

picture タグについては下記で解説していますので、ご確認ください。

【HTML】pictureタグの使い方を紹介！レスポンシブもスマートに

Googleからの余計な誤解を生む可能性

display: none; を適用しても、検索順位を決めるために様々なサイトを巡回しているロボット（クローラー）に読み込まれるため、不要な要素があり、Googleのガイドラインに違反している場合はスパム扱いを受けてSEOの順位が下がってしまう可能性があります。

特に、隠しテキストと隠しリンクの部分がdisplay:noneと関係が深いでしょう。

隠しテキストや隠しリンクは、検索エンジンを操作することのみを目的としてページにコンテンツを配置しながら、人間のユーザーには見えにくいようにする行為です。
Google ウェブ検索のスパムに関するポリシー | Google for Developers

悪意ある使い方をしない限りスパム扱いされることはないと思いますが、うっかり違反しないように知っておきましょう。

display:noneを使用する場合は以下の点に気を付けて使用します。

ユーザーが使いやすいかどうか（ユーザーエクスペリエンス）
不正に当たる使用方法をしない
できるだけ使用箇所を少なくする

レスポンシブデザインでPCとスマホで表示を変えたいといった場合は、気にせず使っても良いでしょう。

使用する前にHTMLも含めて見直し、一旦違う方法がないかを考えましょう。

transitionを使用するときはvisibility: hidden

ハンバーガーメニューをはじめ、アコーディオンやトグル等の見た目が動く動的な部分ではdisplay:noneを指定するとtransitionが反応しないので使いづらいです。

無理やりキーフレームを使ってアニメーションしようとしても少し動作が遅れてしまいます。

そんな時はvisibility: hiddenを使用しましよう。

transitionが反応してくれるため、自然なアニメーションを作成することができます。

どちらもタブ操作不可でスクリーンリーダーに読み込まれない

少し深堀りして、タブ操作したときや、スクリーンリーダのときはどう認識されるでしょうか？

スクリーンリーダとは

スクリーンリーダー（Screen Reader）は、視覚障害者や弱視のユーザーがWebページやアプリを利用できるように、画面上のテキストや要素を音声で読み上げるソフトウェアのことです。

答えは、display: none、visibility: hiddenを指定した要素はアクセシビリティーツリーから外れ、タブ操作不可・スクリーンリーダーから読み込まれません。

例えば、ハンバーガーメニューの表示・非表示を切り替える際、display: noneまたはvisibility: hiddenを使用することは表示していない要素にタブ操作によってフォーカスが当たるのを防ぐ意味でも良いと思います。

キーボード操作の邪魔になりません。

しかし、チェックボックスやラジオボタンのデザインを自作した場合はどうでしょうか。

下記はよくある手法で、checkboxを非表示にして、label 要素をボタンのようなデザインにして、要素をクリックするとcheckboxにチェックが入る仕組みです。

チェック1
チェック2

↓ のようなデザインに自作した場合。

チェック1
チェック2

<!-- カスタムデザインのチェックボックス -->
<input type="checkbox" id="custom-check1" class="hidden-checkbox">
<label for="custom-check1" class="custom-label">チェック1</label>

<input type="checkbox" id="custom-check2" class="hidden-checkbox">
<label for="custom-check2" class="custom-label">チェック2</label>

.hidden-checkbox {
  display: none; /* 非表示にすると、キーボード操作不可・スクリーンリーダー非認識 */
}
.custom-label {
  display: inline-block;
  background-color: lightgray;
  cursor: pointer;
  padding: 10px;
}

この場合、<input> 要素が display: none; になっていますが、見た目では label 要素をクリックすれば動作するように見えます。

しかし、キーボードではフォーカスできず、スクリーンリーダーもチェックボックスが存在しないと判断されてしまいます。

見えていなくてもチェックボックスやラジオボタンにフォーカスを当て、タブ操作を可能にしたり、スクリーンリーダーで読み込ませすべてのユーザーが正しく操作できるUIを実現したいところです。

スクリーンリーダーに読み込ませたい場合は「visiblity-hidden」クラスを自作しよう

display: none、visibility: hiddenを使用するとタブ操作不可・スクリーンリーダーから読み込まれなくなってしまうので、その代わりに自作の「visiblity-hidden」クラスを作成しましょう。

以下のコードはBootstrapのコードを参考に作成しました。

ブラウザからは見えないですが、存在するものとして機械が判断し、タブ操作やスクリーンリーダーで読み込むことができます。

/* CSS */
.visibility-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

※参考：Why and How the Bootstrap sr-only Class is Used

見えない部分ですが、機械に読み込ませたい場合は該当要素に自作の「visiblity-hidden」クラスをつけ、読み込ませたくない場合はdisplay: noneまたはvisibility: hiddenを使用すると良いと思います。

最後にこちらのデモを作りましたのでご確認ください。

DEMO