text-alignがズレてしまうとき

CSS

2021.03.24

【CSS】text-alignがズレてしまうとき

先日、文字を真ん中揃えにしたいのに、なぜかズレてしまうということがありました。

本日は、その解決方法をご説明いたします!

文字の配置について

文字は、text-alignで右揃え/左揃え/中央揃えなどを設定することができます。コンテンツのタイトルなどによく使用しますね。

See the Pen text-align by spiqa design (@spiqa_design) on CodePen.

▼参考
https://developer.mozilla.org/ja/docs/Web/CSS/text-align

letter-spacingを設定した時の例

それでは、letter-spacingを設定してみたいと思います。
以下は、letter-spacing:1.5emを設定した例です。

See the Pen letter-spacing by spiqa design (@spiqa_design) on CodePen.

左揃え以外の例で右側に余白が入ってしまっています。

文字を選択するとわかるのですが、letter-spacingを設置していることにより、右側に余白が入っているのです。

解決方法

背景色をつけているブロックの中に要素を作り(今回の場合はspan)、その要素の右側にletter-spacingの値と同じネガティブマージンをかけます。
以下の例のうち、背景がオレンジ色のものに設定しています。

See the Pen GRrKqMb by spiqa design (@spiqa_design) on CodePen.

今回は、letter-spacing:1.5emを指定していますので、margin-right:-1.5emを指定しています。ズレが解消されているのがお分かりかと思います。

中央揃えのときは

中央揃えの時は、letter-spacingの値と同じ値のtext-indentを設置することでもズレを解消することができます。

See the Pen text-align by spiqa design (@spiqa_design) on CodePen.

まとめ

細かい点ですが、特にletter-spacingの値が大きいにはズレが気になりますので、このような箇所についても配慮してコーディングしていきたいですね。

関連記事はこちら

関連記事

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.08.03

    【コピペOK】パンくずリストの設置方法(便利なプラグインも紹介)

    CSS

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

おすすめ記事

  • 2021.08.11

    初心者必見!最初に読んでおきたいgoogleアナリティクスのおすすめ書籍

    その他

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

  • 2021.09.14

    【薄くて軽い!】超おすすめパソコンスタンド

    その他

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!