例えば、「営業時間」「定休日」などの情報を縦に並べるとき、

営業時間：10:00～20:00
定休日：火曜日

のように文字数が違うと、見た目が揃わないことがあります。

そこで、

営業時間：10:00～20:00
定 休 日：火曜日

のように、文字数が違っても同じ幅になるように文字を均等配置する方法を紹介します。

手動でスペースを入れる方法は？

最初に思いつきやすいのが、HTMLにスペースを入れて調整する方法です。

<div>営業時間</div>
<div>定 休 日</div>

見た目としてはこれでも調整できます。

ただ、文字の間隔を揃えるためにHTMLへ手動でスペースを入れる方法は、基本的にはおすすめしません。

HTMLは「何を表示するか」という文書の構造を担当し、文字の間隔やレイアウトなどの見た目はCSSで調整するのが基本だからです。

また、手動でスペースを入れてしまうと、

• 文字数が変わったときに調整し直す必要がある
• フォントや画面サイズによって見た目が変わる
• レスポンシブ対応がしづらい
• 後から修正するときに分かりづらい

といった問題もあります。

【解決法】text-align: justifyを使う

CSSは以下のようにします。

.label {
  width: 100px;
  text-align: justify;
  text-align-last: justify;
}

HTMLはシンプルに、

<div class="label">営業時間</div>
<div class="label">定休日</div>

とします。

これで、どちらも100pxの幅の中で文字が均等に配置されます。

ポイントはtext-align-last

ここで重要なのが、

text-align-last: justify;

です。

text-align: justifyだけでは、最後の行には均等配置が適用されない場合があります。

そこで、

text-align: justify;
text-align-last: justify;

とすることで、最後の行も両端まで広げて均等配置できます。