CSSのletter-spacingの罠！？中央揃えがずれる現象の対策方法について

こんにちは！ケインコスゲ（@keinkosuge）です。

今回は、CSSのletter-spacingに関するお話です。

CSSのletter-spacingプロパティは、一般的に「文字間を空ける・文字間の感覚を調整する」ためのCSSプロパティとして知られています。

しかしながら、先日、こんな現象に出くわしました。

タイトルと文章を両方CSSで中央揃えにした上で、タイトル（見出し）の文字間を少し開けるためにletter-spacingプロパティを適用してみたのです。

プロパティの数値を書き間違えて少し大きい文字間を適用したところ、なんとタイトル（見出し）が中央揃えにならなくなってしまったという・・・

「CSSのletter-spacingって文字間隔を空けるものではないの？」と思って調べたところ、わかったことを掲載したいと思います。

結論：CSSのletter-spacingは文字間隔を空けるものではなかった！

結論から書きたいと思います。

実は、letter-spacingは文字間隔を空けるCSSプロパティではなかったのです！

その真相は「CSSのletter-spacingは、文字の右側に隙間を作る動きをするプロパティだった」ということなんです！

これ、そこそこ有名な話？らしいのですが、知らなかった・・・

先ほどのサンプルコードをみても、確かに文字の右側に隙間が空いていることによって、タイトルの文字が左側に寄っているのがわかりますね。

では、text-align:centerとletter-spacingが適用された文字が左に寄るのを中央に寄せるための対策としてはどんなものがあるのでしょうか。

それは、text-indentのCSSプロパティを使って、文字を右側にずらし、中央揃えの状態に戻す方法をとることです。

letter-spacingで間隔を空けた分だけ、text-indentに同じ値を適用してあげます。

これで、対策はばっちりですね！

ということで、今回はCSSのletter-spacingの罠！？中央揃えがずれる現象の対策方法についてお伝えいたしました！

CSSも本当奥深いですね・・・知らないことがまだまだたくさん、これからも勉強を重ねていきたいと思います！