サイトレビュー
【勝手にWEBサイトレビュー#28】画像の枠にこだわりのあるポートフォ...
2021.04.16
2021.03.24
先日、文字を真ん中揃えにしたいのに、なぜかズレてしまうということがありました。
本日は、その解決方法をご説明いたします!
目次
文字は、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: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
の値が大きいにはズレが気になりますので、このような箇所についても配慮してコーディングしていきたいですね。
関連記事はこちら
株式会社スピカデザイン
質問・感想などはこちら!
REQUEST
ご意見、感想や記事のリクエストなど
メッセージお待ちしております!