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

各行で、左端・右端の両方をきっちり揃えて表示させたい！

ウェブページでは、文章は左端から表示(※)され始めます。 その場合、各行の左端は確実に揃って表示されます。 しかし、文章中に含まれる文字の種類や、表示に使われているフォントによっては、右端は揃わないことがあります。（下図左側参照）
※言語によっては右端から表示されますが、その場合は左端が揃いません。

その場合でも、スタイルシートを使って「両端揃え」を指定すれば、左端だけではなく右端も揃えて表示させることができます。（下図右側参照）

▲通常の左寄せ表示（左）と、両端揃えでの表示（右）

上図は、表示フォントに「ＭＳ Ｐゴシック」を使用した場合の例です。 左側の例では各行の右端はバラバラですが、右側の例では各行の右端が揃っています。（最終行を除く）

普通に「左寄せ」で表示させると、各行の右端は特に揃うことなくバラバラになってしまいます。 特に文章中に「ABC123」などの英数字が含まれる場合や、プロポーショナルフォントが使われている場合には、ずれが顕著になります。

右端にずれがあっても、文章を読む分には特に問題ありません。 しかし、両端が揃っていると整頓された印象を出すことができます。 見栄えが重要な箇所に掲載する文章は、両端揃えを使って表示させると綺麗にデザインできるでしょう。

このように右端のずれを解消し、各行の両端で文字を揃えるには、スタイルシートで「text-align」プロパティと、「text-justify」プロパティ(※)を使います。
※text-justifyプロパティは、CSS3のプロパティです。（詳しくは後述）