PC・スマホ表示でHTMLコンテンツの表示・非表示を切り替える方法

2018年2月15日

WEBサイトを作る際に、例えばこんなことがあります。

PC版の表示では大きいバナーを表示して、
スマホ版表示ではコンパクトなバナーを表示したい。

バナーに限らず、コンテンツや改行など、様々な要素をPC・スマホで表示を切り替えることができます。
ここでは、その方法についてご紹介します。

画面サイズごとの振り分けを記述する

まずは、レスポンシブデザインの基本をおさらいしておきましょう。

PC版とスマホ版で表示を切り替える際には、メディアクエリ「@media」を使って、ブラウザサイズごとにCSSを記述していきます。

ちなみに、１つのファイル上で処理を振り分けるのではなく、PC用スタイルシートとスマホ版スタイルシートの２つを読み込ませる方法もあります。詳しくは以下の記事を参考にしてください。

デバイスごとにスタイルシートの適用を分ける方法

それぞれの記述エリアに、「PC版表示タグ」と「スマホ版表示タグ」を作っていきます。

このタグは、「display」プロパティを使って表示・非表示の切り替えを実現しています。

CSS

実際に、HTMLを記述する際にタグを使ってみましょう。

PC・スマホ表示切り替えサンプル

この例の他にも、「img」タグや「div」タグなどの幅広いHTMLタグでクラス名を指定するだけで、PC・スマホでの表示を切り替えることができます。

使い方のワンポイントとして、このタグを「改行」で使うということがあります。これにより、PC版、スマホ版のどちらでもテキストが読みやすいサイトに仕上がります。