HTMLで上付き下付き文字を使って数式や化学式を書く方法を現役デザイナーが解説【初心者向け】

HTMLで上付き下付き文字を使って数式や化学式を書く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

 

上付き文字、下付き文字とは

上付き文字とは、表示されている行間から上側にずらして表示されている文字のことを言います。基本的には添字のため小さいサイズで表示されています。

代表的なものは㎤の右上の”3″が上付き文字にあたります。下付き文字とは、上付き文字とは反対に行間から下側にずらして表示されている文字のことを言います。

こちらの代表的なものは水を化学式で表すH2Oや二酸化炭素を化学式で表した場合のCO2の”2″が下付きの文字で表示されることが多いです。

これは化学式の反復した表記を添字にして表記をしています。

 

HTMLとCSSで表示する方法

HTMLで表記をする場合にはsup要素とsub要素を使用します。上付き文字にしたい場合にはsup要素で囲んだ文字だけを上付き文字にすることが出来ます。

下付き文字にしたい場合には、同様にsub要素を用いて囲むだけで該当文字を下付きにすることが出来るようになります。また、HTMLはあくまでもテキスト表記とし、CSS側で装飾をする場合にはvertical-alignプロパティを使用します。

vertical-alignの値をsuperにした場合は上付き文字に、値をsubにした場合は反対に下付き文字になります。上付き文字にするのと同時に大きさなどの調整をしたい場合にはCSSファイルにまとめて記述することで同時に調整が出来るようになります。

 

[PR] Webデザインで副業する学習方法を動画で公開中

数式や化学式を書いてみよう

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サイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。