【CSS】 「letter-spacing」で文字が左側に寄るのを直す方法

こんにちは、さち です。

先日、ウェブサイトを作っているときに、「文字の間隔」を調整できる CSS letter-spacing を使ったんですが、困ったことが起きました。

「文字（テキスト）」が左側に寄るんです。

誰もが通るであろうこのトラブル、解決方法を探っていきましょう。

文字が左側に寄ってしまう

サンプルコード

HTML

<div class="passed">合格</div>

CSS

分かりやすくするため、見た目に大きく関与する CSS 以外は記述を省略しています。

.passed {
  letter-spacing: 0.7em;
  border: 5px solid red;
}

letter-spacing を使って「合格」の文字の間隔を広げています。

結果

「合格」の文字が、左側に寄ってしまっています。

letter-spacing による効果が、最後の文字にも反映されていることが原因です。

「格」の右側にも letter-spacing による「スペース」が挿入されるので、文字が左側に寄ってしまうわけです。

解決方法

サンプルコード

CSS

分かりやすくするため、見た目に大きく関与する CSS 以外は記述を省略しています。

.passed {
  letter-spacing: 0.7em;
  text-indent: 0.7em;
  border: 5px solid red;
}

text-indent を追加して、「値」は letter-spacing と同じにしました。

ちなみに、text-indent は「字下げ（インデント）」を行います。作文を書くときは「段落」の最初は「1字」下げると習いましたが、それをウェブで実現できる CSS プロパティです。

結果

文字の片寄りを直すことができました。

text-indent によって「合」の左側に「スペース」が挿入されたからです。「スペース」の大きさは letter-spacing と同じなので、左右のバランスが取れたわけです。