More than 3 years have passed since last update.

【初心者でもわかる】文字と文字の間隔を調整する方法

Posted at 2020-12-10

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

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

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

ソース

index.html

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

style.css

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

style.css

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

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

style.css

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

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

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

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

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