お悩み一覧に戻る

PCでは表示するけど、SP（スマホ）では表示しないみたいな出し分けをしたい

2025.03.23

PCとSPでコンテンツを出し分けたいときの方法

Webサイトのデザインでは、PCとスマートフォン（SP）で異なるナビゲーションバーやコンテンツを表示したい場合があります。この記事では、HTMLとCSSを使ってその方法を解説します。

コンテンツの出し分け

PCとSPでコンテンツを切り替えるには、以下のコードを参考にしてください。

<div class="sp-only">
    SPの時に表示したいコンテンツ
</div>
<div class="pc-only">
    PCの時に表示したいコンテンツ
</div>
/* PC用のコンテンツはdisplay: noneで隠しておきます */
.pc-only {
    display: none;
}

@media screen and (min-width: 768px) { /* メディアクエリは作成しているサイトのものを使ってください */
     /* PC用のコンテンツをdisplay: blockで表示し、SP用を逆に隠します */
    .sp-only {
        display: none;
    }

    .pc-only {
        display: block;
    }
}

注意点

  • 多用しない：表示されていないコンテンツが存在することになるため、使いすぎには注意しましょう。
  • 情報の独占禁止：この手法を使って、PC（あるいはSP）でしか見られない重要な情報を配置するのは避けましょう。すべてのユーザーが等しく情報にアクセスできるようにすることが大切です。

画像を出し分けたい

PCとSPで表示する画像の大きさを変えたいときなどは、下記のように<picture>要素を使いましょう。

まず、前提として、SP用とPC用の画像をそれぞれ用意してください。

<picture>要素の中に<source>要素を置きます。<source>要素のmedia属性はCSSのメディアクエリと同じ役割です。srcset属性では、<img>要素のsrc属性と同じように画像を指定します。

↓では横幅768px以上でPC用の画像が表示されるような設定になっています（<source>要素を複数使えば、さらに画像を切り替えられます）。<img>要素を使って横幅768px未満の時に表示されるSP用画像を指定します。

<picture>
    <source media="(min-width: 768px)" srcset="images/image.jpg"> <!-- PC用の画像 -->
    <img src="images/image-sp.jpg" alt="Altテキストを書きます"> <!-- SP用の画像 -->
</picture>

ポイント

  • alt属性には画像の代替テキストを記述し、アクセシビリティの向上に努めましょう。

この方法を活用することで、デバイスごとに最適なレイアウトや画像を効率的に管理できます。

関連したお悩み

お悩み一覧に戻る