HTML で上付き文字を書く方法
上げたいテキストを <sup> で囲みます。ブラウザは小さく、行より上に表示します。対になる <sub> はテキストを小さく、下に表示します。
<sup> と <sub> はインライン要素で、他のインライン要素を入れられるので、2<sup>n+1</sup> や x<sub><i>i</i></sub> も使えます。
よくある使い方
| 書きたいもの | 書き方 | 結果 |
|---|---|---|
| 指数 | 10<sup>3</sup> | 10 の 3 乗 |
| 序数 | 2<sup>nd</sup> | 文字が上がった 2nd |
| 脚注の番号 | text<sup><a href="#n1">1</a></sup> | 上に上がった、クリックできる 1 |
| 化学式 | C<sub>6</sub>H<sub>12</sub>O<sub>6</sub> | ブドウ糖 |
| 添字や底 | x<sub>1</sub>、log<sub>2</sub> | 下がった 1 と 2 |
| 商標 | Brand<sup>TM</sup> または Brand™ | 上に上がった TM |
位置が意味の一部であるときにタグを使います。m<sup>2</sup> と m2 は別のものです。ラベルやバッジのように、単に小さく見せたいだけのテキストには CSS を使いましょう。
sup で脚注を作る
脚注の番号は、下にある注釈への上付きのリンクです。各注釈に id を付け、リンクでそれを指します。
番号をクリックすると注釈に移動し、「Back」で戻ります。小さなリンクの下線を消すと段落がすっきりし、リンクの色でクリックできることは伝わります。
行の間隔をそろえる
初期状態では、<sup> や <sub> があると、その行が周りの行より高くなることがあり、指数をいくつか含む段落は間隔が不ぞろいに見えます。これらに line-height: 0 を指定すると直ります。
グレーの箱は、2 行目と 4 行目が押し広げられて高くなっています。緑の箱ではすべての行が同じ高さです。このルールを基本のスタイルシートに一度追加すれば、もう気にする必要はありません。
Unicode の文字と MathML
よく使うものには、用意された文字があります: ² (²)、³ (³)、¹ (¹)、™ (™)、½ (½)。タグが不要で行の高さにも影響しませんが、一部の数字や文字にしかありません。
分数、根号、指数の指数など本格的な数式には MathML を使います。現在のブラウザは MathML をそのまま表示できます。
<msup> は底と指数を受け取り、<msub> は下付き文字で同じことをします。文中の指数が 1 つだけなら <sup> のほうが簡単です。
よくある間違い
- 文字を小さくするために
<sup>を使う。 テキストが上がるうえに、上付き文字だと読み手に伝えてしまいます。小さな文字にはfont-sizeを使いましょう。 - 行の間隔がばらつく。
sup, sub { line-height: 0; }を追加しましょう。 - 完成した文章に
x^2やH2Oと書く。 内容が正しく読めるようにx<sup>2</sup>とH<sub>2</sub>Oを使いましょう。 - 脚注の番号が小さすぎてタップしにくい。 スマートフォンでは上付きの数字 1 つはとても小さな的です。
sup aに少し padding を付けるか、注釈を本文の近くに置きましょう。
よくある質問
HTML で上付き文字を書くには？
上げたいテキストを <sup> で囲みます。x<sup>2</sup> は x の 2 乗、1<sup>st</sup> は序数になります。ブラウザは小さく、ベースラインより上に表示します。
HTML で下付き文字を書くには？
<sub> を使います。水なら H<sub>2</sub>O、添字なら x<sub>1</sub> です。小さく、ベースラインより下に表示されます。
HTML で x の 2 乗はどう書きますか？
x<sup>2</sup> か、用意された文字 x² を使います。この文字は文字参照 ² でも書けます。2 乗や 3 乗なら文字で十分ですが、2<sup>n+1</sup> のような任意の指数には <sup> を使います。
<sup> を使うと行の間隔がばらつくのはなぜですか？
上に上がったテキストのせいで、その行が段落のほかの行より高くなることがあります。sup, sub { line-height: 0; } で直せます。行の高さに影響しなくなります。
<sup> の代わりに CSS を使えますか？
vertical-align: super と小さめの font-size で見た目は同じになりますが、<sup> と <sub> には意味があります。「m2」と「m<sup>2</sup>」は別の値です。上げ下げした位置が内容の一部であるときはタグを使いましょう。
