今回は、CSSのletter-spacingを指定した際に右側が空く(左にずれる)場合の対応方法について解説していきます。
小さい値の場合はあまり気にならないですが、文字間が大きい場合はかなりずれて見えてしまいます。
letter-spacingとは
letter-spacingとは、文字間(文字と文字の間)を設定できるCSSのプロパティです。
値が大きいほど文字と文字の間隔が空きます。
初期値はnormalとなりブラウザによって若干違いますが「0」となる場合がほとんどで、値の設定時はpxやemで指定される場合が多いようです。
letter-spacing設定時の「ずれ」について
letter-spacingの設定時に起こる「ずれ」を実際に見てみます。
少し大きめの値を設定した例を用意しました。分かりやすいように背景色を設定しています。
<p>
<span>設定時のずれに関して</span>
</p>p {
text-align: center;
}
span {
letter-spacing: 0.6em;
display: inline-block;
padding: 10px;
background-color: #F2F2F2;
}設定時のずれに関して
右側が大きく空いて、左にずれているように見えます。これは、letter-spacingで設定した値が、文字の右側に反映する為となります。中央揃えや右揃え、例のように背景色があったりする場合特にずれて見えるかと思います。
これを解消する為の対応方法を3つ紹介いたします。
対応方法① text-indentを使う
CSSのプロパティであるtext-indentを使うと、文字の左側に余白を作る事が出来ます。
letter-spacingで設定した値と同じ値をtext-indentで設定してあげるとバランスよくなります。
p {
text-align: center;
}
span {
text-indent: 0.6em;
letter-spacing: 0.6em;
display: inline-block;
padding: 10px;
background-color: #F2F2F2;
}設定時のずれに関して
※注意点として、text-indentは段落の1行目にしか効きませんので、複数行になる(改行する)とバランスが悪くなります。
対応方法② padding-leftを使う
text-indentの時のようにCSSのプロパティあるpadding-leftでも左側に余白を作る事が出来ます。
こちらの方が複数行でも対応出来ますので簡単ですが、例のように予めボックスにpaddingが設定されている場合は、calc関数で幅や高さを計算式で指定する方法【CSS】で解説したように、calc関数で計算するようにしてください。
p {
text-align: center;
}
span {
letter-spacing: 0.6em;
display: inline-block;
padding: 10px;
padding-left: calc(10px + 0.6em);
background-color: #F2F2F2;
}設定時のずれに関して
対応方法③ ネガティブマージンを使う
上記で解説しました、text-indentやpadding-leftを使用して、左側にleter-spacingと同じ値を余白に設定した場合、要素を右揃えにすると右側の縦のラインが他のコンテンツと合わないといった形になります。
それを解消する為にはネガティブ(マイナス)マージンで、最後の文字の右側の余白を打ち消してあげる事が必要になってきます。
p {
text-align: right;
}
span {
letter-spacing: 0.6em;
margin-right: -0.6em;
}設定時のずれに関して
上記のように、ネガティブマージンで右側の縦のラインを他のコンテンツに合わせる事が可能です。
ポイントとしてはネガティブマージンを設定する要素をインライン要素にする事です。
背景色や枠線がある場合は、先に解説しましたtext-indentやpadding-leftの設定も必要になる場合がありますので、必要に応じて変更してみください。
さいごに
いかがでしたでしょうか。
今回はletter-spacingで発生する右側の余白について解説いたしました。
設定したCSSがどのように作用するのか仕組みをきちんと理解すると対応方法がわかってきますので、細かい部分にはなりますが対応方法を覚えておくとスムーズです。
