本文の一行が長すぎるときは？CSSのchと最大幅を作例で比べよう

本文の文字サイズはちょうどよいのに、横に長く広がると次の行へ戻りにくい。そんなときは、フォントサイズだけでなく、一行の長さも調整してみよう。

chは「日本語が何文字入るか」ではない

CSSのchは、使用するフォントの数字0の幅を基準にする長さの単位。MDNの長さの説明で定義されているよ。

40chと指定しても、どのフォントでも日本語が40文字入るという意味ではない。英字・数字・日本語の幅が違うことや、フォントの違いにも気を付けたいね。

幅に上限を設ける

.readable {
  width: 100%;
  max-width: 40ch;
  margin-inline: auto;
}

画面の幅を使いつつ、十分広い画面では上限を設ける例だよ。余白や枠を含む幅の計算には、別にbox-sizingも関係する。本文にとって読みやすい上限は、言語・書体・用途によって違うので、40chを万能の正解にはしないでね。

作例で文章を読んで比べる

「動かしてみよう」では、同じ短い段落を20ch・32ch・48chへ切り替えられる。広い画面では行数が変わり、狭い画面では画面側の幅が先に上限になるよ。

1. 20chで、改行が増える様子を見る。
2. 48chで、行数と視線を戻す距離を比べる。
3. 32chへ戻し、日本語と英字の混ざる行を読む。
4. リセットで最初の幅へ戻す。

測定欄の実際の幅も確認しよう。狭い画面で幅が同じままなら、指定が無効とは限らない。width:100%の枠に収まる制約が先に働いている場合があるよ。

評価は文字数だけで決めない

長いURLやコードがあるときは、折り返しやスクロールの設計も必要。フォントを拡大した状態、スマホ幅、リンクが多い段落でも確認しよう。

行間や字間を利用者が変えたときの確認は、文字間隔とレイアウトの記事も参考になるよ。一行の長さを調整することと、文章の内容を省くことを混同せず、同じ内容で読み比べてみよう。