HTMLで上付き文字のサンプルコード
以下は、HTMLで上付き文字（superscript）を表示するためのサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<title>上付き文字のサンプル</title>
</head>
<body>
<p>化学式で水の分子式はH<sup>2</sup>Oです。</p>
<p>数学の指数計算では、2<sup>3</sup>は8となります。</p>
</body>
</html>
このコードでは、<sup>と</sup>タグを使用して、上付き文字として表示したい部分を囲んでいます。上付き文字として表示されるテキストは、<sup>タグの後に記述します。例えば、化学式で水の分子式を表示する場合、H<sup>2</sup>Oと記述します。
上記のコードをブラウザで表示すると、以下のような結果が得られます。
化学式で水の分子式はH<sup>2</sup>Oです。
数学の指数計算では、2<sup>3</sup>は8となります。
上記のように、<sup>タグを使用することで、テキストの一部を上付き文字として表示することができます。
CSSを使う場合
CSSを使用して上付き文字をスタイリングする場合、vertical-alignプロパティを使用します。以下は、CSSを追加した上付き文字のサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<title>上付き文字のサンプル</title>
<style>
sup {
vertical-align: super;
font-size: smaller;
}
</style>
</head>
<body>
<p>化学式で水の分子式はH<sup>2</sup>Oです。</p>
<p>数学の指数計算では、2<sup>3</sup>は8となります。</p>
</body>
</html>
このコードでは、<style>タグ内にCSSスタイルを定義しています。supセレクタを使用して上付き文字要素を選択し、vertical-alignプロパティをsuperに設定しています。これにより、上付き文字が適切に表示されます。また、font-sizeプロパティをsmallerに設定していますが、これは上付き文字のサイズを元のテキストよりも小さくするための設定です。
上記のコードをブラウザで表示すると、先ほどの例と同じように上付き文字が表示されますが、スタイルが追加されているため、より整った見た目になります。