【CSS】文字の間隔を調整する[letter-spacing]を指定したときの、中央揃え・右揃えの処理。

Ads by Google

文字の間隔を調整する[letter-spacing]を指定したとき、同時に[text-align:center;]や[text-align:right;]を設定していると、最後の文字の後ろに空欄が挿入されているために思うように描画できないことが多々あります。

例えば「あいうえお」という文字列に[letter-spacing:1em;]と指定した場合。
仮に、挿入される空白を「□」で表すと、以下のように表示されます。

あ□い□う□え□お□

テキストを左揃え[text-align:left;]にしているときは気づきませんが、問題は中央揃え[text-align:center;]にしたときと右揃え[text-align:right;]にしたときです。

それぞれの文字の後ろに余白が挿入されているために、中央揃えのときは中央よりも左にズレてしまい、右揃えのときは右端に綺麗に揃えることができません。

そこで考えられるのが、テキスト・インデントを使う方法ネガティブ・マージンを使う方法です。

中央揃えのときはテキスト・インデントを、右揃えのときはネガティブ・マージンを、それぞれ指定するとことで[letter-spacing]の表示エラーを解決することができます。


中央揃えのとき

.sample {
letter-spacing:1em;
text-align:center;
text-indent:1em;
}

イメージとしては、以下のような感じです。

■…text-indent
□…letter-spacing

■あ□い□う□え□お□


右揃えのとき

.sample {
letter-spacing:1em;
text-align:right;
margin-right:-1em;
}

こちらは「margin-right」にネガティヴ・マージンを指定することで、文字列の最後の余白をキャンセルしている感覚ですね。


どちらのケースも共に、余分なクラス名や疑似セレクタを使わずに対処できる方法なので、比較的スマートな解決策だと思います。
[letter-spacing]でお困りの際はこの記事を思い出してくださいね。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です