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

 

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

 

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

 

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

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

 

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

 

 

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

 

 

「PC版表示タグ」「スマホ版表示タグ」を作る

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

 

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

 

CSS

 

実際のHTMLでタグを使ってみる

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

 

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

 

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

 

合わせて知っておきたい使い方

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

 

 

 

おすすめの記事