【HTML/CSS】パソコンとスマホで表示内容を切り替える方法

こんにちは！CODE CLUB965のKです！

今回は、PCとスマホ（タブレット）で表示する内容を切り替える方法について書こうと思います。

例えば、パソコンでは画像を表示したいけど、スマホでは画像を表示したくないなどデバイスによって表示する内容を変えたい場合は結構あると思います。

そんなときに使える方法です。

HTMLとCSSだけで対応できる方法なので非常に簡単にできます。

1.head内に記述する

まずは、head内に以下を記述しましょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

この記述をしておかないと動かないので気をつけましょう。

2.パソコンとスマホで表示する内容をdivタグで記述する

まずは、HTMLファイルでパソコンで表示する内容とスマホで表示する内容のところをそれぞれdivタグで記述します。

<div class="for-pc">
  パソコンの時に表示する内容
</div>
<div class="for-sp">
  スマホの時に表示する内容
</div>

こんな感じで書けばOKです。

2.CSSファイルに記述する

次に、パソコンとスマホで表示内容を切り替えるためにCSSに以下のように記述します。

.for-pc { display:block; }
.for-sp { display:none; }

@media only screen and (max-width : 767px){
  .for-pc { display:none; }
  .for-sp { display:block; }
}

これは、画面のサイズによって表示内容を切り替えるための記述です。
なので、厳密に言うとパソコンとスマホで表示内容を変えているわけではありません。

表示画面のサイズで切り替えていることを理解しておいて下さい。

上記の内容の意味は、

画面サイズが767pxまでは「for-sp(スマホの内容)」を表示し、768px以上は「for-pc(パソコンの内容)」を表示する

となります。

これだけで、パソコンとスマホで表示内容を切り替えることができます。
簡単ですね！

最後に

今回は、画面のサイズによって表示内容を切り替える方法を紹介しました。
実際レスポンシブ対応する場合は、画面のサイズで表示内容を切り替えて対応します。

なので、パソコンとスマホという概念でちゃんと分けて対応するわけではありません。
あくまでデバイスの画面サイズごとに対応していることを理解しておきましょう。

それでは、また！

Follow me!