どうも7noteです。字間の調整方法について

デザインツールなどでは綺麗に見せるために字間を細かく調整する機能がついています。
実はCSSでも字間を調節することが可能です。

※上は通常、下が字間を調整した例。

ソース

<p>あいうえお</p>

p {
  letter-spacing: 10px;  /* 字間を10pxに指定 */
}

文字の右側に余白ができるので、中央寄せのときズレる問題の解決方法

p {
  text-align: center;    /* 中央寄せ */
  letter-spacing: 10px;  /* 字間を10pxに指定 */
  text-indent: 10px;     /* 字間と同じ分だけインデントで調整指定 */
}

※2行以上だと崩れてしまうので注意。

右寄せのときズレる問題の解決方法

p {
  text-align: right;     /* 右寄せ */
}

span {
  letter-spacing: 10px;  /* 字間を10pxに指定 */
  margin-right: -10px;   /* ネガティブマージンを指定 */
}

※インライン要素にしか使えませんので注意！

まとめ

デザインからコーディングしていると、見落としがちですが字間の調整も行なうようにしましよう。
特に見出しなどが変更されている場合が多いので、忘れてしまうと「なんかデザインと印象が違う」といった事になってしまいます。

細かいところにも気を配れるコーディングを気を付けていきたいですね。

参考：https://www.websuccess.jp/blog/archives/2443/

おそまつ！