要素を非表示にするときに知っておきたいCSSプロパティの使い分け

Webサイトの一部コンテンツを見えないようにしたい時に使えるCSSはいくつかあります。
それぞれどのような方法で非表示にさせているのかを確認し、適切な方法で非表示にするためのメモです。

各CSSプロパティの違い

全てに共通するのは「非表示になる」ということですが、非表示にした時の挙動の違いがあります。

一時的に非表示にしたいだけなのか、パソコンとスマホでの表示切り替えのためなのか、アニメーションの動作のためか、用途によって使い分けていきましょう。

display プロパティ

display は指定した要素の表示形式を指定するためのプロパティです。ブロック要素にするかインライン要素にするかなどの指定ですね。

【要素について参照】まだ違いに迷っているの？ブロック要素、インライン要素の違いを完全に理解しよう | アールエフェクト

display: none; は「要素自体を無しにする」ものなのでその空間ごと無くなります。

visibility プロパティ

visibility は要素を見せるか隠すか指定するためのプロパティで、存在自体は残ります。

visibility: hidden; では要素が見えない状態にはなりますが、存在はしているので空白スペースが残ります。

opacity プロパティ

opacity は要素の透明度を指定するためのプロパティです。どの程度の透明度にするか0〜1もしくは0%〜100%の数値で指定します。

opacity: 0; も要素が透明になっている状態なだけなので、空白スペースが残ります。

「要素の存在を消す」か「透明」にするか

visibility: hidden; や opacity: 0; は単純に見えなくするもので、要素は存在します。
display: none; は、ソースコードには残りますが要素の存在自体が削除されます。

実際に実装したものが以下です。非表示にした要素の領域を確保したいかどうかが使い分けポイントの一つです。

アクセシビリティの違い

visibility: hidden; と opacity: 0; の違いはアクセシビリティです。visibility: hidden; はスクリーンリーダーの読み上げやタブフォーカスが当たらなくなるといった特徴があります。

display: none; もしくは visibility: hidden; を指定した要素はどちらもクリックできませんが、opacity: 0; の場合見えなくても要素がクリックできてしまいます。

もし opacity: 0; を使ってクリックもさせたくないという場合は pointer-events: none; を同じ要素に追加します。

これらの違いの良し悪しはあると思うのですが、「意図せずそうなってしまった」ということを避けるためにもこの点は覚えておきたいところです。

transition でアニメーションを作る場合

CSSで表示・非表示を切り替える場合、transitionプロパティを使ってアニメーションを作ることもあると思います。

display: none; で非表示にした場合、transitionプロパティの内容は適用されません。アニメーション表示させたい場合はvisibility: hidden; か opacity: 0; を使用しましょう。

違いの詳細やアニメーションの実装などこちらの記事が参考になります。
意外と知らないvisibilityの活用方法！| フロントエンドBlog | ミツエーリンクス

HTMLのhidden属性でも非表示は可能

htmlタグにhidden属性というものがあり、こちらを設定しても要素が非表示になります。

<p>以下の要素にhidden属性を追加</p>
<div hidden>
  <p>ここにテキストあります！</p>
</div>

上記コードを実際に記述した表示がこちら。「ここにテキストあります！」の親要素にhidden属性をつけているので表示されません。

使う時の注意点としては、hidden属性自体にスタイルを指定しておらず、hidden属性が付いている要素に display プロパティの none 以外を指定している場合は表示されます。

一時的に非表示にしたい場合で、他の人にこのhiddenだけ外してもらえれば…なんてお願いしたい時には便利かな、と思ったので記載させていただきました。

【参照】HTMLのhidden属性の使い方と弱点、要素の表示・非表示を切り替える便利なスタイルシート | コリス

【PR】

SEOとして要素の非表示は使用しない！Googleウェブマスターガイドライン違反に注意

サイトのデザインによって、一時的に非表示にさせたて表示するということは往々にしてあります。そのような場合に非表示にできることはとても便利ですし使っても問題ありません。

ただしSEO対策としての隠しテキストや隠しリンクのために使用するとウェブマスターガイドライン違反になります。
ガイドライン違反とみなされるとペナルティを受けてしまうので、検索順位のためだけや意図せずクリックさせるための使用はしないように。

ご紹介したコードはどれも画面上では非表示になりますが、ソースコードにはその要素が残ります。
これは画面上では見えないものの、Googlebotなどサイトを評価するクローラーから見ると要素が認識でき、そしてそれを非表示にしていることを確認できます。

以下のようなことはガイドライン違反になる可能性があるので、注意しましょう。

• 白の背景で文字の色を白にする
• テキストを画像の背後に置く
• CSS を使用してテキストを画面の外に配置する
• フォントサイズまたは不透明度を 0 に設定する
• 目立たない 1 文字（段落の中頃にあるハイフンなど）のみをリンクにすることで隠す

隠しテキストと隠しリンク | 検索セントラル | Google Developers

現在はこのような手法を使ってSEO対策をする方はまずいないと思いますが、意図せず行ってしまうことや、自分が作成していないサイトではあるかもしれません。もしおかしな部分を見つけた場合に適切な修正ができるようにしておきましょう。