レスポンシブデザインで画面幅に応じて改行位置を制御するには、CSSの「display」でbrタグを表示・非表示に切り替える方法が最も確実です。PCでは1行に収まる見出しも、スマホでは横幅が足りずに不自然な位置で改行されてしまうことがよくあります。この記事では、そんな「改行のズレ」を防ぐための具体的なCSSの書き方を、初心者の方にもわかりやすく解説します。brの制御・displayの切替・メディアクエリ・最新のtext-wrapまで、現場で本当に使う手法だけを厳選してお届けします。
なぜレスポンシブで改行位置の調整が必要なのか
結論から言うと、PCとスマホでは表示できる横幅が大きく違うため、改行位置を調整しないと見出しやキャッチコピーが読みにくくなってしまうからです。特に日本語は単語の区切りが英語ほど明確ではないため、意図しない場所で文章が折り返され、印象が崩れてしまいます。
たとえば「ユーザー体験を革新する5つのテクニック」という見出しがあったとします。PCでは横幅にゆとりがあるので1行できれいに収まりますが、スマホでは「ユーザー体験を革新する5つのテ」で折り返され、残りの「クニック」だけが2行目に取り残されてしまう、といったことが起こります。こうした「ぶら下がり」（行末に1〜2文字だけ残ってしまう状態）は、見た目の美しさを損なう大きな原因になります。
だからこそ、画面幅（ビューポート幅）に応じて「ここで改行してほしい」「ここでは改行しないでほしい」をCSSでコントロールする技術が、Web制作の現場では欠かせないのです。
brタグを表示・非表示で切り替える方法（最も確実）
改行位置を狙いどおりに制御したいなら、brタグ（改行タグ）にクラスを付け、displayプロパティで表示・非表示を切り替える方法が最も確実です。「PCでは改行しない」「スマホでは改行する」といった指定が、意図したとおりにできます。
まずHTMLで、改行を切り替えたい位置にクラス付きのbrタグを置きます。
<h2 class="heading">ユーザー体験を革新する<br class="only-sp">5つのテクニック</h2>次にCSSで、通常（PC）はこのbrを非表示にし、スマホの幅になったときだけ表示させます。ここでメディアクエリ（画面幅ごとにスタイルを切り替える仕組み）を使います。
.only-sp { display: none;}@media screen and (max-width: 767px) { .only-sp { display: block; }}この方法のメリットは、工数が少なく、改行位置を確実に指定できることです。一方で注意点もあります。「767px以下」という基準を1つ決めて作るため、それより極端に小さい（あるいは中間の）画面幅では、想定どおりのデザインにならないことがあります。あくまで「代表的なスマホ幅」に最適化する手法だと理解しておきましょう。
brを使わずにdisplayで自動改行させる方法
brタグを1つずつ管理するのが大変な場合は、テキストを複数のspanで囲み、display: inline-blockを使って「幅が足りなくなったら自動で改行させる」方法もおすすめです。文の意味のかたまりごとに改行させたいときに便利です。
やり方はシンプルで、改行させたいかたまりをそれぞれspan（インライン要素をまとめるタグ）で囲みます。
<h2 class="heading"> <span>ユーザー体験を革新する</span><span>5つのテクニック</span></h2>.heading span { display: inline-block; text-align: center; line-height: 1.75;}display: inline-blockを指定すると、各spanが1つの「箱」として扱われます。親要素の幅に収まるうちは横に並び、幅を超えた瞬間にかたまりごと下へ折り返されます。つまり単語の途中で切れず、意味のまとまりで改行できるわけです。
ただし、この方法にも弱点があります。画面幅が中途半端に狭い状態では、かたまりが横に並びきれず不自然な改行が起きることがあります。使いどころとしては「2〜3個のかたまりに分けたい見出し」に向いていると考えておくとよいでしょう。
text-wrapやword-breakで折り返しを整える方法
近年のCSSでは、brやspanを使わずにプロパティ1つで改行バランスを整える方法も登場しています。手軽さを重視するなら、まずtext-wrapプロパティを試すのがおすすめです。
「text-wrap: balance」は、各行の文字数ができるだけ均等になるように自動調整してくれるプロパティです。行末に1文字だけ残る「ぶら下がり」を防ぎやすくなります。短い見出しやキャッチコピーに向いています。
.heading { text-wrap: balance; }はみ出し対策には、word-break（単語の区切り方）とoverflow-wrap（あふれたときの折り返し）が役立ちます。用途に応じて次のように使い分けます。
- overflow-wrap: break-word：普通の文章やURLで、はみ出したときだけ途中で折り返したい場合に使います。可読性を保ちやすい「緊急措置」です。
- word-break: break-all：IDやファイル名など、意味を持たない長い文字列を確実に折り返したい場合に、文字単位で強制改行します。
- word-break: keep-all：日本語などのCJKテキストで、単語の途中改行を避けたいときに使います。
.text { overflow-wrap: break-word;}なお、text-wrap: balanceは英語（アルファベット）に比べると日本語では効果が控えめな場合があります。長い本文よりも、短い見出しに絞って使うのがコツです。
改行制御でよくある質問（FAQ）
最後に、レスポンシブの改行制御でよく寄せられる疑問をQ&A形式でまとめます。実装前に押さえておくと迷いが減ります。
Q1. brタグとspanのどちらを使えばいいですか？
A. 改行位置をピンポイントで確実に指定したいならbrタグ、意味のかたまりごとに柔軟に改行させたいならspan（inline-block）がおすすめです。1〜2箇所の見出しならbr、複数のかたまりに分けたいならspanと覚えておくと迷いません。
Q2. メディアクエリの基準は何pxにすればいいですか？
A. スマホとPCの境目として「767px」を使うのが一般的です。ただし、サポートするデバイスの範囲を事前に決めておくことが大切です。想定外の画面幅では崩れる可能性があるため、あらかじめ対象を絞っておきましょう。
Q3. 本文（長い文章）にも改行制御を入れるべきですか？
A. 基本的におすすめしません。長い本文に手動で改行を入れると、画面幅が変わったときに崩れやすくなります。意図的な改行は見出しやキャッチコピーなど短い箇所に限定し、本文はブラウザの自動折り返しに任せるのが安全です。
まとめ
レスポンシブの改行制御は、「brをdisplayで切り替える」「spanのinline-blockで自動改行させる」「text-wrapやword-breakで折り返しを整える」という3つの考え方を、場面に応じて使い分けるのがポイントです。どの手法も、まず「どのデバイスまで対応するか」を決めてから設計すると、崩れにくく美しい表示になります。
とはいえ、実際のデザインでは「どこで改行すれば一番読みやすいか」の判断が難しい場面も多いものです。改行制御を含めたレスポンシブ対応やコーディングでお困りの際は、ぜひ私たちTHREE D PLUSにご相談ください。見やすく成果につながるWebサイトづくりを、経験豊富なスタッフがしっかりサポートいたします。
