Top

webでもCSSだけで1行の均等割付、両端揃え

CSS だけで Illustrator などでは簡単にできる均等割付をしてみます。文章全体を両端揃えにする text-align: justify のほうではなく、1行の文字列でも左右に詰まってそろうよう均等割付にしてみます。

web では基本「出来ない」のですが、デザイナーさんやクライアントにどうしてもやってくれと言われた人用の CSS です。letter-spacing で最適な幅を指定してあげてやったりも出来ますが、レスポンシブ対応が無理ですし、あまりにも不安定なので別の方法で。

均等割付

サンプル

両 端 ぞ ろ え

左右に均等割付が出来ています。

何文字でも自由に均等割付が出来ます。

何 文 字 で あ っ て も
基 本 出 来 ま す
スポンサーリンク

CSSだけで均等割付

HTML

<div class="justify">
  <span>両</span>
  <span>端</span>
  <span>ぞ</span>
  <span>ろ</span>
  <span>え</span>
</div>

均等割付したい要素に justify と class をつけておきます。一文字ずつ span で囲ってあげます。

CSS

.justify {
  display: flex;
  justify-content: space-between;
}

flex の justify-content で space-between をしてあげているだけです。

補足

一文字ずつ span で囲むのが面倒ですが、囲わなくても出来る CSS も一応存在します。

参考：CSSでの表見出しの均等割付 (css3版)

この記事では「表見出しの」となっていますが、どんな要素でも出来ます。ただ text-align-last は今も Safari が未対応だと思われます。

参考：CSS3 text-align-last | caniuse

デザイナーさんは Mac が多い故、Safari で効かないのは痛いです。仕方がないので全文字 span で囲みましょう。

flex のベンダープレフィクスはお好みでつけてください。

まとめ

均等割付を「やってくれ」といわれても基本「web では出来ません」と突っぱねますが、いかんともしがたい状況になったときに使えるかもしれません。