techronicle テクロニクル

Webサイト作成に関する情報提供サイトです。WordPress,HTML+CSSなど。

テキストを両端揃えにする

2012/06/13 HTML+CSS

サイト上のテキストは、デフォルトで左揃えです。つまり左端はきちんと揃っていますが、右端は凸凹になっています。これを両端揃えにするには、次のようにCSSで指定します。

text-align: justify;
text-justify: inter-ideograph;

1行目で、行揃えを均等割り付けにし、
2行目で、均等割り付けの形式を指定しています。
inter-ideographを指定すると「漢字・ひらがな・カタカナ」などの文字間隔や単語間隔も調整されます。

Firefoxだと1行目だけで、日本語も両端揃えになります。
IEは、2行目が必要です。
Google Chromeは今のところ対応していません。

text-justifyはもともとIEの独自プロパティでしたが、CSS3で正式採用される見込みで、Chromeも今後のバージョンアップで対応してくると思われます。

初期設定CSSとして採用していい2行でしょう。