アイキャッチ画像
HOME > ウェブデザイン > 【CSS】PCとスマホで表示内容を振り分ける
記事公開日:2020.12.12
この記事は約1分で読めます。

【CSS】PCとスマホで表示内容を振り分ける

PCとスマホで異なるテキストや画像を表示させたい時に使えるTipsをご紹介します。

たとえばPCでは横幅768pxのアドセンス広告を表示させてスマホでは横幅300pxの広告を表示させるとかですね。

スポンサーリンク

スポンサーリンク

設定方法

以下のコードをスタイルシートに加筆します。

(※下記コードはあくまで一例です)

コードの中身は画面幅1000pxを分岐点とし、PCとそれ以外(タブレット&スマホ)に分けた設定になってます。

HTML上は「pc_contents」というクラスを付けたブロックはPC上でのみ表示され、「sp_contents」というクラスを付けたブロックはPC上では非表示になりスマホ&タブレットでのみ表示されるようになります。

ここではPCの画面表示を1000pxに設定してますが、この数値を減らせばPC&タブレットとそれ以外(スマホ)という設定にも変えられます。

※クラスではなくphpやショートコードで振り分けるやり方もあります。

詳細はこちら↓の「PCとスマホで表示内容を振り分ける(テーマファイル)」と「PCとスマホで表示内容を振り分ける(投稿内)」をご覧ください。

【Volar】サイトイメージ画像

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)