スマホとPCで表示・非表示を切り替える

スマートフォンとパソコンで、表示する情報を変えたい時があります。

本ページでは、スマートフォンとパソコンで表示する情報を切り替える方法を説明します。

スマートフォンで非表示にする

パソコンでは1画面内に多くの情報を表示できますが、スマートフォンでは1画面に表示できる情報が少なくなります。

このため、スマートフォンで表示した時、ページが長くなりすぎないように非表示にすることもできます。非表示にしたい場合は、スマートフォン用のCSSファイルで以下のようにします。

【スマートフォンで非表示にするCSSの例】
.test {
  display: none;
}

display:none;を宣言すると、その要素は画面上に表示されません。

HTMLは、以下です。

【スマートフォンで非表示にするHTMLの例】
<p class="test">非表示にしたい情報</p>

上記により、パソコンで見た時は文字が表示されますが、スマートフォンで見た時に表示されなくなります。

これは、テキストの例ですが、img要素にクラスtestを適用すると画像が非表示になります。また、divなどで囲った範囲全体を非表示にすることもできます。

なお、スマートフォンの時だけCSSを適用するためには、メディアクエリを使う必要があります。詳細は、「メディアクエリの書き方」をご参照ください。

パソコンで見た時と内容を切り替える

スマートフォンで見た時と、パソコンで見た時に、表示する情報を切り替えることもできます。以下は、スマートフォン向けのCSSです。

【スマートフォンのCSS】
.test1 {
  display: block;
}

.test2 {
  display: none;
}

以下は、パソコン向けのCSSです。

【パソコンのCSS】
.test1 {
  display: none;
}

.test2 {
  display: block;
}

display:noneの要素は非表示になり、display:blockの要素は表示されます。

HTMLは、以下です。

【パソコンとスマートフォンで表示内容を切り替えるHTMLの例】
<p class="test1">スマートフォンで表示</p>
<p class="test2">パソコンで表示</p>

上記により、スマートフォンで見た時は「スマートフォンで表示」、パソコンで見た時は「パソコンで表示」と表示されます。

img要素に適用すると、表示する画像を切り替えることもできます。