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

CSSの両端揃え(均等割り付け)で行の右端も揃える方法(3ページ目)

HTMLに記述したテキストをCSSで両端揃え(均等割り付け)にする方法を解説。行揃え方法を指定するtext-alignプロパティに、両端揃えを示す値「justify」を指定するだけで、各行の左端だけではなく右端もきれいに揃えられます。ただし、IEとEdgeではtext-justifyプロパティを併用する必要があります。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

IEやEdgeでも両端揃え(均等割り付け)にできるtext-justifyプロパティ

前のページでご紹介したように、IEやEdgeで表示する場合、日本語などの「空白文字で単語を区切らない言語」ではtext-alignプロパティに値「justify」を指定するだけでは両端揃え(均等割り付け)になりません。日本語文字だけしかない行も含めて全行を両端揃えにするには、さらにtext-justifyプロパティを併記して以下のように記述します。
p {
   text-align: justify; /* 両端揃え */
   text-justify: inter-ideograph; /* 両端揃えの種類 */
}
上記のように2行を同時に指定しておくと、IEやEdgeでも意図通りに両端揃えで表示されます。下図は、Edgeでの表示例です。左側から順に、
  • 何も指定しなかった場合(灰色枠)、
  • text-alignプロパティのみを使った場合(赤色枠)、
  • text-alignプロパティに加えてtext-justifyプロパティを併記した場合(青色枠)
の表示例です。最後の表示例(青色枠)でだけ、うまく両端揃えにできていることが分かります。
 
Edgeでの表示例 (text-justifyプロパティも併記すれば、日本語文でも両端揃えができる)

Edgeでの表示例 (text-justifyプロパティも併記すれば、日本語文でも両端揃えができる)


実際にお使いの環境で表示を確認するには、サンプルページ「両端揃え(均等割り付け)での表示例」をご覧下さい。
 

text-justifyは、両端揃えの方法を選択するプロパティ

上記のCSSソースで加えたtext-justifyプロパティは、両端揃えの方法を指定するプロパティです。これは、text-alignプロパティの値に「justify」が指定されている場合のみで有効になります。IEやEdgeでは値に「inter-ideograph」を指定すると、漢字・ひらがな・カタカナなどを含めたすべての文字間隔を調節して両端揃えが実現できます。

※ideographとは、表意文字・表意記号のことです。日本語以外でも該当する言語があります(例えば中国語など)。

値「inter-ideograph」は正式な仕様には含まれていない
この値「inter-ideograph」は、CSS3のTextモジュールの草案に書かれたtext-justifyプロパティの仕様には含まれていません。しかし、Microsoftによる独自仕様には含まれていました(※)。ただし、2017年時点で「非標準の古い仕様である」との注釈がありました。したがって、この書き方はIE・Edge用の独自仕様であり、将来的には別の書き方になると考えておきましょう。

※以前は、Microsoftの技術解説サイトであるMSDN内で仕様が公開されていましたが、現在では各社共通の技術解説サイトMDN Web Docsに統合されており、以前のURLにアクセスしてもリダイレクトされ、古い仕様を読むことはできません。
 

text-justifyプロパティに値「inter-ideograph」を指定して英文を表示するとIEでは問題がある

なお、text-justifyプロパティを併記した場合には、IEを使って英文を表示する際に若干の問題が起きます。

下図は、IE11で英文を表示した場合の例です。text-justifyプロパティに値「inter-ideograph」を指定した例(右端の青色枠)では、英文であるにも関わらず(単語ごとではなく)文字ごとに空間が調整されてしまい、若干不自然に見えてしまっています。特に目立つ部分に緑色の丸枠を付けてみました。表示を比較してみて下さい。
 
text-justifyプロパティに値「inter-ideograph」を指定して英文をIE11で見ると、英字であっても文字の間隔で調整されている

text-justifyプロパティに値「inter-ideograph」を指定して英文をIE11で見ると、英字であっても文字の間隔で調整されている


日本語の場合にはこのように文字単位で空間を調整することで両端揃えされるのが良いのですが、英文ではやや困ります。したがってこの方法は、中身が英文ではない場所(少なくとも英文が中心コンテンツではない場所)だけに適用するようにした方が良いでしょう。もっとも、IE11ユーザは徐々に減りつつありますから、もはや「気にしないでおく」という選択でも構わないかもしれません。
 

各行の左端だけでなく右端も揃えて表示したい

今回は、各行の左端だけでなく右端もきっちり揃える両端揃え(均等割り付け)を実現する方法をご紹介いたしました。特に幅の狭いボックス内などで文章を両端揃えで表示すると、整頓されたイメージが出せます。見栄えが重要な箇所の文章に、ぜひ活用してみて下さい。
 
【編集部おすすめの購入サイト】
Amazon でホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます