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
よくある質問（FAQ）
Q. HTMLで縦書きと横書きを同一ページに混在させるには？
A. writing-mode: vertical-rl;を縦書きにしたい要素に設定します。インライン要素にも適用可能です。日本語の縦書き組版にはtext-orientation: mixedやtext-combine-upright等も組み合わせます。
Q. 縦書き文字で英数字を横向き（縦中横）にするには？
A. text-combine-upright: all;で連続する半角文字を縦書き中で横向きに表示できます。「2024年」の「2024」を横向きにする日本語縦書き組版でよく使われます。
Q. 縦書きのサポートはどのブラウザで利用できますか？
A. writing-modeは主要ブラウザで広くサポートされています。ただしIE11ではプレフィックス（-ms-writing-mode）が必要です。モダンブラウザでは問題なく使えます。
まとめ
HTMLとCSSを使用すると、上付き文字や下付き文字を簡単に表示およびスタイリングすることができます。supタグとsubタグを使用することで、数式や化学式などを効果的に表現できます。CSSを追加することで、見た目をカスタマイズし、より視覚的に魅力的なページを作成することができます。ぜひ、試してみてください。