【ホームページ作成】各行の右端も揃う！両端揃えで表示する方法

両端揃えで表示させるスタイルシートソース

以下のように、2行を記述します。

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

1行目が、行揃えを均等割付にする記述です。
2行目が、均等割付の形式を指定する記述です。

※備考※
IEで使えるtext-justifyプロパティは、今のところIEの独自拡張です。 IE8からは、（IEの独自拡張であることを示す）「-ms-」をプロパティ名の先頭に付加して、「-ms-text-justify」と記述するようになりました。

-ms-text-justify: inter-ideograph;

上記のように書くよう推奨されていますが、この記述だけだとIE7以下では解釈されません。 また、（少なくとも現在の）IE8では、先の記述方法（「-ms-」を付けない記述方法）でも解釈されます。

各ブラウザでの表示例：

Internet Explorer、Firefox、Opera、Safari、Google Chromeでの表示例は下図の通りです。

Internet ExplorerとFirefoxでは、共に全行が両端揃えになっています。
Internet Explorerでは「text-justifyプロパティ」の指定が使われた結果です。 Firefoxでは、「text-justifyプロパティ」の指定は使われませんが、（text-alignプロパティに値justifyを指定すれば）標準でこの表示になります。

Opera、Safari、Google Chromeでは、今のところ（句点のない）日本語文字ばかりの行では、両端揃えにはなりません。 将来的には「text-justifyプロパティ」が使えるようになり、実現できるようになるでしょう。

おわりに

今回は、各行の左端だけでなく右端もきっちり揃える「両端揃え」を実現する方法をご紹介いたしました。 両端揃えを使って表示させると、整頓されたイメージが出せます。 見栄えが重要な箇所の文章に、ぜひご活用下さい。