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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • レスポンシブのコーディングをする時に、pタグ内のテキストの改行位置をPC表示の時と別の位置にしたい
  • PC表示の時に改行していた箇所をスマホでは改行させないようにしたい
  • brタグにクラスを指定することってできるの…?

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

この記事で紹介する「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表示用の改行のスタイル

「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でメディアクエリを判定する方法も知りたい!」

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

jQueryでメディアクエリを判定する方法【.matchMedia()を使おう!】jQueryでメディアクエリを判定する方法【.matchMedia()を使おう!】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です