画面が小さいときだけ <br> を効かせたい話（CSSでやる）

2026/3/2 CSS

こんにちは、さるまりんです 🐒

タイトルや見出しを書いていると、こう思うことがあります。

スマホのときだけ、ここで改行したい…

たとえばこんな感じ。

<h2>
  PostgreSQLで日付フィルタを書くときに
  気をつけていること
</h2>

PCでは1行でいい。
でもスマホでは2行に分けたい。

そんなとき、どうしていますか？

今日は「画面が小さいときだけ改行する」シンプルな方法をまとめます。

方法①：<br> にクラスをつける

一番シンプルな方法です。

<br>そのものにclassをつけます。

HTML

PostgreSQLで日付フィルタを書くときに<br class="sp-only">
気をつけていること

CSS

.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .sp-only {
    display: inline;
  }
}

これだけです。

  • PCでは非表示
  • スマホ幅では表示

<br> は inline 要素なので、
display: inline; にすれば普通に改行として効きます。

方法②：HTMLを汚したくない場合

「できれば <br> を書きたくない…」
そんなときは、CSSで改行を“差し込む”こともできます。

CSSだけで改行を入れる

@media (max-width: 768px) {
  .break-on-sp::before {
    content: "\A";
    white-space: pre;
  }
}

HTML

<h2>
  PostgreSQLで日付フィルタを書くときに
  <span class="break-on-sp"></span>
  気をつけていること
</h2>

content: "\A"; って何？

ここがポイントです。

\A

これは 改行コード（LF:ラインフィード） を表します。

つまり、

content: "\A";

は

ここで改行を入れる

という意味になります。

なぜ white-space: pre; が必要？

通常、CSSは改行コードを無視します。

なので、\A を入れても、そのままだと改行されません。

white-space: pre;

を指定することで、

改行コードを改行として扱う

ようになります。

セットで覚えておくと便利です。

どの方法を使う？

<br> を制御する方法

  • わかりやすい
  • 読んだ人も理解しやすい
  • 保守しやすい

個人的にはこれが一番好きです。

::before + "\A" の方法

  • HTMLを汚さない
  • デザイン制御向き
  • 少しテクニカル

ちょっとしたトリックとして覚えておくと便利です。

ちょっとした応用

同じ考え方で：

  • PCだけ改行
  • タブレットだけ改行
  • 特定の幅だけ改行

もできます。

@media の条件を変えるだけです。

まとめ

  • スマホだけ改行したいときは <br> を制御する
  • CSSだけで改行を差し込むこともできる
  • \A は改行コード
  • white-space: pre; が必要

ほんの少しのCSSですが、
デザインの仕上がりがきれいになります。

こういう“小さなコントロール”ができると、
地味にうれしいですよね。

読んでくださってありがとうございました。

それではまた 🐒🔧