HTMLとCSSを使用すると、簡単に上付き文字（superscript）と下付き文字（subscript）を表示することができます。本記事では、その基本的な方法と、CSSを用いたスタイリング方法について詳しく解説します。
上付き文字（Superscript）の表示方法
上付き文字を表示するためには、supタグを使用します。例えば、xの2乗を表示したい場合は以下のように記述します。
<p>x<sup>2</sup></p>このコードをブラウザで表示すると、xの上に小さな2が表示されます。
x2
下付き文字（Subscript）の表示方法
下付き文字を表示するためには、subタグを使用します。例えば、水の化学式H₂Oを表示したい場合は以下のように記述します。
<p>H<sub>2</sub>O</p>このコードをブラウザで表示すると、Hの下に小さな2が表示されます。
H2O
CSSを使ったスタイリング
上付き文字や下付き文字のスタイルをさらにカスタマイズしたい場合、CSSを使用することができます。例えば、上付き文字の色を赤にし、下付き文字の色を青にする場合は以下のようにCSSを記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Superscript and Subscript Example</title>
<style>
sup {
color: red;
}
sub {
color: blue;
}
</style>
</head>
<body>
<p>x<sup>2</sup></p>
<p>H<sub>2</sub>O</p>
</body>
</html>これで、xの上付き文字の2が赤色に、Hの下付き文字の2が青色に表示されます。
x2
H2O
まとめ
HTMLとCSSを使用すると、上付き文字や下付き文字を簡単に表示およびスタイリングすることができます。supタグとsubタグを使用することで、数式や化学式などを効果的に表現できます。CSSを追加することで、見た目をカスタマイズし、より視覚的に魅力的なページを作成することができます。ぜひ、試してみてください。
