テキストを両端揃えにする方法を解説!

HTML/CSSコーディングをしている際に、テキストが左揃えになっているとデザインがきれいに揃わない時があります。テキストを両端揃えにすることでデザインのきれいなサイトに仕上げることができます。その方法について解説していきます。

コンテンツ [表示]

  1. 1テキストを両端揃えにしたい
  2. 2テキストを両端揃えにする方法
  3. 2.1text-alignプロパティ
  4. 2.2text-justifyプロパティ
  5. 3まとめ

テキストを両端揃えにしたい

HTML要素のpタグなどの中身に複数行にわたる文章を記述した際に、初期状態では左揃えの表示となっていることが多いかと思います。

これはCSSプロパティの1つであるtext-alignプロパティの初期値がstartであるためです。値がstartの場合、書字方向に従います。つまり、左から右ならleft、右から左ならrightを値に指定した場合と同じになります。そのため、初期状態で左揃えとなっていることが多いのです。

しかし、左揃えだけになっていると右側が揃わず、きれいな見た目とならない場合もあります。

テキスト左揃えの画像

両端文字揃えとして幅いっぱいに文字を配置することで、きれいな見た目とすることができます。
このことを均等割り付けと言ったりします。

では、その方法について見ていきましょう。

テキストを両端揃えにする方法

text-alignプロパティ

まずはtext-alignプロパティを使った一番シンプルな方法を紹介します。

あわせて読みたい
text-align
CSSの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-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両端揃えできた画像

これでIEブラウザでも両端揃えを表現することができました。

あわせて読みたい
text-justify
CSSのtext-justifyプロパティはtext-alignプロパティにjustifyが設定されている時、適用される両端揃えの種類を設定することができるプロパティです。text-justifyプロパティの構文や使い方についてサンプルコード付きで解説します。

まとめ

HTML/CSSでコーディングする際のテキストを両端揃えにする方法を解説してきました。最後にHTML/CSSのサンプルコードを紹介するので、ぜひ活用してみてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

みぎさん
ライター

みぎさん

大阪府の現役システムエンジニアです。WEB制作やWEB開発、ライティングなど幅広く活動しております。 【言語/FW】HTML,CSS,Sass,JavaScript,jQuery,Vue.js,PHP,WordPress,Laravel,Java