ブログについて
【css】要素を非表示にする3つの方法
2024.12.25
制作
こんにちは。クリエイティブ制作部の喜納です。
コーディングをしていると、「このときは非表示にしたい」といったことがよく起こります。要素を非表示にする方法について、なんとなく知ってはいるけど違いがよく分からないという人もいると思います。そこで今回は、cssで要素を非表示にする方法を3つご紹介します。
方法① display: none;
非表示をしたいと思ったときに、コーディング経験者がまずはじめに覚えるのがdisplay: none;ではないでしょうか。ポイントは次の通りです。
・要素自体を完全に無しにする。空間ごとなくなる。
・アクセシビリティツリーからも削除されるため、読み上げ技術に認識されない。
・子要素にも値が継承される。
・クリックイベント不可。
方法② visibility: hidden;
次にポピュラーなのがvisibility: hidden;かと思います。ではdisplay: none;との違いはどこでしょうか？
・要素は見えなくなるが、空間は残る。
・アクセシビリティツリーからも削除されるため、読み上げ技術に認識されない。
・子要素にも値は継承されるが、visibleで上書きが可能。
・クリックイベント不可。
方法③ opacity: 0;
最後にご紹介するのがopacity: 0;です。こちらは要素の透明度を設定するものです。
値は0～1の範囲で指定できます。
・透明にしているだけなので、空間は残っている。
・アクセシビリティツリーから削除されない。
・子要素にも値は継承されるが、親要素の透明度に影響を受ける。（親要素にopacity: 0.5が指定されていたとき、子要素にも新ためて0.5を指定してしまうと、子要素の透明度は0.25になってしまう）
GoogleのポリシーやSEOへの影響
今回ご紹介した3つの要素は、表示状態を操作するためのCSSプロパティであり、Googleポリシーへの直接的な影響はほとんどありません。しかしこれらの使用は間接的にSEOやアクセシビリティに影響を与える可能性があるため、Googleポリシーをきちんと理解しておきましょう。
Googleポリシーにおける「隠しテキストや隠しリンク」
Googleではウェブ検索のスパムに関するポリシーの中で、「隠しテキストや隠しリンク」について次のように述べています。
隠しテキストや隠しリンクは、検索エンジンを操作することのみを目的としてページにコンテンツを配置しながら、人間のユーザーには見えにくいようにする行為です。Googleのポリシーに違反する隠しテキストや隠しリンクの例としては、次のようなものが挙げられます。
・白の背景で文字の色を白にする
・テキストを画像の背後に置く
・CSSを使用してテキストを画面の外に配置する
・フォントサイズまたは不透明度を0に設定する
・目立たない1文字（段落の中頃にあるハイフンなど）のみをリンクにすることで隠す
現在では、コンテンツの表示／非表示を動的に制御する方法を活用して、ユーザーエクスペリエンスを高めるウェブデザイン要素が多数存在します。以下の要素はGoogleのポリシーに違反していません。
・追加コンテンツの表示／非表示を切り替えるアコーディオンやタブ形式のコンテンツ
・複数の画像やテキスト段落を切り替えるスライドショーやスライダー
・ユーザーが要素に対してなんらかの操作をしたときに追加コンテンツを表示するツールチップや類似のテキスト
・スクリーンリーダーを使用するユーザーのエクスペリエンスを高めることを目的として、スクリーンリーダーのみがアクセスできるテキスト
つまり、悪意を持って隠すような行為はポリシーに違反することになりますので注意しましょう。
また通常で使用した場合でも、例えばvisibility: hidden;は文書がDOM（Document Object Model）内に残っているため、検索エンジンはこの要素を読み取ることができ、SEOに影響を与える場合があります。特に隠された要素が重要な情報やキーワードを含む場合、Googleはそれを考慮することがあります。opacity: 0;も同様に、視覚的には見えなくなりますがDOM内には存在し続けます。ユーザーがそのスペースをクリックできるため、Googleは要素として評価をします。そのため、制作側はコンテンツとして考慮する必要があります。
まとめ
先ほどもお伝えしたように、今回紹介した３つの方法はGoogleポリシーに直接影響を与えません。しかしSEOやアクセシビリティに間接的な影響を与える可能性があるため、適切にコンテンツを隠すことで、Googleのランキングやユーザーエクスペリエンスを良好に保っていきましょう。