レスポンシブで改行位置をPC・SPで切り替える方法｜CSSだけで簡単実装
レスポンシブWebデザインでコーディングをしていると、「PCで見たときはこの位置で改行したい、でもスマホでは改行されると逆に読みにくい」という場面によく出くわします。
画面サイズによってテキストの折り返し位置は変わるため、基本的には自動で流すのが理想ですが、見出しやキャッチコピーなど デザイン上どうしても改行位置を制御したいケース は必ず発生します。
この記事では、CSSだけで実装できる定番のテクニックから、<wbr>タグやword-break: keep-allを使った最新の手法まで、用途別にわかりやすく解説します。
なぜレスポンシブで改行制御が必要なのか
PCサイズで作成したデザインをそのままスマホ表示すると、画面幅が狭くなる影響で、文章の折り返し位置が崩れてしまいます。
特に以下のような問題が発生しがちです。
- 見出しの途中で不自然に折り返されて読みづらい
- キャッチコピーの語句が分断され、意味が伝わりにくい
- デザインの視覚的なバランスが崩れる
文章は「読みやすい位置で改行されているか」がそのままユーザー体験（UX）に影響します。SEOの観点でも、滞在時間や直帰率に関わる重要な要素なので、デバイスごとに最適な改行を実装しましょう。
方法1：CSSで<br>タグの表示を切り替える【定番】
もっともシンプルで広く使われている方法です。<br>にクラスを付けて、メディアクエリで表示・非表示を切り替えます。
PC・SPの2デバイスで切り替えるCSS
ブレイクポイントを 750px とした場合の例です。
/* デフォルト（750px未満＝SP）はSPの改行を有効化 */
.pc { display: none; }
.sp { display: inline; }
/* 750px以上（PC）はPCの改行を有効化 */
@media screen and (min-width: 750px) {
.pc { display: inline; }
.sp { display: none; }
}HTMLの記述例
<p>PCのみで改行したいな〜！<br class="pc">わーい！</p>
<p>SPのみで改行したいな〜！<br class="sp">わっしょい！</p><br>はもともとインライン要素なので、表示するときは display: inline; を指定するのがポイントです。display: block; を使うと、ブラウザによっては余分なスペースが入ってしまう場合があるため避けましょう。
モバイルファーストで書くのがおすすめ
近年はモバイルファーストでCSSを書くのが主流です。スマホ表示をベースにして、PC用はmin-widthで上書きする 形にすると、メンテナンス性が高くなります。
方法2：PC・タブレット・SPの3段階で切り替える
タブレット表示も含めて細かく制御したい場合は、ブレイクポイントを2つ設定します。
CSS
/* デフォルト（520px未満＝SP） */
.pc { display: none; }
.tb { display: none; }
.sp { display: inline; }
/* 520px以上（タブレット） */
@media screen and (min-width: 520px) {
.pc { display: none; }
.tb { display: inline; }
.sp { display: none; }
}
/* 960px以上（PC） */
@media screen and (min-width: 960px) {
.pc { display: inline; }
.tb { display: none; }
.sp { display: none; }
}HTMLの記述例
<p>PCのみで改行したいな〜！<br class="pc">わーい！</p>
<p>タブレットのみで改行したいな〜！<br class="tb">すごーい！</p>
<p>SPのみで改行したいな〜！<br class="sp">わっしょい！</p>ブレイクポイントは扱うサイトのデザインに合わせて調整してください。520px / 960px は近年のスマホ・タブレットの主要サイズに対応した一例です。
方法3：<wbr>タグとword-break: keep-allを使う【最新】
近年注目されているのが、HTML5の <wbr> タグ（Word Break Opportunity）を活用する手法です。「ここで改行してもいいよ」という候補位置を指定 する仕組みで、画面幅に応じて自動的にいい感じに折り返してくれます。
CSS
.break-keep {
word-break: keep-all;
}HTML
<p class="break-keep">
これは長めのテキストの文章になります。<wbr>スマホになるとここで改行します。
</p>word-break: keep-all で日本語の自動改行を抑制し、<wbr> を入れた箇所だけが改行候補になります。
メリット
- メディアクエリの記述が不要
- 文章量が変わっても柔軟に対応できる
- コードがシンプルに保てる
注意点
- 英数字や記号（ハイフン、スラッシュなど）の前後では
keep-allが効かない場合がある - 厳密な「PCのみ改行」「SPのみ改行」の制御には不向き
「だいたいこの辺りで折り返したい」という曖昧な制御をしたい場合に最適です。
方法4：<span>にdisplay: inline-blockを指定する
改行したくないフレーズを <span> で囲み、display: inline-block を指定する方法もあります。画面幅が足りなくなったタイミングで自動的に改行 されるため、フレーズ単位での文意のまとまりを保てます。
CSS
.phrase {
display: inline-block;
}HTML
<p>
<span class="phrase">ミツバチが花の蜜を採集し、</span><span class="phrase">巣の中で加工、貯蔵したものが</span><span class="phrase">蜂蜜です。</span>
</p>フレーズの途中では絶対に改行されないため、見出しやキャッチコピーで重宝します。<span>間に発生するスペースが気になる場合は、親要素に font-size: 0; を指定し、<span>側で改めて font-size を設定すると解消できます。
どの方法を使うべきか？用途別の選び方
| 用途 | おすすめの方法 |
|---|---|
| デザインカンプ通りにPC/SPで厳密に改行を切り替えたい | 方法1または方法2（<br>＋メディアクエリ） |
| 画面幅に応じて柔軟に改行させたい | 方法3（<wbr> + word-break: keep-all） |
| 文意のまとまりを保ったまま自動改行したい | 方法4（<span> + display: inline-block） |
シンプルで実装しやすいのは方法1ですが、メンテナンス性や柔軟性を求めるなら方法3も覚えておくと便利です。プロジェクトの要件に合わせて使い分けてみてください。
まとめ
レスポンシブデザインで改行位置を切り替える方法を4パターン紹介しました。
<br>タグ＋メディアクエリで制御（PC/SP）<br>タグ＋メディアクエリで制御（PC/タブレット/SP）<wbr>タグ＋word-break: keep-allで自動制御<span>＋display: inline-blockでフレーズ単位制御
文章の読みやすさはユーザー体験に直結し、SEO評価にも影響します。デザインの意図を正しく実装して、すべてのデバイスで読みやすいサイトを目指しましょう。
