cssで“display:none;”を正しく理解して使用していますか？
“display:none;”とは、cssで使用するプロパティのひとつで指定した要素を消すことができ、WebデザインとしてもPC/スマホでコンテンツを切り替えたい場合に便利で、レスポンシブデザインが普及する以前は簡易的なスマホ対応を理由にかなり利用していたサイトも多いのではないでしょうか？
しかし、現在PC/スマホでコンテンツ内容に大きな違いがあれば検索エンジンに正しく評価してもらえない可能性があり、場合によってはSEOや検索順位にも大きく影響を及ぼします。
というのも、PCよりもモバイルからの検索が増えたことから“モバイルファーストインデックス”によってPCではなくモバイルのコンテンツをインデックスするためであって、他にも隠しコンテンツとして低い評価を受けてしまう可能性も0ではありません。
つまり、“display:none;”を活用してコンテンツを一部非表示にしても閲覧ユーザーに見えないだけであって、クローラーは目には見えないタグを読み込んでいるため、画像の読み込みのために表示スピードに悪い影響を与えたりするわけです。（非表示にしているだけであってファイル自体軽くなっているわけではないということになります。）
これを踏まえて、一時的に非表示にしたい場合やデザインとしてどうしても使用したいといった程度であれば問題なく、PC/スマホのコンテンツ内容の差異による注意点も正しく理解して使用することが大切です。
では、今回は一部コンテンツを非表示にする際に便利なcssのプロパティ“display:none;”について意味や使い方、注意点などについて詳しくご説明したいと思います。
目次
“display:none;”とは？
まずはじめに、“display:none;”とはWebデザインをhtmlやcssを使用してコーディングしたり、管理していく上で部分的に非表示にできる便利なプロパティのひとつで、厳密に言うと“display”がプロパティ、そして“none”がそれに対する値となります。
そのため、この“display”に対する“値”は下記の通り他にもtableやblockなど様々な種類があり、囲った要素をどう扱うのか？といった意味合いのCSSで、今回ご紹介する“none”の場合だと囲った部分のコンテンツなどが非表示となる非常に便利なプロパティです。
displayプロパティは、ブロックレベル・インライン・テーブル・ルビ・フレックスコンテナ等の、要素の表示形式を指定する際に使用します。
ただし、ソースを見てみると“display:none;”を指定したタグで囲っていても要素は確認できるため、ページを見ているユーザーに見せていないだけであってボットには認識されています。
つまり、PC/スマホで見せたい画像を切り替えたとしても実際には両方の画像を読み込ませていることと同じなので、ファイル自体は重くなってしまいます。（この場合はpicture要素をうまく活用してメディアクエリで見せる画像を切り替えましょう。）
また、最近ではレスポンシブデザインを導入している方がほとんどなので問題ないかと思われますが、スマホに対応し始めた当初は/sp/などディレクトリを分けて完全にPCとは別のページで対応していた方も多いかと思われます。
他にもPCサイトに“display:none;”を活用してできるだけ簡易ページとして対応したりと、現在もそういったサイト管理をしていればモバイルサイトを検索エンジンは評価対象として見なしますから、検索順位にも悪い影響を及ぼすため注意が必要です。
“display:none;”と似たプロパティとして、“visibility:hidden;”というものがあります。
こちらは、見えないだけであってその後の要素が詰められないといった違いがあり、“none”の場合は完全に消えているので後の要素が詰まって表示されます。
要はその部分だけ空いた状態として表示されるのが“visibility:hidden;”です。
どちらにしても検索エンジンはタグを読み込んでいることに違いありませんので、デザインの崩れなどを考慮して使い分けると良いでしょう。
ただ、使用頻度としては“display:none;”の方が多いため、ほとんどの方はこちらを活用しているかと思われます。（その箇所を後ろの要素で詰めたくない場合は“visibility:hidden;”といったプロパティがあるとだけ覚えておくと便利です。）
また、レスポンシブデザインを導入してPC/スマホ間で同じ画像ファイルを使用していると、スマホで見た場合必要以上に大きな画像ファイルを読み込むことになりますので“display:none;”を活用してPC/スマホで表示させる画像を切り替えたいところではありますが、実際には2つのファイルを読み込んでいることになりますので、逆に重たく感じられます。
“display:none;”はどういった時に使うのか？
続いてこの“display:none;”をどういった場面で使うべきなのかという点です。
これは上記の通り一時的にバナーなどを非表示したい場合やWebデザイン上、修正を行うためにユーザーへ見せたくない場合が考えられます。
また、トップページのメイン画像はブランディングとして非常に重要な要素となりますので、この箇所だけPC/スマホでそれぞれのサイズに合った画像を用意して“display:none;”で差し替えてみても良いでしょう。
どちらにしても“一時的”といった意味合いがあり、様々な箇所で長時間使用するといったPC/スマホでの見せ方を理由に活用することは避けた方が良いです。
やはり最近の検索エンジンはPCよりもモバイル版の内容を重視してインデックスしていますので、PC/スマホ間で乖離があれば少なからず検索順位に影響しますし、メリットはほぼありません。
そのため、どうしてもPC/スマホの両方で同じ画像を表示する場合、“WebP Express”といったプラグインの導入を検討してみると良いでしょう。この“WebP（ウェッピー）”とは…画像ファイルをjpgよりも圧縮しつつpngのような透過にも対応する画像形式で、自動的に圧縮を行ってくれるので、大幅にファイルを軽減することが可能です。
特にスマホで閲覧している場合、読み込み速度が遅いとユーザーはイライラして違うページへと遷移してしまいます。そういった機会損失を逃さないためにも適切な画像形式で書き出すことも大切な考え方となります。（gifで書き出すべきイラストをわざわざjpgで書き出す必要はありません。）
“display:none;”の正しい書き方
“display:none;”の記述方法は、大きく分けてcssファイルに記述する方法とhtmlのタグに直接記述する方法があります。
そして実際の記述方法は以下の通りで、リンクするcssファイルとhtmlファイルに記述する場合で若干の違いがありますのでご注意ください。
cssに記述する場合
.container {display:none;}
htmlに直接記述する場合
<div style="display:none;">特にレスポンシブデザインでサイトを管理している場合だと読み込むcssをデバイス毎に変えているはずなので、一時的に非常時にしたい場合はhtmlファイルに直接記述した方が間違いありません。（cssで対応するとスマホ版だけ表示されたままといった状態にもなりかねません。）
また、PC/スマホで画像を切り替えたい場合は以下の通りcssを用意して適宜使用します。
PCの場合に非表示にする
.container_pc {display:none;}
スマホの場合に非表示にする
.container_sp {display:none;}ただし、先ほどもお伝えした通りこの方法で画像を差し替えていれば、全て2種類の画像を読み込むことになりますので、ファイル自体重くなってしまう点は注意しましょう。
“display:none;”が効かない場合
こういったcssやhtmlの変更作業を行っている場合、希に変更箇所がブラウザ上に正しく更新されない・効かない場合があります。
そしてこの“display:none;”といったcssの場合、他のクラスなどと競合してしまっている・ブラウザのキャッシュがほとんどかと思いますので焦らずにひとつずつ試していくことが大切です。
まずcssがバッティングしている場合、“ウェブ開発ツール”から該当する箇所を見て、どういったcssが適応されているのかチェックします。ここで他のクラスとバッティングしてしまっている場合（具体的には“display:block;”など）、以下の通り値の後ろに“!important”を付けます。
.container {display:none!important;}これはどういうことかというと、そのスタイルを強制的に適応させることを意味します。
特にcssは後に書かれたものが優先されますので、その辺りに関しても重複しないよう注意してください。
それと、最近はページの読み込みスピードを考慮してキャッシュを多用しているサイトもかなり多いため、その古い状態が表示されている可能性もあります。
この場合はキャッシュの削除、もしくは普段使用していないブラウザからチェックしてみると良いでしょう。
恐らくcssが効かない原因はこの2点が多いかと思われますので、順に確認してみてください。ただ、数人で管理している場合だと古いcssに変更してアップしてしまう場合もありますので、最新のファイルをサーバーからダウンロードして作業を行うようにしてください。（万が一のことも考えてバックアップしておくのも必要です。）
ペナルティの可能性について
“display:none;”を使用してコンテンツを一部非表示にしても基本的にペナルティとはなりません。
ただし、以下の通り隠しテキストや検索順位のためといった悪意のある使い方をしていると検索エンジンにスパムと判断されてしまう可能性も0ではなく、この辺りに関してはGoogleのガイドラインに反していなければ、そこまで気にする必要はありません。
Google の検索は、隠しテキストに限らず、ユーザーが閲覧するウェブページと Googlebot が取得するウェブページの情報が大きく異なる状態を好みません。なぜなら、Google の検索では、Googlebot が取得したウェブページの情報をもとに検索結果をユーザーの方々に返しているため、取得したウェブページの情報と、実際にユーザーが見るページの内容に大きな差があると、適切な検索結果を返すことができなくなってしまうからです。
この辺りに関しては一昔前の話で、現在そういった手法で上位表示を目指す方もいないでしょうし、そもそもコンテンツが重要視されていますから、Googleもそう簡単には高く評価しません。
むしろキーワードなどを多く詰め込んで“display:none;”によって隠しても、ユーザー・検索エンジンともに見えていないものと判断され、スパムといった危険性しかありませんので、正攻法で上位表示を目指しましょう。
まとめ
ということで今回はコンテンツ内の一部を非表示にできるcssのプロパティとその値“display:none;”について意味や記述方法、注意点などを詳しくご説明しました。
このように“display:none;”は一時的や部分的に使用するといった使い方が正しく、ユーザーに見える情報とタグとして見える情報が大きく異なる場合にはスパムとして判断されてしまう可能性も0ではありませんので、注意点などを正しく理解した上で活用しましょう。
もちろん正しく使えば非常に便利なプロパティですし、期間限定などのバナーを表示・非表示の切り替えなんかも重宝します。それ以外にもPC/スマホで見せたい画像を切り替えるといったケースも大いに考えられますので、ファイルが重たくならないよう注意しながら使うべきです。
また、キャッシュが残っている場合も考えられますので、重要なコンテンツを非表示にしたい場合は別ブラウザや他のデバイスからも確認してみると良いでしょう。
「キーワードファインダー」
キーワード選定でお悩みですか？
「キーワードファインダー」なら、検索ボリュームから順位チェック、関連語や新しいキーワードの発見など、アクセスを伸ばすために重要なキーワード選定を自動取得、一括管理が可能！
また、自動取得したキーワードは、ご自身のサイトだけでなく競合の順位も取得します。この整理された情報を元にあなたの集客経路の拡大にお役立てください！
関連記事
検索順位を改善するには正しいSEOの知識が必要です
