なぜ「文字の間隔」をいじるだけでレイアウトが崩れるの？インライン要素のカーニングと「余白」の正体
Webサイトを作っていると、デザイナーさんから「ここ、もう少し文字の間隔を詰めてほしいな」と言われること、ありますよね。
CSSの `letter-spacing` を使えば一発！……と思いきや、いざ適用してみると「あれ？ ボタンの幅が微妙にずれた」「クリックできる範囲が変になった」なんて経験、誰しも一度はあるはずです。
今日は、そんな「インライン要素」と「文字間隔（カーニング）」のちょっとややこしい関係について、現場の知見を交えて優しく紐解いていきましょう。大丈夫、仕組みさえわかれば怖くありませんよ。
—
そもそも「インライン要素」って何者？
`` や `` 、 `` といったインライン要素は、まるで「文章という川の中に浮かぶ小舟」のような存在です。
ブロック要素が「段落」という大きな箱だとしたら、インライン要素は文章の流れの中にポンと置かれた、ちょっとしたアクセントのようなもの。この子たちは、自分自身の幅を「中身の文字」に合わせて柔軟に変えるのが得意です。
「文字間隔」をいじると何が起きる？
`letter-spacing` を指定すると、文字と文字の間に「透明なゴム」を挟むようなイメージをしてみてください。
- ポジティブな値（例: 0.1em）: ゴムを伸ばして間隔を広げる。
- ネガティブな値（例: -0.05em）: ゴムを縮めて間隔を詰める。
ここで重要なのは、「文字間隔を変えると、その要素全体の幅も変わる」という点です。もしその要素が `` タグで、背景色や枠線が付いていたら……そう、文字に合わせて「箱のサイズ」まで一緒に伸び縮みしてしまうんですね。
—
現場でよくある「困った！」を解決する
1. ボタンのデザインが微妙にずれる問題
ボタン（``タグなど）に `letter-spacing` をかけると、右側の余白が文字の分だけ広がりすぎて、中央揃えがズレて見えることがあります。
そんな時は、「擬似的な打ち消し」が現場のテクニックです。
.btn {
letter-spacing: 0.1em; / 文字を広げる /
padding-right: 0; / 一旦パディングをリセット /
/ 最後に、右側にはみ出した間隔分だけ、
マイナスのマージンを足して調整するテクニック /
margin-right: -0.1em;
}
「左側に空間があるから、右側の余白を少し削ってバランスを取る」。お買い物のレジ袋の持ち手を左右均等に整えるような、ちょっとした職人芸ですね。
—
注意！`letter-spacing` は「最後の文字」にもかかる
初心者の頃に一番つまずきやすいのが、「最後の文字の右側」にも間隔が適用されてしまうこと。
例えば、`` で囲んだテキストに `letter-spacing` をかけると、末尾の文字の右側にも透明な隙間が発生します。これを知らずに「なぜか右側に謎の余白がある……」とCSSの `padding` や `margin` を必死に探して数時間溶かす、なんてことも……。
どう対処すればいい？
一番スマートなのは、インライン要素の内側にさらに `` を入れて調整する方法です。
.inner-text {
letter-spacing: 0.2em; / 文字の間隔を広げる /
margin-right: -0.2em; / 最後の文字の後ろの余白を無理やり消す /
}
こうすることで、「見た目のカーニング」と「要素の物理的な幅」を切り離してコントロールできます。これができるようになると、レイアウトの微調整が劇的に楽になりますよ！
—
最後に：完璧を目指しすぎない勇気も大切
`letter-spacing` を駆使したデザインは、確かに洗練されて見えます。でも、あまりにマイナス値を詰めすぎると、今度はスマホで見た時に文字が重なって読めなくなってしまうことも。
「デザインの美しさ」と「情報の読みやすさ」、この二つはWeb制作における永遠のテーマです。
- 迷ったら少し広めにする（可読性重視）
- 見出しなど、インパクトが必要な場所だけ詰める（デザイン重視）
最初はこんな使い分けから始めてみてください。画面の中の「文字」も、ただのデータではなく、ユーザーに届けるための大切なメッセージ。一つひとつの文字間隔を丁寧に扱うだけで、あなたのサイトの「プロっぽさ」はグッと上がります。
もし調整中に詰まってしまっても大丈夫。まずはブラウザの検証ツールで「要素の幅」を色付きで眺めてみてください。透明なゴムがどこまで伸びているかが見えてきたら、もうあなたは立派なフロントエンド・エンジニアの第一歩を踏み出していますよ！
コメント