詳しい記述方法は、解説記事本文をご参照下さい。
▼A. 標準
多くの環境では、文章は左端から表示され始めます。
その場合、各行の左端は確実に揃って表示されます。
しかし、文章中に含まれる文字の種類や、表示に使われているフォントの種類によっては、各行の右端は揃わないことがあります。
特に、文章中に「ABC123」などの英数字が含まれている場合や、プロポーショナルフォント(Proportional Font)が使われている場合には、揃わないことが多いでしょう。
そのような場合でも、CSSを使えば左端だけでなく右端も揃う「両端揃え」で文章を表示させることもできます。
▼B. text-alignのみ
多くの環境では、文章は左端から表示され始めます。
その場合、各行の左端は確実に揃って表示されます。
しかし、文章中に含まれる文字の種類や、表示に使われているフォントの種類によっては、各行の右端は揃わないことがあります。
特に、文章中に「ABC123」などの英数字が含まれている場合や、プロポーショナルフォント(Proportional Font)が使われている場合には、揃わないことが多いでしょう。
そのような場合でも、CSSを使えば左端だけでなく右端も揃う「両端揃え」で文章を表示させることもできます。
▼C. text-justifyを付加
多くの環境では、文章は左端から表示され始めます。
その場合、各行の左端は確実に揃って表示されます。
しかし、文章中に含まれる文字の種類や、表示に使われているフォントの種類によっては、各行の右端は揃わないことがあります。
特に、文章中に「ABC123」などの英数字が含まれている場合や、プロポーショナルフォント(Proportional Font)が使われている場合には、揃わないことが多いでしょう。
そのような場合でも、CSSを使えば左端だけでなく右端も揃う「両端揃え」で文章を表示させることもできます。
※明示的に改行を入れた場合や、最終行は対象になりません。
▼A. 標準
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
▼B. text-alignのみ
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
▼C. text-justifyを付加
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
※英文の場合は、「IE向けの記述を付加」を加えなくてもIEでも両端揃えになります。逆に「IE向けの記述を付加」を加えると、IEでは英文の表示が若干読みにくくなってしまいます。
※ただし、Edgeの場合は「IE向けの記述を付加」を加えている状態で英文を表示させても、特に読みにくくはなりません。しかし、日本語文を表示する場合には「IE向けの記述を付加」が必要です。