HTMLで上付き下付き文字を使って数式や化学式を書く方法を現役デザイナーが解説【初心者向け】
初心者向けにHTMLで上付き下付き文字を使って数式や化学式を書く方法について解説しています。数式や化学式をブラウザ上に表示する場合、上付き文字や下付き文字が必要になることがあります。sup要素とsub要素を使った表記方法を学びましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLで上付き下付き文字を使って数式や化学式を書く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
上付き下付き文字を使って数式や化学式を書く方法について詳しく説明していくね！
お願いします！
上付き文字、下付き文字とは
上付き文字とは、表示されている行間から上側にずらして表示されている文字のことを言います。基本的には添字のため小さいサイズで表示されています。
代表的なものは㎤の右上の”3″が上付き文字にあたります。下付き文字とは、上付き文字とは反対に行間から下側にずらして表示されている文字のことを言います。
こちらの代表的なものは水を化学式で表すH2Oや二酸化炭素を化学式で表した場合のCO2の”2″が下付きの文字で表示されることが多いです。
これは化学式の反復した表記を添字にして表記をしています。
HTMLとCSSで表示する方法
HTMLで表記をする場合にはsup要素とsub要素を使用します。上付き文字にしたい場合にはsup要素で囲んだ文字だけを上付き文字にすることが出来ます。
下付き文字にしたい場合には、同様にsub要素を用いて囲むだけで該当文字を下付きにすることが出来るようになります。また、HTMLはあくまでもテキスト表記とし、CSS側で装飾をする場合にはvertical-alignプロパティを使用します。
vertical-alignの値をsuperにした場合は上付き文字に、値をsubにした場合は反対に下付き文字になります。上付き文字にするのと同時に大きさなどの調整をしたい場合にはCSSファイルにまとめて記述することで同時に調整が出来るようになります。
数式や化学式を書いてみよう
2立法メートル、水の化学式H2Oを表記していきます。CSSのvertical-alignで調整する場合は少し小さな添字にしています。
（htmlファイル）
<div> <p>２<sup>３</sup>m</p> <p>H<sub>２</sub>O</p> <p>２<supan class="test1">３</supan>m</p> <p>H<supan class="test2">２</supan>O</p> <br> <p>上付き<sup>a</sup>文字</p> <p>下付き<sub>b</sub>文字</p> <p>上付き<supan class="test1">c</supan>文字</p> <p>下付き<supan class="test2">d</supan>文字</p> </div>
（cssファイル）
.test1{
vertical-align: super;
font-size: 2px;
}
.test2{
vertical-align: sub;
font-size: 2px;
}
監修してくれたメンター
| 木村勇土
TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
