HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLの上付き文字（sup）と下付き文字（sub）の使い方と活用シーン

HTMLの<sup>タグは、上付き文字（superscript）を定義します。これは行の上部に表示されるテキストのことです。一方、<sub>タグは下付き文字（subscript）を表し、行の下部に表示されるテキストを指します。

通常、私たちが目にするテキストには「ベースライン」と「xハイト」という基準線があります。

ベースラインとは、下線を引いた場合に表示される位置に相当する基準線です。xハイトは小文字の高さを示す仮想の線で、その名前は小文字の「x」がちょうどこの空間を埋めることに由来しています。

このガイドでは、HTMLで上付き文字と下付き文字を定義する方法を解説します。それぞれの具体例を通じて、実際のコードでの使い方を学びましょう。

上付き文字・下付き文字はいつ使う？

通常のテキストより半文字分上下にずらした文字を使いたい場面があります。下付き文字はテキストより半文字分下に配置される文字、上付き文字は半文字分上に配置される文字です。

実際の場面では、数式、化学式、引用や脚注などを記述する際に、これらの文字がよく使われます。

HTMLで上付き文字を作る（<sup>）

HTMLで上付き文字を作るには、<sup>タグを使用します。このタグで囲まれたテキストは行の上部に配置されます。なお、<sup>タグには固有の属性はありません。

構文の例を見てみましょう。

<p>4 <sup>2</sup> = 16</p>

ここでは「2」を<sup>タグで囲んでいます。これにより「2」が上付き文字として表示され、コードの表示結果は次のようになります。

4 ² = 16

HTMLで下付き文字を作る（<sub>）

HTMLの<sub>タグは下付き文字を定義します。下付き文字とは、行の下部寄りに表示されるテキストのことです。

構文の例：

<p>This is main text. <sub>3</sub></p>

表示結果：

This is main text. ₃

上付き文字の例と同様に、<sub>にも特別な属性は指定していません。テキストを下付きにするには、そのテキストを<sub>タグで囲むだけです。

下付き文字は、元素周期表の元素記号（例：H₂O）などでもよく使われています。

HTMLの上付き・下付き文字の実装例

<sub>と<sup>を実際のWebページで使う例を見てみましょう。以下のコードをご確認ください。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Superscript and Subscript</title>
   <style>
       sub {
           vertical-align: sub;
           font-size: smaller;
       }
       sup {
           vertical-align: super;
           font-size: smaller;
       }
   </style>
</head>
<body>
   <div style="text-align:center;" class="container">
       <div>
           <h3>Superscript</h3>
           <span>E=MC<sup>2</sup></span>
           <br />
           <span>1.7 x 10<sup>4</sup></span>
       </div>
       <div>
           <h3>Subscript</h3>
           <span>H<sub>2</sub>O</span>
           <br />
           <span><sup>†1</sup>Ipsum, Lorem. Footnote example, 2020.</span>
       </div>
   </div>
</body>
</html>

ご覧のとおり、<span>要素に対して<sub>タグと<sup>タグを使って効果を実現しています。これらのタグには、あらかじめ次のようなデフォルトのスタイル値が用意されています。

<style>
       sub {
           vertical-align: sub;
           font-size: smaller;
       }
       sup {
           vertical-align: super;
           font-size: smaller;
       }
</style>

両タグとも、HTMLで利用可能なイベント属性とグローバル属性をサポートしています。つまり、テキストがクリックされたときのイベントハンドラを設定することもできます。

さらに、通常のHTML属性を使って要素を自由にカスタマイズすることも可能です。利用できるグローバル属性の一覧は、W3Schoolsの「Global Attributes」ページで確認できます。

まとめ

HTMLの<sub>要素は、テキストに下付き文字を追加し、行の下部に表示します。<sup>は上付き文字を追加し、行の上部に表示します。

以上です！これでHTMLで上付き文字と下付き文字を作成できるようになりました。

HTMLについてさらに学びたい方は、おすすめのオンラインコースや書籍を紹介した「HTML学習ガイド」もぜひ参考にしてください。

  1. Googleドキュメントで上付き文字・下付き文字を使う方法|3つの手順を徹底解説

    文章を作成していると、行の上部に小さな文字を付ける「上付き文字」や、下部に小さな文字を付ける「下付き文字」が必要になる場面がよくあります。 特に数式や化学式の表記、日付の書き方などでは頻繁に使われる書式です。 Googleドキュメントで上付き文字・下付き文字を入力する方法は主に3つあります。メニューから設定する方法、キーボードショートカットを使う方法、そして特殊文字ダイアログから挿入する方法です。 本記事では、それぞれの手順をわかりやすく解説します。動画で確認したい方は、記事の内容をまとめたYouTube動画もぜひご覧ください。 Googleドキュメントで上付き文字を付ける方法 1. メニュー

  2. Androidでコピー＆ペーストを使う方法｜テキスト・リンク・切り取り操作を徹底解説

    カット／コピー＆ペーストを発明したラリー・テスラー氏に、世界は永遠に感謝すべきでしょう。シンプルでありながら不可欠なこの機能は、コンピューティングに欠かせない存在です。コピー＆ペーストのないデジタルの世界など想像できません。同じメッセージを何度も入力するのはストレスですし、コピー＆ペーストなしで複数のデジタルデータを作成するのはほぼ不可能でしょう。 時代とともに、スマートフォンは日常的なテキスト入力の主役となりました。そのため、AndroidやiOSなどモバイルOSにコピー＆ペースト機能がなければ、日々の作業は成り立ちません。 本記事では、テキストをある場所から別の場所へコピー＆ペーストするさ