意外と軽視されがち？``と``で表現する「意味のある」タイポグラフィ
フロントエンドの現場で、「とりあえずフォントサイズを小さくして `vertical-align` で調整すればいいよね」と、``とCSSで無理やり添え字を表現しているコードを見かけることがあります。
確かに見た目は整うかもしれません。しかし、スクリーンリーダーのユーザーや、セマンティクスを解釈するブラウザにとって、それは「ただの小さな文字」に過ぎません。
今回は、化学式や数学、あるいは脚注などで不可欠な ``（下付き）と ``（上付き）タグについて、ブラウザの裏側の挙動と、現場で「恥をかかない」ためのベストプラクティスを解説します。
—
1. なぜ「CSSで代用」してはいけないのか
HTMLには、その要素が持つ「意味」があります。
- `` (subscript): 文脈上、下付きであるべきテキスト（化学式の数字など）。
- `` (superscript): 文脈上、上付きであるべきテキスト（累乗、序数、脚注の参照番号など）。
ブラウザはこれらのタグを読み取ると、デフォルトで適切なベースラインのシフトとフォントサイズの縮小（多くの場合 `x-small` 相当）を適用します。さらに重要なのは、アクセシビリティツリーにおいて、これらの要素が「通常のテキストとは異なる意味を持つ」と明示される点です。
単なる装飾としてCSSで `font-size: 0.7em;` を当てるのと、`` を使うのでは、支援技術が提供する「文脈の解釈」に雲泥の差が生まれるのです。
—
2. ブラウザの裏側：実は「行間」が崩れるリスクがある
ここで現場の泥臭い話を一つ。`` や `` を使うと、行の高さ（`line-height`）が親要素からはみ出してしまう現象に遭遇したことはありませんか？
多くのブラウザのデフォルトスタイルシートは、`vertical-align: sub` や `vertical-align: super` を適用します。これにより、インラインボックスの高さが拡張され、行間が不均一に見えてしまうことがあります。
解決策：CSSでの微調整
これを防ぐために、私たちは以下のようなCSSをベースに適用するのが定石です。
/ 行の高さを維持しつつ、添え字のレイアウト崩れを防ぐ /
sub, sup {
font-size: 75%; / 文字サイズを少し小さく /
line-height: 0; / 行の高さの影響を相殺 /
position: relative;
vertical-align: baseline; / ベースラインを基準に調整 /
}
sub {
top: 0.25em; / 下へずらす /
}
sup {
top: -0.5em; / 上へずらす /
}
このアプローチを取ることで、行間を保ったまま、意図した通りの配置が可能になります。
—
3. 実践コード：すぐに使える「美しく正しい」マークアップ
では、実際に現場で使えるサンプルコードを見てみましょう。化学式と数学の表現例です。
技術仕様：化学と数学の添え字
水は化学式で
H2O と表記されます。
ピタゴラスの定理：
a2 + b2 = c2
ここには重要な注釈があります1。
—
プロからのアドバイス：使いどころを見極める
最後に一つだけ、中級エンジニアの皆さんに伝えたいことがあります。「デザインのための装飾」に `sub` や `sup` を使わないでください。
例えば、ブランドロゴの「TM（トレードマーク）」や、キャッチコピーの一部を小さく見せたいだけの時にこれらを使うのはNGです。それはあくまでCSSの `font-size` や `vertical-align` で制御すべき「視覚デザイン」です。
`` や `` は、「それがないと情報の意味が正しく伝わらない」という、コンテンツの構造に不可欠な場面でこそ輝きます。
正しいタグを選び、CSSで適切に制御する。この積み重ねが、堅牢で誰にとっても読みやすいWebサイトを作る唯一の近道です。明日のコーディングから、ぜひ意識してみてください。
コメント