ホームページ作成/テキストの配置・装飾 (HTML,CSS)

各行の右端も揃う!両端揃えで表示する方法

標準では文章は左端から「左寄せ」で表示されますので、何もしなくても各行の左端は揃います。しかし、右端は揃わない可能性があります。CSSを使って「両端揃え」を指定すれば、左右の両端を揃えることができます。

この記事の担当ガイド

Web作成が楽しくなるお手伝い。分かりやすい解説を探求するWeb職人

  • このエントリーをはてなブックマークに追加

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

以下のように、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とFirefoxでは、共に全行が両端揃えになっています。
Internet Explorerでは「text-justifyプロパティ」の指定が使われた結果です。 Firefoxでは、「text-justifyプロパティ」の指定は使われませんが、(text-alignプロパティに値justifyを指定すれば)標準でこの表示になります。

Opera/Safari/Google Chromeでの表示例
 

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

おわりに

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



更新日:2009年09月14日

あわせて読みたい

    この記事を読んで良かったですか?

    良かった

    3

    この記事を共有する