約物の詰めをCSSで調整する方法｜文頭のズレを整える実装テクニック
2026-03-27
箇条書きや見出しで、「 （ 『 から始まる文章が少し右にズレて見えることはありませんか？
これは不具合ではなく、日本語フォント特有の仕様によるものです。
本記事では、約物の詰めについて、CSSを使った調整方法を実装ベースで解説します。
見た目を整えるだけでなく、実務でどこまで対応すべきかという観点も含めて紹介します。
テキストのリスト
- 通常のテキストです
- 「初回相談」は無料です
- サービス内容をご案内します
- （予約制）事前にお問い合わせください
- 制作の流れをご説明します
- 『制作事例』はこちらからご覧いただけます
- 納期についてご案内します
- 【見積もりのみ】のご相談も可能です
文頭に約物がある行だけ、右にズレて見えます。
なぜズレるのか
「 （ 『 などの約物には、フォント側で余白が設定されています。
そのため文頭に配置すると、他の文字と比べて右に寄って見えます。
この調整は「約物の詰め」や「カーニング」と呼ばれます。
約物の最初を詰める
文頭の約物は、約物自体を左に寄せます。
寄せ具合はフォントによって異なるので、目で確認しながら調整します。
- 通常のテキストです
- 「初回相談」は無料です
- サービス内容をご案内します
- （予約制）事前にお問い合わせください
- 制作の流れをご説明します
- 『制作事例』はこちらからご覧いただけます
- 納期についてご案内します
- 【見積もりのみ】のご相談も可能です
約物の最初と最後を詰める
文頭だけでなく、約物の最後も調整することで、より自然な見た目になります。
- 通常のテキストです
- 「初回相談」は無料です
- サービス内容をご案内します
- （予約制）事前にお問い合わせください
- 制作の流れをご説明します
- 『制作事例』はこちらからご覧いただけます
- 納期についてご案内します
- 【見積もりのみ】のご相談も可能です
コードを載せておきます。
<ul>
<li>通常のテキストです</li>
<li><span class="kern-start">「</span>初回相談<span class="kern-end">」</span>は無料です</li>
<li>サービス内容をご案内します</li>
<li><span class="kern-start">（</span>予約制<span class="kern-end">）</span>事前にお問い合わせください</li>
<li>制作の流れをご説明します</li>
<li><span class="kern-start">『</span>制作事例<span class="kern-end">』</span>はこちらからご覧いただけます</li>
<li>納期についてご案内します</li>
<li><span class="kern-start">【</span>見積もりのみ<span class="kern-end">】</span>のご相談も可能です</li>
</ul>.kern-start {
display: inline-block;
margin-left: -0.5em;
}
.kern-end {
display: inline-block;
margin-right: -0.4em;
}実務での判断基準
すべてのテキストで調整する必要はありません。
キャッチコピーや箇条書きなど、どうしても気になる部分に対応します。
こうした細かな調整は、実装の丁寧さが伝わるポイントでもあります。
フォントによって余白の取り方が異なるため、数値は固定せず、見た目に合わせて調整するのが重要です。
まとめ
約物の詰めは小さな調整ですが、デザインの完成度に大きく影響します。
こうした細かな部分を丁寧に実装することで、仕上がりの品質が一段上がります。
