letter-spacingで最後の文字の後ろまで間があいてしまう問題の対処法!

letter-spacingで最後の文字の後ろまで間があいてしまう問題の対処法!

CSSのletter-spacingを使うことで字間を詰めたり、間をあける事ができますが、一方で最後の文字の後ろにもスペースができてしまう問題があります。letter-spacingを使った際の盲点ですが、デザイン上のバグとならないようにしっかりと対処しましょう。対処法をご紹介していきます。


目次[非表示]

  1. letter-spacingで最後の文字の後ろまで間があいてしまう
  2. letter-spacingで最後の文字の後ろまで間があいてしまう問題の対処法

letter-spacingで最後の文字の後ろまで間があいてしまう

字間を詰めたり、間をあけることができるCSSの「letter-spacing」ですが、letter-spacingを使った際に最後の文字の後ろまで間があいてしまう問題があります。

1つこの問題の例を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
span {
letter-spacing: 1.5em;
}
</style>
</head>
<body>
<p><span></span></p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

いかがでしょうか。上の例だとletter-spacingに小数点を含む1.5emを指定しており、その分「かきくけこ」の内部の字間は空いていますが、最後の文字の「こ」の後ろまでスペースが空いています。

今回はこのletter-spacingの最後の文字の後ろに間があいてしまう問題の対処法をご紹介します。

letter-spacingで最後の文字の後ろまで間があいてしまう問題の対処法

最後の文字の後ろの余白についてはmargin-rightで負の値を入れることで、打ち消すことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
span {
letter-spacing: 1.5em;
margin-right: -1.5em;
}
</style>
</head>
<body>
<p><span></span></p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

いかがでしょうか。これで「こ」の後ろのスペースが消えました。インライン要素でないと上手くいかないので、もしこの問題がブロック要素で発生した場合は「display: inline;」でインライン要素化したり、別のタグにかえて対処しましょう。