【CSS】文字の間隔を調整する[letter-spacing]を指定したときの、中央揃え・右揃えの処理。Tags【CSS】文字の間隔を調整する[letter-spacing]を指定したときの、中央揃え・右揃えの処理。ONZEhttps://on-ze.com/archives/1767HomeBlog【CSS】文字の間隔を調整する[letter-spacing]を指定したときの、中央揃え・右揃えの処理。Google文字の間隔を調整する[letter-spacing]を指定したとき、同時に[text-align:center;]や[text-align:right;]を設定していると、最後の文字の後ろに空欄が挿入されているために思うように描画できないことが多々あります。「あいうえお」という文字列に[letter-spacing:1em;]と指定した場合。仮に、挿入される空白を「□」で表すと、以下のように表示されます。あ□い□う□え□お□テキストを左揃え[text-align:left;]にしているときは気づきませんが、問題は中央揃え[text-align:center;]にしたときと右揃え[text-align:right;]にしたときです。それぞれの文字の後ろに余白が挿入されているために、中央揃えのときは中央よりも左にズレてしまい、右揃えのときは右端に綺麗に揃えることができません。そこで考えられるのが、テキスト・インデントを使う方法とネガティブ・マージンを使う方法です。中央揃えのときはテキスト・インデントを、右揃えのときはネガティブ・マージンを、それぞれ指定するとことで[letter-spacing]の表示エラーを解決することができます。{letter-spacing:1em;text-align:center;text-indent:1em;}イメージとしては、以下のような感じです。{letter-spacing:1em;text-align:right;margin-right:-1em;}こちらは「margin-right」にネガティヴ・マージンを指定することで、文字列の最後の余白をキャンセルしている感覚ですね。どちらのケースも共に、余分なクラス名や疑似セレクタを使わずに対処できる方法なので、比較的スマートな解決策だと思います。[letter-spacing]でお困りの際はこの記事を思い出してくださいね。TwitterFacebookGoogle+FeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【CSS】2行目以降を1文字下げる[text-indent]の使い方。【CSS】特定の職業の方には透明に見えてしまう背景をスタイルシートで実装してみた。【CSS3】マウスオーバーで半透明の波紋が広がるエフェクト。【CSS3】壮大な宇宙にトリップできる[DarkForce.css]を紹介します。「cubic-bezier()」の値をまとめてみた。