subタグの使い方【HTMLリファレンス】

2024-06-012024-06-04

HTMLのタグは、テキストを下付き文字として表示するために使われます。

この記事では、タグの基本的な使い方から、具体的な使用例、さらにCSSを使ったスタイリング方法までをわかりやすく解説します。

目次から探す

subタグとは

定義と役割

タグは、HTMLでテキストを下付き文字として表示するために使用されます。

下付き文字とは、通常のテキストよりも小さく、基準線よりも下に配置される文字のことです。

主に数式や化学式、注釈などで使用されます。

例えば、化学式のH₂Oの「₂」や、数学の指数表記のx₂の「₂」などが該当します。

subタグの基本的な構文

タグの基本的な構文は非常にシンプルです。

以下のように、下付き文字にしたいテキストをタグで囲むだけです。

<sub>下付き文字</sub>

具体的な例を見てみましょう。

以下のコードは、化学式のH₂Oを表現しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>subタグの例</title>
</head>
<body>
    <p>水の化学式は H<sub>2</sub>O です。</p>
</body>
</html>

このコードをブラウザで表示すると、以下のように見えます。

このように、タグを使うことで、特定の文字を下付き文字として簡単に表示することができます。

subタグの使用例

数式での使用

subタグは、特に数式や化学式の表記において非常に便利です。

以下に具体的な使用例を示します。

化学式の表記

化学式では、元素の記号の下に数字を付けることで分子の構成を示します。

例えば、水の化学式「H₂O」は、subタグを使って次のように表記します。

<p>水の化学式は H<sub>2</sub>O です。</p>

このコードをブラウザで表示すると、以下のようになります。

テキストの脚注や注釈

subタグは、テキストの脚注や注釈を示すためにも使用されます。

例えば、文中で特定の単語やフレーズに対して注釈を付ける場合に便利です。

<p>この文には注釈があります<sub>1</sub>。</p>
<p><sub>1</sub> これは注釈の内容です。</p>

このコードをブラウザで表示すると、以下のようになります。

このように、subタグを使うことで、テキストの中に小さな注釈や脚注を簡単に追加することができます。

これにより、文書の可読性が向上し、情報を整理して伝えることができます。

subタグのスタイリング

デフォルトのスタイル

タグは、HTMLの標準仕様に従って、デフォルトで特定のスタイルが適用されます。

具体的には、タグで囲まれたテキストは、通常のテキストよりも小さく表示され、ベースラインよりも下に配置されます。

以下に、デフォルトのスタイルを示す簡単な例を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>subタグのデフォルトスタイル</title>
</head>
<body>
    <p>水の化学式はH<sub>2</sub>Oです。</p>
</body>
</html>

この例では、 H2O の 2 が通常のテキストよりも小さく、下に配置されて表示されます。

CSSを使ったカスタマイズ

タグのデフォルトスタイルを変更したい場合、CSSを使用してカスタマイズすることができます。

以下では、フォントサイズの調整、位置の調整、色の変更について説明します。

フォントサイズの調整

タグのフォントサイズを変更するには、CSSのfont-sizeプロパティを使用します。

以下に例を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>subタグのフォントサイズ調整</title>
    <style>
        sub {
            font-size: 0.8em; /* フォントサイズを80%に設定 */
        }
    </style>
</head>
<body>
    <p>水の化学式はH<sub>2</sub>Oです。</p>
</body>
</html>

この例では、タグのフォントサイズが通常のテキストの80%に設定されています。

位置の調整

タグの位置を調整するには、CSSのvertical-alignプロパティを使用します。

以下に例を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>subタグの位置調整</title>
    <style>
        sub {
            vertical-align: -1em; /* ベースラインより1em下に配置 */
        }
    </style>
</head>
<body>
    <p>水の化学式はH<sub>2</sub>Oです。</p>
</body>
</html>

この例では、タグのテキストがベースラインよりも1em下に配置されています。

色の変更

タグのテキストの色を変更するには、CSSのcolorプロパティを使用します。

以下に例を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>subタグの色の変更</title>
    <style>
        sub {
            color: red; /* テキストの色を赤に設定 */
        }
    </style>
</head>
<body>
    <p>水の化学式はH<sub>2</sub>Oです。</p>
</body>
</html>