なぜその「文字詰め」は事故るのか？インライン要素と `letter-spacing` の深淵
現場でデザインカンプを実装しているとき、ふと「あ、ここちょっと文字間隔を調整したいな」と思うことはありませんか？ `letter-spacing` を一行追加するだけの簡単な作業。しかし、その何気ない一手間が、実はインライン要素の「余白」というパンドラの箱を開けていることに気づいている人は意外と少ないものです。
今日は、中級エンジニアなら絶対に押さえておきたい、`letter-spacing` がインライン要素にもたらす「目に見えない影響」と、それを美しく制御するプロの作法について解説します。
「文字間隔」がクリック領域を侵食する理由
まず、ブラウザが `letter-spacing` をどう処理しているかを理解しましょう。
`letter-spacing` を指定すると、各文字の右側に指定した値分の「追加のスペース」が挿入されます。ここまでは直感的ですが、問題は「最後の文字の右側」にもそのスペースが適用されるという点です。
例えば、`` や `` といったインライン要素に `letter-spacing: 0.1em;` を当てると、要素の幅はその分だけ右に拡張されます。これが何を引き起こすか？
現場で使える「文字詰め」の処方箋
この仕様を逆手に取り、デザイン的に美しい「文字詰め」を実現しつつ、レイアウトの崩れを防ぐにはどうすればいいのか。私が実務で採用しているベストプラクティスを共有します。
1. 負のmarginで相殺する（基本戦略）
最も手っ取り早く、かつ効果的なのが、インライン要素の右側にネガティブマージンを当てる手法です。
.letter-spaced-link {
/ 文字間を少し広げる /
letter-spacing: 0.05em;
/ 最後の文字の右側にできた余白を、負のmarginで物理的に打ち消す /
margin-right: -0.05em;
}
これで、視覚的なカーニングを保ったまま、本来の要素の幅（コンテナ内での位置関係）をピクセル単位で正確に維持できます。
2. `inline-block` への昇格と `text-indent` の合わせ技
もし、その要素に `padding` や `border` を持たせるなら、`display: inline-block` に切り替えるのが安全です。ただし、これだと `text-align: center` の影響を受けなくなるため、注意が必要です。
.nav-item {
display: inline-block;
letter-spacing: 0.1em;
/ inline-block化して余白を相殺するテクニック /
/ 左側の余白分をインデントで補正し、右側の余白はmarginで削る /
text-indent: 0.1em;
margin-right: -0.1em;
}
実際のUIコンポーネントでの適用例
以下は、見出しやボタンでよく使う「文字間隔調整」のクリーンな実装パターンです。コピペして、お手元の環境で調整してみてください。
なぜ「そこまでこだわる」のか
「たかが0.1emのズレじゃないか」と思うかもしれません。しかし、フロントエンドの美学は、こうした「計算し尽くされた数ピクセルの制御」の積み重ねに宿ります。
ブラウザの仕様を盲信するのではなく、「ブラウザが裏でどう計算しているか」を想像し、それをデザインの意図に寄せていく。この姿勢こそが、単なるコーダーと、真のエンジニアを分かつ境界線だと私は考えています。
もしあなたがチームでレビューをする機会があれば、ぜひ「その `letter-spacing`、右側の余白はどう処理してる？」と投げかけてみてください。きっと、コードの品質に対する議論が一段深い場所へ進むはずです。
さて、次はどのCSSプロパティの「闇」を暴きましょうか？また現場でお会いしましょう。
コメント