【HTML・CSS】スマホとPCで文章の改行位置を変える方法

スマホとPCで文章の改行位置を変える方法

今回はよく使われているテクニックを2つご紹介します。

1. <br>の表示・非表示を切り替える
2. <span>の種類（ブロック要素・インライン要素）を切り替える

シンプルにスマホとPCで改行位置を変更したい場合は①を、前後の余白やスタイルも切り替えたい場合には②が活躍するでしょう。

それぞれ順番に説明していきます。

① <br>の表示・非表示を切り替える

まずはシンプルに文章の途中で改行させたい場合に用いる<br>を使ったテクニックをご紹介します。
※ 基本的にこちらの方法を押さえておけば問題ないです！

<p>スマホのときだけ<br class="sp-only">改行します！</p>

.sp-only {
  display: none;
}

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

上の出力結果はPCサイズだと一行に並んで表示されますが、スマホサイズ（ブラウザの横幅が576px以下）で閲覧した際に「改行します！」の前で改行して表示されます。

パソコンで見ている人はブラウザの横幅を広めたり狭めたりして確認してみてね！

解説

<br>にsp-onlyというクラスを付与し、CSSのメディアクエリ@media screen and (min-width: 576px)でブラウザの横幅が575pxより狭い場合にdisplay: none;を効かせて改行を無効にさせる仕組みです。

② <span>の種類（ブロック要素・インライン要素）を切り替える

続いて、スマホとPCによって改行位置の他に余白やスタイルも変更したい場合に活躍する<span>を使用したテクニックをご紹介します。

<p><span class="question-mark">Q.</span>昨日の夕食なに食べた？</p>

.question-mark {
  color: #EB6101;
  font-weight: bold;
  margin-right: 0.5em;
}

@media screen and (max-width: 575px) {
  .question-mark {
    display: block;
    margin-right: 0;
  }

}

上の出力結果も先ほどと同様にPCサイズだと一行に並んで表示されますが、スマホサイズ（ブラウザの横幅が576px以下）で閲覧したときは「Q.」の後ろで改行して表示されます。

パソコンで見ている人はブラウザの横幅を広めたり狭めたりして確認してみてね！

解説

こちらのテクニックでは、文章の中に配置している<span>（インライン要素のため、文章の途中に置いても以降の文章が改行されることはない）をスマホサイズの時だけdisplay: block;を指定しブロック要素に変えることで改行させています。

①でご紹介した<br>の方がシンプルでわかりやすいですが、例の「Q.」のように前後のテキストとスタイルが異なる際に一括で処理できるのが<span>を使用するメリットです。

意外と使う場面は多いので、ぜひマスターしてくださいね！

まとめ

スマホとPCで文章の改行位置を変える方法は以下の2通り。

1. <br>の表示・非表示を切り替える
2. <span>の要素の種類（ブロック・インライン）を切り替える

①は<br>タグに対してブレイクポイントごとにdisplay: none; またはdisplay: block;を指定し、改行を切り替える。

②は文章内に配置した<span>タグに対してブレイクポイントごとにdisplay: inline;またはdisplay: block;を指定し改行の無効・有効を切り替える。

通常は①の方がシンプルで使いやすいが、スマホとPCで余白やスタイルの切り替えも行いたい場合に②が一括指定できて便利。レイアウトに併せて上手く使い分けよう！