テキストを両端揃えにする方法を解説！
HTML/CSSコーディングをしている際に、テキストが左揃えになっているとデザインがきれいに揃わない時があります。テキストを両端揃えにすることでデザインのきれいなサイトに仕上げることができます。その方法について解説していきます。
テキストを両端揃えにしたい
HTML要素のpタグなどの中身に複数行にわたる文章を記述した際に、初期状態では左揃えの表示となっていることが多いかと思います。
これはCSSプロパティの１つであるtext-alignプロパティの初期値がstartであるためです。値がstartの場合、書字方向に従います。つまり、左から右ならleft、右から左ならrightを値に指定した場合と同じになります。そのため、初期状態で左揃えとなっていることが多いのです。
しかし、左揃えだけになっていると右側が揃わず、きれいな見た目とならない場合もあります。
両端文字揃えとして幅いっぱいに文字を配置することで、きれいな見た目とすることができます。
このことを均等割り付けと言ったりします。
では、その方法について見ていきましょう。
テキストを両端揃えにする方法
text-alignプロパティ
まずはtext-alignプロパティを使った一番シンプルな方法を紹介します。
index.html
<div class="box">
<div class="title">両端揃え</div>
<p class="justify">
サンプルテキストを用意しています。左揃えと両端揃えの比較をしてみましょう。サンプルテキストです。This is sample text.サンプルテキストです。This is sample text.
</p>
</div><!-- .box -->index.css
p.justify{
text-align: justify;
}text-alignプロパティはHTML要素の中身の水平方向の配置を設定するCSSプロパティです。text-alignプロパティにjustifyという値を指定してあげるだけで、簡単に文字の両端揃え(均等割り付け)を実現することができます。
Google Chromeなどの多くのブラウザではtext-alignプロパティを指定するだけで上手く文字の両端揃えが実現できるのですが、IEなどの一部のブラウザでは上手く表現できない場合があります。
次に、IEでも両端揃えが実現できるようにしていきます。
text-justifyプロパティ
index.css
p.justify{
text-align: justify;
/* 追記 */
text-justify: inter-ideograph;
}とは言っても簡単で、text-justifyプロパティにinter-ideographという値を指定してあげるだけです。
text-justifyプロパティはtext-alignプロパティにjustifyが指定されたときに両端揃えの種類を設定するためのプロパティです。ideographは漢字・ひらがな・カタカナなどの単語間隔と文字間隔の両方を調整して均等割り付けをするという値になります。
これでIEブラウザでも両端揃えを表現することができました。
まとめ
HTML/CSSでコーディングする際のテキストを両端揃えにする方法を解説してきました。最後にHTML/CSSのサンプルコードを紹介するので、ぜひ活用してみてください。
text-alignプロパティのみを指定して、IEブラウザで確認した場合。