【CSS レスポンシブ】スマホとPCでテキストの改行の表示非表示を自由自在に変える方法

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

という方のお悩みを解決します！

この記事で紹介する「brタグにクラスを指定する方法」を実践すれば、PCとスマホで簡単に改行の表示非表示の切り替えができるようになります！

なぜならぼくも実際の案件でレスポンシブコーディングをする時に毎回使用しているからです！

この記事を読み終えると、あなたのcssスキルは1段階アップしていることでしょう〜！

PC表示用、スマホ表示用の改行の作り方

spつまり、スマートフォン表示の時のみ改行させたい場合は以下のように、該当のbrタグにspクラスをつけましょう。

brタグ設置

<p>
  テキストテキストテキスト<br class="sp">
  テキストテキストテキスト<br>テキストテキストテキスト
</p>

そして、spクラスにcssで「ブラウザサイズ768px以下の場合は表示、それ以上のサイズの場合は非表示」と書けばOKです！

brタグのスタイル

.sp{ display: none; }

@media screen and (max-width: 768px) {
  .sp{ display: block; }
}

「PCだけで改行させたい箇所があるんだけどその場合はどうしたらいいの？」

という方は、sp同様にpcクラスを該当のbrタグに付与してcssで切り替えればうまくいきます。

brタグ設置

<p>
  テキストテキストテキスト<br class="sp">
  テキストテキストテキスト<br class="pc">テキストテキストテキスト
</p>

brタグのスタイル

.sp{ display: none; }
.pc{ display: block; }

@media screen and (max-width: 768px) {
  .sp{ display: block; }
  .pc{ display: none; }
}

今回紹介したbrタグにクラスを指定する方法を使って改行を自由自在に制御できるようになりましょう〜！

そもそも、「brタグってクラス指定できたんかい！」と驚きを隠せない方もいらっしゃったでしょうね！笑

ぼくもこの方法知るまではいちいちそれぞれのクラスに表示非表示書いていて効率すごく悪かったです笑

知ってからはレスポンシブコーディングがより一層楽しくなったのでみなさんの参考になれば幸いです。

「CSSではなく、jQueryでメディアクエリを判定する方法も知りたい！」

という方は以下の記事で紹介しているのでチェックしてみてください〜！