【HTML】sub要素、sup要素の使い方【下付き文字、上付き文字を表示します】

Program

sub要素やsup要素を使えば、下付き文字や上付き文字を表示できます。

sub要素とsup要素の使い方

では、sub要素とsup要素を使って、下付き文字や上付き文字を表示する例を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sub要素、sup要素</title>
</head>
<body>
    <p>水の化学式は「H<sub>2</sub>O」です。</p>
    <p>体積(立方メートル)の単位は「m<sup>3</sup>」です。</p>
</body>
</html>

body要素の中に、sub要素またはsup要素を使った2つのp要素を記述しました。

1つ目のp要素では、水の化学式を表示するために、下付き文字として表示すべき「2」をsub要素の内容に指定しています。数字の「2」は、半角文字を記述してます。

また、2つ目のp要素では、体積(立方メートル)の単位を表示するために、上付き文字として表示すべき「3」をsup要素の内容に指定しています。数字の「3」は、半角文字を記述してます。

そして、ブラウザの表示結果の通り、「2」を下付き文字とした水の化学式と、「3」を上付き文字とした体積(立方メートル)の単位を正しく表示することができました。

その他の半角文字や全角文字の下付き、上付き表示について

次に、その他の半角文字や全角文字について、sub要素とsup要素を適用してみました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sub要素、sup要素</title>
</head>
<body>
    <p>一<sub>二</sub>三<sup>四</sup>五</p>
    <p>あ<sub>い</sub>う<sup>え</sup>お</p>
    <p>ア<sub>イ</sub>ウ<sup>エ</sup>オ</p>
    <p>ア<sub>イ</sub>ウ<sup>エ</sup>オ</p>
    <p>1<sub>2</sub>3<sup>4</sup>5</p>
    <p>Hyper <sub>Text</sub> Markup <sup>Language</sup></p>
    <p>Hyper <sub>Text</sub> Markup <sup>Language</sup></p>
</body>
</html>

1つ目のp要素は全角漢字、2つ目はひらがな、3つ目は全角カタカナ、4つ目は半角カタカナ、5つ目は全角数字、6つ目は半角英文字、7つ目は全角英文字としました。

それぞれのp要素の内容に、sub要素とsup要素を適用しております。

そして、ブラウザの表示結果の通り、各文字の形態(全角や半角)を保ちつつ、下付きや上付きの表示がなされていることが確認できます。

各種ブラウザでの表示結果

sub要素やsup要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
sub要素
sup要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、sub要素やsup要素の使い方について、ご参考になさってください。

タイトルとURLをコピーしました