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 も一応存在します。
この記事では「表見出しの」となっていますが、どんな要素でも出来ます。ただ text-align-last は今も Safari が未対応だと思われます。
参考:CSS3 text-align-last | caniuse
デザイナーさんは Mac が多い故、Safari で効かないのは痛いです。仕方がないので全文字 span で囲みましょう。
flex のベンダープレフィクスはお好みでつけてください。
まとめ
均等割付を「やってくれ」といわれても基本「web では出来ません」と突っぱねますが、いかんともしがたい状況になったときに使えるかもしれません。