［み］HTMLで化学式で使う下付き文字を表示しようとしているならsubタグ

昨日、なかなか理解しにくいmol（モル）のことを紹介しましたが、H₂Oのように、化学式をHTMLで表現したい時って、ごくごくたまにありますよね。そんな時に使用するsubタグを紹介します。

下付き文字を表示するsubタグ

まず、H₂Oの「2」のような文字を下付き文字と言います。基本的には、化学式意外のところで使い道はないと思います。化学式以外にも下付き文字の用途をご存知の方は、Twitterとかでご一報ください。

本題の下付き文字を表示する方法ですが、単にsubタグで囲ってやるだけです。例えば、H₂Oだったら、
[cc lang=”HTML”] H₂O
[/cc] CO₂だったら、
[cc lang=”HTML”] CO₂
[/cc] と書けばOKです。

上付き文字はsupタグ

HTMLで2乗を表示する方法でも紹介していますが、100m²の2乗のような文字は、上付き文字といい、supタグを使って表示します。

2乗、3乗だけは実体参照で特殊な書き方がありますが、ほかの上付き文字はsupタグを使用します。例えば、H⁺だったら、
[cc lang=”HTML”] H⁺
[/cc] と書きます。

先ほどの下付き文字もそうでしたが、上付き文字も化学式以外での使い道があまりないように思います。

下付き文字、上付き文字がうまく表示されない時の対処法

subタグとsupタグを使用することで、デフォルトで下付き文字と上付き文字は表示されますが、CSSによっては、subタグとsupタグもリセットしている場合があります。そんなときには、スタイルシートに次のコードを追加してください。
[cc lang=”CSS”] /* 下付き文字を表示 */
sub {
vertical-align: sub;
font-size: smaller;
}

/* 上付き文字を表示 */
sup {
vertical-align: super;
font-size: smaller;
}
[/cc]