化学式や数式をHTMLで直接入力するのは簡単な仕組みで実現できるのをご存知でしょうか？
自分も少し前まではCSSを使った調整を行なっていましたが、HTMLで表現できる方法があるので紹介したいと思います。
また動画もあるので必要に応じて活用してください。
HTMLで下付き文字に変換する方法
まずは下付き文字についてです、CO2などの化学式やlog2Xのような数式で登場します。
pタグを使って普通に書くと以下のような形になるはずです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<p>H2O</p>
<p>CO2</p>
<p>log2X</p>
</div>
</body>
</html>こちらを以下のように修正するだけです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<p>H<sub>2</sub>O</p>
<p>CO<sub>2</sub></p>
<p>log<sub>2</sub>X</p>
</div>
</body>
</html>
subタグという専用のタグが用意されていて、subタグで囲まれた文字は自動的に下付き文字に変換されます。
HTMLで上付き文字に変換する方法
同じような段取りで上付き文字についても紹介します。
数式の掛け合わせで使います、計算をするだけなら「X ^ 2」とすれば良いのですが、ブラウザで表示するには以下のようにします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<p>X<sup>2</sup></p>
<p>2<sup>x</sup></p>
</div>
</body>
</html>
上付き文字の場合はsupタグというタグを使うと掛け合わせの数式を書くことができます。
数字だけでなく英語でも小文字にすれば問題なく表現できます。