2つの表示させない方法
文字などを表示させない手法として、「visibility:hidden;」 「 display: none;」があります。それぞれの追いは以下の通りです。ここでは特に後者のほうを取り上げます。
visibility:hidden;
レイアウト領域を確保したまま、文字のみを不可視にする
display:none;
レイアウト領域も文字も不可視にする
display:none;の使い方
- 使用時の注意点
これまで述べてきたように、スマートフォンという限られた画面枠の中で効率的に閲覧させるためにも、一部のコンテンツを非表示にすることがあります。このためのcssの手法が、プラスボタンやアコーディオンメニューなどでも利用されている「disply:none;」です。
注意として、ユーザーや検索エンジンをあざむくことが目的で使用すると、ガイドライン違反となり問題になってしまいます。しかし、モパイルサイトページでの初期設定においてコンテンツを隠すことは、Googleも問題はないとの見解を示しています。
- 正しく使えば問題ない
つまり、display:none;は、デバイスにおけるアクセシビリティなどの理由により、見せ方(特有な表示の実現)のために用いる場合は、Googleからも認められているということです。レスポンシブ、Webデザインで一般的に用いている表現方法としてならば、display:none;の利用は、特に問題ないと考えてください。