BIOGRAPHYREADME2015.05.31CSSで均等割り付けを実現する方法このブログははてなブログからの移行記事です。研修中、社内のツールに対して問題点を探し、改善策を提案しろというのがあった。その際、運用フロー、機能等いろいろケチをつけたのだが、その1つにテキストの右端がでこぼこしていて見づらいので均等割り付けにしたほうがよいと指摘した。その際、「この2行をスタイルシートに足せば均等割り付けを実現できます(ドヤァ」って言ったら「お前それChrome以外で再現確認したのかアホすけ、やり直せ」と言われたので、その時に調べたことをつらつらとまとめる(ホントはもっと優しかったです)。均等割り付けにする方法これの結論は簡単で、スタイルシートでtext-align要素の値をjustifyにしてあげることで実現できます。Chromeで適用してみる。某検索サービスでの検索結果のサイト説明文を均等割り付けにする。検索トップの説明文に注目してください。気にならない程度とはいえ、少しばかり端がずれてますよね。これにデベロッパーツールを使ってtext-align:justifyを適用する。完璧に揃ってないとはいえ、適用前よりきちんと端が揃ってますね!この例だと元がそこまで激しくずれていないので実感が薄いかもしれませんが、文章の内容によっては結構ずれるので試してみてください。立ちはだかるIEさぁここからが本題。ユーザが使うブラウザがChromeだけであればよかったのですが、残念ながら世にはFirefoxとかSafariとかIEとかいろいろあります。Explorerです。Safari(7.1.6)ではtext-align:justifyで事足りるのですがIEだと少しだけ工夫が必要です。text-justifyここで登場するのがtext-justify要素です。この要素はIEのみがサポートする均等割り付けの形式を指定するものです。IEではtext-align:jusifyを指定するとtext-justifyの値は自動的にautoとなるのですが、これが落とし穴となります。text-justifyの中には日中韓語用の値と英単語用の値があり、autoの値が英単語用となっているため、text-align:justifyのみでは少なくとも日本語の文章を均等割り付けすることができません。IEでは以下のように指定する必要があります。inter-ideograph;}これでIEでも均等割り付けを実現することができます。有用な情報ありがとうございます。僕のブログに適用したところ、かなり見栄えが良くなりました。