CSSで均等割り付けを実現する方法!【初心者向け】

こんにちは。

５歳の息子が、あらゆる玩具を解体して「しくみをしらべる！」と言うので、ひたすらドライバーでネジを回す係の、アラフォーシンママ あき です。

解体して仕組みを調べるって、プログラミングでも重要ですよね！

今日は、均等割りつけのおはなし。

Wordなどの文書作成ソフトにある、「均等割り付け」機能を使ったことがある方は多いと思います。一定の枠内に文字を均等に配置したい場合、この機能を使えば簡単に均等割り付けでき、とても便利ですよね。

というと、Wordなどのように簡単にはいきませんが、CSSで実現することが可能です。

今回は、WEBで文字の「均等割り付け」を実現する方法を、具体的な例をお見せしながらご紹介します！

text-align プロパティに justify を指定

text-align プロパティは、文字列などを左右に寄せたり中央に配置したりする際に使われるプロパティですね。text-align の値には、よく使われる center、left、right の他に　justify　があります。

text-align:justify で均等割り付け

text-align:justify を指定すると、文字列をボックス内で均等に割り付けして表示することができます。

文字と文字の間隔を自動的に調整し、文字をボックスの両端に揃えて改行してくれるという機能ですね。

＜ サンプルコード ＞

See the Pen
均等割り付け① by akiyo (@akiyohayakawa)
on CodePen.

このように、
指定なしの場合は右端がガタついており、指定ありの場合は右端がそろっています。

text-align-last を指定して整える

上記のサンプルコードを見ていただくと分かりますが、text-align:justify  では最後の行だけが均等割り付けされません。

文章の終わりを想定しているためなのか、最後の行だけ text-align:left を指定した状態になるんですね。

最後の行も均等割り付けにする

文章ではなく単語などを並べて表示させる場合など、最後の行も含めて全体を均等割り付けしたい。という場合は、text-align:justify に加え、text-align-last：justify を指定する必要があります。

＜ サンプルコード ＞

See the Pen
均等割り付け② by akiyo (@akiyohayakawa)
on CodePen.

このように、text-aligh-last：justify と指定することで、最後の行も含めて全体が均等に割り付けされます。

IEやEdgeで表示させるには

実は、text-align-last：justify プロパティはすべてのブラウザに対応していません。chromeやFirefoxなどでは上記の指定でOKなのですが、IEやEdgeで表示させるには追加のプロパティを記述する必要があります。

IE・Edge用の独自のプロパティとして、 text-justify: inter-ideograph 　というものがあります。これを追加すれば、text-align-last：justify が有効になります。

少々面倒ですが、１行追加するだけで主要なブラウザでは大体表示可能ということになりますね。

safariは非対応

しかし。

text-aligh-last は、なんと、まさかの safari が非対応なのです。

なんだかとっても残念ですね。

でも、頑張れば safari でも均等割り付けを実現する方法もあります。

safariにも対応させたい場合

文字数が少ない場合に限定されますが、

と指定する方法をご紹介します。

＜ サンプルコード ＞

See the Pen
均等割り付け③ by akiyo (@akiyohayakawa)
on CodePen.

safariにも対応させようと思うと、かなり手間ですね。
しかも、この書き方だとSEO的にも問題があったりしますので、サイト内で重要な文言への使用は避けたほうが良いかもしれません。

まとめ

以上、CSSで均等割り付けを実現する方法をご紹介しました。

text-aligh：justify を使えば、簡単に均等割り付けができますね！
しかし、text-aligh-last は非対応ブラウザがあるので注意が必要です。IEやEdgeの場合は一行追加するだけでOKですが、safariにも対応しようと思うと少し厳しいです。

text-aligh-last がすべてのブラウザで対応してくれることを願うばかりです。