① まず結論
読みやすい改行は「どこでも自由に折れる」状態ではなく、「折れていい場所だけが増えている」状態のことです。CSSでなんとなく整えるのではなく、読み手が音読したときに息継ぎする場所と一致するように、折りたい場所と折りたくない場所を意識的に分けて設計します。
② たとえ話
文章を朗読する人をイメージするとわかりやすいです。
朗読者は、句読点や意味のかたまりで一呼吸置きます。読点「、」の前後で息継ぎするのは自然ですが、語の途中で息を切ると不自然に聞こえます。
改行も同じで、「、」の後・語句の境界・節のあいだなど、読み手の頭が一拍置く場所で折るのが自然です。「デジタルエクスペリエンスプラットフォー / ム」のように1文字だけ残ると、息継ぎとしても見た目としても不自然になります。
ただし Web では画面幅が読者の端末ごとに変わるので、改行を全部手で決めることはできません。「折れてよい場所」と「折れてほしくない場所」を HTML と CSS でブラウザに教えて、自動の折り返しを助ける、という考え方になります。
改行は息継ぎ。語のまんなかで息は止めない。
③ 図解で見る
やりがちな悪い改行と、読みやすい改行の対比。「/」は改行位置を示しています。
| シーン | 悪い改行 | 読みやすい改行 |
|---|---|---|
| 長いカタカナ | デジタルエクスペリエンスプラットフォー / ムを導入 | デジタルエクスペリエンス / プラットフォームを導入 |
| 読点の位置 | 今日は晴れていて気持ちがいい / 、ピクニックに行こう | 今日は晴れていて気持ちがいい、 / ピクニックに行こう |
| 助詞の孤立 | 日本 / の技術力で世界を変える | 日本の技術力で / 世界を変える |
| 英単語の途中切れ | 予算は extraord / inary なほど膨れ上がった | 予算は / extraordinary なほど膨れ上がった |
ブラウザは自動で折り返しますが、上のような失敗は CSS と HTML の補助で減らせます。
④ よくある失敗
「、」「。」が行頭に来ている
句読点は、
固有名詞・サービス名が途中で切れる
「文字選びの
助詞だけが取り残される
「日本 / の
word-break: break-all で全部解決しようとする
長い
⑤ 実務ではこう判断する
「自動に任せる場所」と「手で整える場所」を分ける
本文・FAQ・ニュース一覧のような
折りたくない場所と折ってよい場所をHTMLで教える
途中で
CSSは「禁則」「見栄え」「緊急回避」に分けて考える
日本語の
英単語が混ざる本文では、必要に応じて lang="en" を付ける
長い
⑥ 用語メモ
- 行頭禁則
- 行のあたまに来てはいけない約物のこと。「、」「。」「）」「」」など。日本語組版の基本ルール。
- 行末禁則
- 行のおしりに来てはいけない約物のこと。「（」「「」など、次に続くべき記号。
- wbr タグ
- 「ここで折ってもよい」を意味するHTMLタグ。折る必要がなければ何も起きないので、長いカタカナや固有名詞の保険として使える。
- text-wrap: balance
- 短い見出しの行幅を自動でならして読みやすくする CSS。短いブロック向けで、長い本文全体には使わない。対応ブラウザのみ効くプログレッシブな機能。
- text-wrap: pretty
- 本文の改行をきれいに揃え、最後の行が1文字にならないように調整する CSS。
- overflow-wrap
- 長い URL や英数字の連続など、通常の改行位置では収まらない文字列をどう折るかを指定する CSS。anywhere は、はみ出しを防ぐための保険として使える。
- white-space: nowrap
- 指定した範囲内で改行させない CSS。短い固有名詞やブランド名を途中で割りたくないときに使う。ただし長い語句に使うとはみ出しの原因になる。
⑦ 学習後のチェック
- 「、」「。」が行頭に来ていない
- 固有名詞・サービス名が途中で切れていない
- 助詞（の・は・を）だけが取り残されていない
- 「自動に任せる場所」と「手で整える場所」を分けて設計している
- 重要な見出しには nowrap や wbr で改行ヒントを入れている
- word-break: break-all を雑に使っていない
関連フォント