レスポンシブサイトで「スマホでは表示させるがPCでは表示させない」などの設定方法

スポンサーリンク

WordPressに限らずレスポンシブサイトでは、スマホで見た時とPCで見た時の表示させる画像を変更したいというケースが結構良くあったりします。

さらにPC用に文字サイズを調整していたら、スマホで見た時に酷いことになったというケースもあります。

今回はデバイスの画面サイズによって表示を変える方法について紹介したいと思います。

画像の表示・非表示を画面サイズで切り替える方法

元となるhtml

<div class="pconly">
<img src="http://www.~~~~">
</div>

<div class="sponly">
<img src="http://www.~~~~">
</div>
【解説】画像のタグを、「PCのみで表示させるよ~」ということを分かりやすくするために「<div class=”pconly”>」で囲ってみました。
「<div class=”sponly”>」は「スマホのみで表示させるよ~」を分かりやすくしています。※sp=SmartPhoneの頭文字の意。

画像をPCのみで表示させる場合(=スマホでは非表示にする場合)のCSS

@media screen and (max-width: 640px){
.pconly{display:none;}}
【解説】『@media screen and (max-width: 640px){ここにcssを書く}』で「640px以下の画面サイズではこのcssを反映させるよ」ということを書いています。
注意するのは、普段書いているcssをさらに{}で囲むのを忘れないように!(max-width:◯◯px)を(min-width:◯◯px;)にすると、「◯◯px以上の画面のサイズではこのcssを反映させるよ」になります。
「display:none;」が非表示にするcssなので、640px以下では「<div class=”pconly”>」内のものは非表示にするというCSSになっています。

画像をスマホのみで表示させる場合(=PCでは非表示にする場合)のCSS

@media screen and (min-width: 640px){
.sponly{display:none;}}
【解説】『@media screen and (min-width: 640px){ここにcssを書く}』で「640px以上の画面サイズではこのcssを反映させるよ」ということを書いています。スマホで非表示にする場合と逆ですね。同じように注意事項としては普段書いているcssをさらに{}で囲むのを忘れないようにしてください。

PCとスマホで文字サイズを変える

元となるhtml

<div class="patternA">
<p>文字サイズを変える</p>
</div>

CSS

@media screen and (max-width: 640px){
.patternA p{font-size:14px;}}

@media screen and (min-width: 641px){
.patternA p{font-size:20px;}}
【解説】上の『@media screen and (max-width: 640px)』で、スマホではフォントサイズを14pxにするように書いています。
下の『@media screen and (min-width: 641px)』でPCの時はフォントサイズを20pxにするように書いています。
「640px」ではなく「641px」にしているのは、スマホで640px以下と規定しているため、同じ640pxが重複しないようにしています。

スマホ・タブレット・PCの3段階で表示を変える方法

今度はスマホとPCだけでなく、タブレットの時の表示を変える方法も合わせて書いてみます。
と言っても、サイズを「~以下の時」「~以上~以下の時」「~以上」の3段階で規定するだけで、やることは前述と変わりありません。

元となるhtml

<div class="patterB">
<p>文字サイズを変える</p>
</div>

3段階のCSS

@media screen and (max-width: 640px){
.patternB p{font-size:14px;}}

@media screen and (min-width:641px) and (max-width: 750px){
.patternB p{font-size:18px;}}

@media screen and (min-width: 751px){
.patternB p{font-size:20px;}}
【解説】上から順に「画面サイズが640px以下での表示」「画面サイズが641px以上、750px以下での表示」「画面サイズが751px以上の表示」となっています。
真ん中の「◯◯以下◯◯以上」の書き方は、『@media screen and (min-width:◯◯px) and (max-width: ◯◯px)』と書くだけでOKです。他の場合の注意事項と同じように、普段書いているcssをさらに{}で囲むのを忘れないようにしてください。

以上がレスポンシブサイトの表示をデバイス毎に変更する方法になります。

CSS

Posted by koyasu