文字情報を整えるその４
行の折り返し

矢野りん／ライター

2006.07.18

　行間と同じくらい文字情報の可読性を左右する要素は、1行に盛り込む文字の数である。モニターという動かしにくいデバイスを見つめながら読むWebページは、視線の移動を極力抑えるレイアウトを実現したほうがよい。行の長さをコントロールする方法を駆使しよう。

1行に入れる文字数の制限方法

　HTMLの段落タグにテキストを入力してレンダリングすると、テキストはブラウザウィンドーの幅いっぱいに広がる。この段落タグは本来矩形の中にテキストを流し込むテキストブロックの性質を持っているので、1行に入れる文字数を制限するならこのボックス要素の幅をCSS上で指定すれば良い。HTML上にテキストボックスを作る方法は段落タグの他、汎用的に要素を入れる仮想の箱を指定するdivタグを使う。

--------------------------------------------------------------
サンプルページ
textnum.html
（サンプルページは別ウィンドーで開いてください。ブラウザのソースを見るコマンドでコードを確認してください。）
--------------------------------------------------------------

上記のサンプルページでは

--------------------------------------------------------------

画面レイアウトを考える

実際にサイトをレイアウトする手始めの段階で必ず考えておかなければならないのが＜＜中略＞＞現在標準と言われている表示解像度は、XGAだ。

--------------------------------------------------------------

のdivタグの範囲にCSS側で

--------------------------------------------------------------
#sample1{ width: 450px;}
--------------------------------------------------------------

と指定して幅を決めた。

　長い記事のようにしっかり読み込まれることを想定して本文サイズを大きめにしたページなので、幅サイズも広めに取り一度に視界に入る情報を増やしている。レイアウトスペースの都合もあるが、1行に入れるWebの本文テキストの文字数は30から40文字程度が一般的だ。

ユーザーの表示変更に注意

　ところでWebの場合、文字のレイアウトはユーザーのページ表示方法により大きく変わるものだ。ユーザーは好みに応じて文字サイズを大きく、時に小さくする。そのためせっかく読みやすく作ろうと幅を制限しても、指定方法が不適切なら逆効果になる。先ほどのサンプルで、下の作例はテキストボックスの幅を

--------------------------------------------------------------
#sample2{ width: 18em }
--------------------------------------------------------------

の相対的な数値で指定している。サンプルページの文字サイズを拡大していただければ分かるが、ピクセルで指定したほうのボックスは設定変更に応じて拡大しないので、文字サイズが大きくなれば1行に入る文字の数は減っていく【図１】。一方のemの場合、文字サイズの解釈が設定の目安になっているため、文字サイズが拡大されるにつれ幅サイズも増える。結果的に1行の文字数は変わらない。ページ全体のレイアウト幅を制限するならピクセル指定は有効だが、部分的にはem指定が望ましいこともある。両者の違いを認識して使い分けよう。