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

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

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

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

本題の下付き文字を表示する方法ですが、単にsubタグで囲ってやるだけです。例えば、H2Oだったら、

H<sub>2</sub>O

CO2だったら、

CO<sub>2</sub>

と書けばOKです。

上付き文字はsupタグ

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

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

H<sup>+</sup>

と書きます。

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

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

subタグとsupタグを使用することで、デフォルトで下付き文字と上付き文字は表示されますが、CSSによっては、subタグとsupタグもリセットしている場合があります。そんなときには、スタイルシートに次のコードを追加してください。

/* 下付き文字を表示 */
sub {
    vertical-align: sub;
    font-size: smaller;
}

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

下付き文字、上付き文字をどっちも使った例

mol(モル)に関係する計算では、下付き文字と上付き文字が活躍します。前回のモルの記事の最後の例題を下付き文字と上付き文字を使って表示してみます。

【問題】
CO2 1.2 x 1024個は何molか?

【答え】
1.2 x 1024 ÷ 6.0 x 1023 = 2〔mol〕

という風に、まるで教科書のように表示できます。ブログとかで、化学式とかモルのこととかについて書きたい時は、この下付き文字と上付き文字を活用してください:)

モルのことをもっと知りたい方は、こちらもどうぞ。
[み]mol(モル)ってなんだという人は、難しく考えすぎ

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup