レスポンシブサイトを作成していると、デザインの関係上、
PCサイトでは改行させたいけどスマホサイトでは改行させたくない…
とか
スマホサイトでは改行させたいけどPCサイトでは改行させたくない…
と思うことがあるかと思います。
そんなときに見てほしい記事。
デバイス別に表示非表示をするクラスを作るだけ！
実装方法はいたって簡単。
まず、以下の記述をcssに行います。
.pc_view{
display: block;
}
.sp_view{
display: none;
}
@media screen and (max–width: 768px){
.pc_view{
display: none;
}
.sp_view{
display: block;
}
}上記のコードは、
「pc_view」のクラスが付与された要素は、PCサイトでは表示され、スマホサイトでは非表示になり、
「sp_view」のクラスが付与された要素は、スマホサイトでは表示され、PCサイトでは非表示になります。
つまり、PCサイトでだけ表示させたい要素には「pc_view」を、
SPサイトでだけ表示させたい要素には「sp_view」を指定してあげればいいんです！
<p>この文章は、<br class="pc_view">パソコンで見ると改行されますよ</p>
上記の書き方なら、「この文章は、」のあと、PCサイトでは改行が起こり、スマホサイトでは改行が起こりません。
ちなみに、クラス名は分かりやすいものなら何でもいいです。
「.pc_show」でも「.pc_only」でも「.pc」でも、役割が分かる命名ならオールオッケー。
このワザは、改行だけじゃなくて、ボックス自体を表示/非表示するのにも使えます。
どうしてもボックスの表示切替をしないとデザインの再現が出来ない…とお悩みのコーダーさんは、ぜひ活用してみてくださいね◎
