【CSS】PCとスマホで表示内容を振り分ける
この記事は最終更新日から3年以上経過しているため現状にそぐわない可能性もあります。
PCとスマホで異なるテキストや画像を表示させたい時に使えるTipsをご紹介します。
たとえばPCでは横幅768pxのアドセンス広告を表示させてスマホでは横幅300pxの広告を表示させるとかですね。
設定方法
以下のコードをスタイルシートに加筆します。
（※下記コードはあくまで一例です）
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*コンテンツの振り分け*/ .sp_contents { display:block; } .pc_contents { display:none; } @media screen and (min-width:1000px) { .pc_contents { display:block; } .sp_contents { display:none; } } |
コードの中身は画面幅1000pxを分岐点とし、PCとそれ以外（タブレット＆スマホ）に分けた設定になってます。
HTML上は「pc_contents」というクラスを付けたブロックはPC上でのみ表示され、「sp_contents」というクラスを付けたブロックはPC上では非表示になりスマホ＆タブレットでのみ表示されるようになります。
ここではPCの画面表示を1000pxに設定してますが、この数値を減らせばPC＆タブレットとそれ以外（スマホ）という設定にも変えられます。
※クラスではなくphpやショートコードで振り分けるやり方もあります。
詳細はこちら↓の「PCとスマホで表示内容を振り分ける（テーマファイル）」と「PCとスマホで表示内容を振り分ける（投稿内）」をご覧ください。
スポンサーリンク
記事はお役にたてましたか?
記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓