レスポンシブサイトで、PCだけ表示・スマホだけ表示ってできるの？【PCとスマホで改行位置や画像を切替える方法】

前回、前々回とレスポンシブについての記事を書いています(^^)
ここ最近、WEB関係者っぽい・・・(=w=)でも取り扱いがレスポンシブという今更感…
もありますが、まだやったことない方とか、これからはじめる方はぜひどうぞ！

スマホでは消す！PCでは表示させる！

レスポンシブではスマホとPC、どちらも同じhtmlを使用しますので、スマホでは表示させたくないものが出てきたり、逆もあります。
例えば…

スマホ用とPC用の画像を表示させたい

そう、例えばファーストビューの定番はスマホは縦長画像、PCは横型画像ですよね。
この場合、スマホとPCで画像の表示を切り替えたい！という要望が出てきます。


今回ご紹介する方法は、このような場面で便利です。

デバイスサイズによってdisplay:noneを使い分ける

そこで、メディアクエリでブレイクポイントを使って、デバイスサイズごとにdisplay:noneにして切り替えましょう！
表示させたくない時に、display:noneを使って要素を表示させないようにします。

①まずはこのclassを作っておきましょう！

/*PCの場合*/
.pc	{ display:inline!important; }
.mb	{ display:none!important; }
@media screen and (max-width: 768px) {
/*タブレット、スマホの場合*/
.pc	{ display:none!important; }
.mb { display:inline!important; }
}

今回は768px以下をスマホとします！
どちらも、display:noneとdisplay:inlineを入れ替えていますね。
こちらが今回の鍵となりますが、display:inlineとしている値はお好きな表示に変えてください。
「display:block」でも「display:static」でも…用途に合わせて使ってくださいね。

②次にこちらのclassをhtmlの該当要素に設置します！

PCでは表示させたいけど、スマホでは表示させたくない部分に「.pc」のクラスを追加。
スマホでは表示させたいけど、PCでは表示させたくない部分に「.mb」のクラスを追加。


これで終わりです！！
こうすることで、display:noneとしていた要素が現れることになり、現れていた要素がdisplay:noneで隠れることになります。

使用例はこちら

/*PCの時に表示させたい画像*/
<img class="pc" src="/top_pc.png">
/*スマホの時に表示させたい画像*/
<img class="mb" src="/top_mb.png">

おまけ：改行位置も変えられます！

スマホとPCで、改行位置を変えたい場合がありますよね。


なんかWEBデザイナー側からしたら改行位置が違うのなんてデバイスによるし当たり前だと思うのに、紙専門のグラフィックデザイナーやライター……リテラシーの低い担当者からだと、異様なまでに改行位置についてつっこまれることがあります。
もちろん、グラフィックを習っていたときは、改行位置や文字詰めなんかに本当〜〜〜に厳しく見ていたので、わかるのですが、あまりbrを多様したくないし、brつかったとしてどんなにうまくやっても、デバイスによっては予期せぬところで改行されることだってあります…。
なのでその苦労も知らないで！と腹立つこともありますが…


それを少しでも解消するために、スマホとPCの改行位置を変えたいときにこちらをぜひ使ってみてください。




使い方としては、先程のclassを以下のように挿入します。

<p>あいうえおかきくけこ<br class="mb">さしすせそ</p>

これで、スマホのときのみ、かきくけこの後・さしすせその前で改行されます！
改行を表す「br」が、768px以上のデバイス…PCのときにはdisplay:noneで消されているからですね。

以上です。お試しください〜！