テキストの揃え

定義

テキストの揃え(text-align)は、段落の各行をどちら側に寄せるかを決める設定です。左揃え、 中央揃え、右揃え、そして両端をきっちり合わせる両端揃え(justify)の中から選びます。私たちが 文章を読むとき、目は一行を読み終えると次の行の先頭へ戻る動きを繰り返します。この戻る先が いつも同じ位置にあると、目が迷わずに自然に読み進められます。だから先頭の位置がそろう左揃えは 長い本文にいちばん読みやすく、たいていの画面で安全な初期値になります。ちなみにここで言う 揃えは文字を並べる向きの話で、要素を画面に配置する整列とは名前が似ているだけの別の概念です。

なぜ重要か

揃えは単なる好みの問題ではなく、読む速さや疲れやすさに直接影響します。左揃えはすべての行が 同じ縦のラインから始まるので、目が次の行の先頭を見つけやすく、本文によく合います。中央揃えは 行ごとに先頭の位置がずれるため、行が長くなるほど毎回始まりの位置を探し直すことになり、 すぐに疲れてしまいます。だから中央揃えは短い見出しや引用のように、一〜二行で収まるものだけに 向いています。両端揃えは左右の端がまっすぐそろって整って見えますが、その代わりに単語の間隔を 無理に広げるため、空白が縦につながって見える「川(rivers)」が生まれやすくなります。 このように揃えをひとつ間違えるだけで、どんなに良い文章も読みにくくなってしまいます。

よくある間違い

• 長い本文を中央揃えにしてしまうケースです。行ごとに先頭がずれて、目が一行ごとに始まりの 位置を探し直さなければならないので、段落が長いほど読むのがはっきりと苦しくなります。 中央揃えは見出しと短い文言だけに使いましょう。
• ウェブの本文に、何の対策もなく両端揃えを使ってしまうケースです。単語の間隔が行ごとに 広がって、空白が縦につながる「川」ができ、かえって見た目が乱れてしまいます。印刷物と違って ウェブは自動ハイフネーションが弱いためこの問題が目立ちやすく、画面幅が狭いほど一行に入る 単語が少なくなって間隔がより大きく開いてしまいます。

実務のヒント

• 中央揃えは短い見出しと引用だけに、両端揃えはウェブ本文ではなるべく避け、使うとしても 注意して使いましょう。ある程度の長さがある読み物は、たいてい左揃えがいちばん安全な初期値で、 迷ったときは左揃えにしておくと失敗が少なくてすみます。
• ひとつの画面の中で揃え方をあれこれ混ぜないようにしましょう。見出しと本文の揃えがばらばらだと 視線の流れが途切れてしまうので、特別な理由がなければ同じ基準にそろえたほうがすっきりします。 揃えを変えるときには必ずそれなりの理由があるべきだと考えると、うっかりミスが減ります。
• 数字や価格が並ぶリストは、右揃えにすると桁の比較がしやすくなることがあります。ただし文章には 合わないので、右揃えは値を横に見比べたい場合だけに限定しましょう。このときは等幅数字を あわせて使うと、桁がいっそうきれいにそろって見えます。

関連概念