(HTML,CSS)CSSの両端揃え(均等割り付け)で行の右端も揃える方法HTMLに記述したテキストをCSSで両端揃え(均等割り付け)にする方法を解説。行揃え方法を指定するtext-alignプロパティに、両端揃えを示す値「justify」を指定するだけで、各行の左端だけではなく右端もきれいに揃えられます。IEとEdgeではtext-justifyプロパティを併用する必要があります。文宏ホームページ作成ガイド各行の左端だけでなく右端も揃えて、両端揃え(均等割り付け)にしたいウェブページ上にの文章は、標準では左端から表示され始めます(※)。そのため、各行の左端は揃って表示されます。文章中に含まれる文字の種類や使われているフォントの種類によっては、各行の右端は揃わないことがあります。※言語によっては右端から表示されますが、その場合は左端が揃いません。狭いボックス内に掲載する文章などでは特に、各行の左端だけでなく右端も揃っているときれいに整って見えます。そのような表示を望む場合には、CSSを使って両端揃え(均等割り付け)を指定すると実現できます。通常の左寄せ表示(左)と、両端揃え表示(右)上図は、フォントとして「メイリオ(Meiryo)」を使用した場合の表示例です。左側の例(灰色枠)では各行の右端がバラバラなのに対して、右側の例(赤色枠)では各行の左端だけでなく右端も揃っています。このフォント「メイリオ」は、日本語文字に関しては等幅でデザインされているため、元々両端が揃いやすいフォントだと言えます。それでも、文章中に英数字などの半角文字や記号などが含まれていれば、右端は揃いにくくなります。表示にプロポーショナルフォント(=文字幅が文字によって異なるフォント)を使った場合には、さらに揃いにくくなるでしょう。整頓された印象を重視したい箇所に掲載する文章は、両端揃え(均等割り付け)を使ってデザインすると良いでしょう。CSSを使って各行の両端を揃える方法はとても簡単です。行揃えの位置を指定するtext-alignプロパティを使って値「justify」を指定するだけです。ExplorerやEdgeで日本語文章を両端揃えにしたい場合に関しては、さらに行揃え方法を指定するtext-justifyプロパティを併用する必要があります。そこで今回は、特定のボックス内の文章を両端揃えで表示させる方法として、text-alignプロパティの書き方と、text-justifyプロパティの併用方法をご紹介いたします。それでは次のページから、両端揃え(均等割り付け)を実現するスタイルシートの書き方を見ていきましょう。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。