こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
見出しの改行、どうしていますか？
- いい感じに見せるためにbrタグを入れる
- スマホで崩れてまた調整する
- タブレットでさらにズレる
これ、正直かなりストレスですよね。
一度整えたはずの見出しが、
画面サイズが変わるたびに崩れる。
そのたびに、
「ここで改行かな…」
「いや、やっぱり1文字前…」
と、微調整のループに入る。
この作業、2026年はもう必要ありません。
なぜなら、
ブラウザが“いい感じに”改行してくれる時代になったからです。
それが今回紹介する
text-wrap: balance;というプロパティです。
たった1行書くだけで、
- 行の長さが均等になる
- 不自然な改行がなくなる
- レスポンシブでも崩れない
という状態を作れます。
「改行を調整する」という作業そのものが消えます。
この記事では、
小学生でもわかるように、
「なぜ必要なのか」から「実務での使い方」まで
具体例つきでしっかり解説します。
読み終わる頃には、
もうbrタグに頼ることはなくなります。
結論：たった1行で改行問題は終わる
まず結論です。
h1 { text-wrap: balance; } これだけです。
本当にこれだけで、見出しが自然に整います。
なぜ見出しは崩れるのか？
ブラウザは“最短”で改行する
通常、ブラウザはこう考えます。
「とりあえず入るところで改行しよう」
その結果、
よくある崩れ
1行目が長い 2行目が短い バランスが悪い
見た目として、かなり不自然になります。
だから手動で直していた
これまではこうしていました。
- brタグを入れる
- spanで分ける
- メディアクエリで調整
でもこれ、
全部“その場しのぎ”です。
画面サイズが変わるたびに崩れます。
text-wrap: balanceとは？
一言でいうと
「行の長さを均等にしてくれる機能」です。
何が起きるのか
通常
長い行と短い行ができる
balance適用
行の長さが均等になる
それだけで一気に“プロっぽさ”が出ます。
実務での使い方
基本
h1, h2 { text-wrap: balance; } これだけでOKです。
おすすめ設定
よく使う組み合わせ
text-wrap: balance; max-widthを指定 中央揃え
具体例
.title { text-wrap: balance; max-width: 600px; margin: 0 auto; text-align: center; } これだけで見出しの完成度が一気に上がります。
従来との違い
昔
brで調整 メディアクエリで修正 何度も崩れる
今
CSS1行で自動調整 レスポンシブ対応 崩れない
作業時間もストレスも一気に減ります。
よくある注意点
- 対応ブラウザを確認する
- 長すぎる文章は別で調整
- レイアウト全体とのバランスを見る
重要
万能ではないが、ほとんどのケースで使える
まとめ
- 見出しの改行は自動化できる
- text-wrap: balanceで解決
- brタグはもう不要
“細かい調整に時間を使う時代”は終わりました。
これからは、
より本質的なデザインに集中できるようになります。
まずは1行、試してみてください。
satokotadesignキャンペーン実施中！
