Edited at

letter-spacingを使って文字を両端揃えにする(レスポンシブ対応)

2019年5月4日現在、「CSS 両端揃え」とググるとその方法について紹介したページがいくつも出ます。そこで紹介されている方法は大体次の方法です。


CSS

p {text-align-last: justify;}

もしくは

p {text-align: justify;}


けど、これだとChromeやFirefoxでしか適用されない(text-align-lastのcaniuse)。だから次のtext-justifyプロパティも追加する。


CSS

p {

text-align-last: justify;
text-justify:inter-ideograph;
}

もしくは

p {
text-align: justify;
text-justify:inter-ideograph;
}


よし、これでクソIEとEdgeにも対応した(text-justifyのcaniuse)。けど、ここまでのプロパティはすべてSafariに対応していない。何してんだおい。

ということで考え出された荒業がこちら。


HTML

<p>

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>


CSS

p {

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









これは文字数が多くなると地獄ですね。とここまで書いて思ったけど、正規表現を使った置換をすれば案外簡単にできるのかな?

とまぁ、僕は新しい方法を提案させていただきます。


とりあえずコードを


HTML

<p>お試し両端揃え</p>



CSS

p {

font-size: 20px;
letter-spacing: calc((300px - 20px * 7) / (7 - 1));
white-space: nowrap;
width: 300px;
}

コードは必要最低限のコードだけ載せています。すべてのコードはこちらから。下の画像のようになります。ちゃんと両端揃えになっていますね。

101527.jpg


仕組み



  • letter-spacingはどうやら文字の右側に余白を作るみたいです。letter-spacingの値になぜあんな一見複雑な数式を使うのかというと、話はいたって単純。下の画像を見せられて、「グレーの幅の大きさを求めよ」という問題への回答と一緒です。
    無題.png


  • white-space: nowrap;をいれないとこうなります。
    101527.jpg
    なぜかというと、「え」の右側にもletter-spacingの値分だけスペースができるから。white-space: nowrap;を指定することで改行をさせないようにしている。


注意点



  • widthfont-sizepxvwvhの方がいいかもしれないです。rem%だとうまくいかないかもしれません。

  • 文字は等幅フォントがいいかもしれません。


レスポンシブ対応


HTML

<p>お試し両端揃え</p>



CSS

p {

font-size: 5vw;
letter-spacing: calc((90vw - 5vw * 7) / (7 - 1));
white-space: nowrap;
width: 90vw;
overflow: hidden;
}

1556974597218.gif

必要最低限のコードのみ載せています。すべてのコードはこちらから。pxの部分をvwに変えて、水平スクロールバーが出てしまったからoverflow: hidden;を指定しただけです。