レスポンシブデザインでdisplay:none;はどこまで利用してよいのか?

モバイルフレンドリー対応に追われている方も少なくないことかと思います。そんな中で、既存サイトをレスポンシブサイト化で乗り切ろうと言う方が気になるのが、どれだけdisplay:none;を使ってPCでは表示させるけど、スマホでは表示させないという項目を作るのか?ということではないかと思います。

display:none;とは?

要するに表示させないためのCSSです。

<HTML>

<div class=”pcmenu”>PC向けの表示部分</div>
<div class=”spmenu”>スマホ向けの表示部分</div>

<CSS>

.spmenu{display:none:};

@media screen and (max-width:620px){

.pcmenu{display:none;}
.spmenu{display:inherit;}

}

上記のようにしておけば、PCで閲覧した時とスマホ(スマホサイズの画面)で表示した時で別々の内容を表示することができます。

こうしたことは、PCサイト(非スマホ対応)をレスポンシブデザインに切り替えてモバイルフレンドリーなサイトにする上で役立つテクニックです。ところが多用には注意が必要です。

 

隠しテキストというスパムとなるかも?

要するに{display:none;}は画面上に特定のコンテンツを表示させないためのCSSです。この部分にテキストが含まれていると「隠しテキスト」と呼ばれる検索エンジンスパムとGoogleから判断されるリスクがあります。

Google の検索結果でのランキングを操作するためにコンテンツに隠しテキストや隠しリンクを含めることは、偽装行為と見なされることがあり、Google のウェブマスター向けガイドライン(品質に関するガイドライン)への違反にあたります。

その一方で

ただし、隠しテキストがすべて偽装行為と見なされるわけではありません。たとえば、サイトで JavaScript、画像、Flash ファイルといった検索エンジンにとってアクセスしにくい技術が使用されている場合、そのようなアイテムについて説明テキストを使用するとサイトのアクセシ ビリティが向上することがあります。また、スクリーン リーダー、モバイル ブラウザ、プラグインなしのブラウザ、低速接続環境でアクセスする多くの人間のユーザーもそのようなコンテンツを表示できないため、その場合も説明テキス トがあれば役立ちます。

とも表現されています。
レスポンシブデザインの為に必要な部分を{display:none;}で表示しないことはペナルティの対象となるリスクは低いと言えるでしょう。

もちろん、このような{display:none;}を使わずにコーディングできればよいのでしょうが、古いサイトをレスポンシブデザインに対応させるときなど、膨大なページのHTMLを直接修正するのは困難なことも多いでしょう。

そんな時は{display:none;}を上手に活用してデザインしましょう。

SNSでもご購読できます。