CSSシークレット ―47のテクニックでCSSを自在に操る

課題

デザイナーは行末を揃えるのが大好きです。きれいにデザインされた雑

誌や本を見れば、行末揃えは至る所で行われているのがわかります。しか

しWeb 上では、経験を積んだデザイナーも行末揃えはほとんど使ってい

ません。 CSS1の時代から text‐align:justify;を指定すること可能

だったのに、利用されていないのはなぜでしょうか。

その答えは図5.1 に隠されています。行末を揃えた結果、表示がスペー

スだらけになってしまいました。見た目が悪く、読みやすくもありませ

ん。印刷物では、行末揃えは常にハイフネーション（ハイフンの追加）と

組み合わせて適用されます。ハイフネーションを行えば単語を音節単位に

分割できるため、挿入されるスペースを大幅に少なくできます。そして、

テキストをより自然に表示できます。

近年までは、 Web 上のテキストにハイフンを追加するための別の方法

があるにはあったのですが、それは解決策とはとても呼べないようなひど

い代物でした。サーバーサイドのプログラムや JavaScript や Webサービ

ス、あるいは手作業でソフトハイフンの文字（ ­。ハイフネーション

が可能な位置を表します）をすべての音節の間に挿入する、とても面倒な

処理が必要でした。このような手前は割に合わず、デザイナーたちは他の

方法のレイアウトを利用していました。

ハイフンの追加

20

200

5章：タイポグラフィー

図5.1

CSS による行末揃えのデフォルトの

効果

解決策

CSSTextLevel3 ...