【HTML/CSS】テキスト内の句読点などを詰めて表示させる方法

デザインを元にコーディングを行う時などに、デザイン内のテキストにカーニングの調整がされていることがあります。カーニングが設定されていると文字間の隙間が詰められるため、実際のサイト上の表示と異なってしまいます。

このような場合は、下記のような記述を加えることで解決できます。

「letter-spacing」を使用して文字間を調整

最初に紹介する方法がCSSプロパティの「letter-spacing」を使用する方法になります。letter-spacingは、文字間を広げる、狭くすることができるCSSプロパティです。

letter-spacingで文字間を広げる

<p>これは、わたしが小さいときに、村の茂兵（もへい）というおじいさんからきいたお話です。</p>

p{
  letter-spacing:1px;
}

letter-spacingで文字間を狭くする

p{
  letter-spacing:-1px;
}

文章内の一部テキストに反映したい場合は、その部分をspanタグ等で囲んだ上で「letter-spacing」を指定すれば部分的に指定することができます。

「font-feature-settings」を使用して文字間を調整

次に紹介する方法がCSSプロパティの「font-feature-settings」を使用する方法になります。
イラストレーターでメトリクスのカーニング設定がされている場合は、こちらのプロパティがおすすめです。
前項と同じく、ごんぎつねの例文で説明していきます。

font-feature-settingsでカーニングを設定する

p{
  font-feature-settings:"palt";
}

「font-feature-settings」を指定するとカーニングを適用させることができます。全角記号使用時にできる隙間も詰めて表示されるので、デザイン通りの見た目にすることができます。