VIDEO LESSON

HTMLのsubタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:54動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の二十本目は、サブタグです。
0:08これは、化学式などで使う下付き文字を示すタグです。
0:12たとえば水の化学式、エイチツーオーのツーは、普通の文字より少し下に、小さく表示されます。
0:20あの小さな数字が、下付き文字です。
0:22サブは、その位置に意味があるときに使います。
0:26今回は、どんな場面で使うのか、基本の書き方、スープタグとの違い、シーエスエスで代用してはいけない場面まで、
0:32初心者向けに順番に解説します。
0:38小さなタグですが、意味を正しく伝えるために大切な役割があります。
0:43日常ではあまり意識しませんが、教科書や理科のページではよく登場する表記です。
0:50その意味を正しく届けるために、サブの出番があります。
0:54まず、どんな場面で使うかを整理しましょう。
0:57代表的なのは化学式です。
0:59水はエイチツーオー、二酸化炭素はシーオーツーと書きます。
1:04このツーは、原子が二つあるという意味を持つ数字なので、ただ小さく見せたいだけではありません。
1:11意味として下付きである必要がある、というのがポイントです。
1:15逆に、文章の中で文字を少し下げて見せたいだけなら、それは見た目の調整なのでサブではなくシーエスエスを使います。
1:24タグ名ではなく、内容の意味から判断する、という考え方を覚えてください。
1:30この区別ができると、ほかのタグを選ぶときも迷いにくくなります。
1:34基本の書き方です。
1:36サブは開始タグと終了タグを明示し、下付きにしたい文字だけを囲みます。
1:41コード例では、段落の中の数字のツーだけをサブで囲んでいます。
1:46エイチとオーは普通の文字、ツーだけが下付きになる、という構造です。
1:51文章全体を囲むのではなく、必要な一文字、あるいは数文字だけを囲むのが基本です。
1:57まずはこの一行を写して、ブラウザーでツーが下がって見えるか確認してみましょう。
2:03書き終えたら、開発者ツールのエレメンツで、サブが段落の中に正しく入っているか、
2:08構造も一緒に確認してください。
2:12囲む場所がずれると、思わぬ文字まで小さくなってしまうので、開始タグと終了タグの位置を丁寧に確かめましょう。
2:21記事の活用事例を、少し広げて見てみましょう。
2:24一つ目は水のエイチツーオー、二つ目は二酸化炭素のシーオーツー、三つ目は酸素分子のオーツーです。
2:32どの例も、下付きにしたい数字だけをサブで囲む、という同じ形の繰り返しです。
2:39試すときは、練習用ファイルの本文にこの例を貼り付けて保存し、再読み込みして、
2:44数字が下がって小さく見えるかを確認してください。
2:50化学式以外でも、意味として下付きになる表記があれば同じ書き方が使えます。
2:56逆に、ただの飾りで数字を下げたい場合は、この形を使わないことも大切です。
3:02三つの例を見比べると、数字の位置だけが変わっていて、ほかの文字はそのままであることも分かります。
3:11ここで、前回学んだスープタグとの違いを整理しましょう。
3:14スープは上付き文字で、十の二乗のような指数に使います。
3:18サブは下付き文字で、化学式の数字に使います。
3:21コード例のように、上がスープ、下がサブ、と覚えると分かりやすいです。
3:26見た目が逆なだけでなく、表している意味も違います。
3:29指数なのか、原子の数なのか、内容に合った方を選んでください。
3:33どちらも、意味のある位置を示すタグです。
3:36位置を変えたいだけのときに、見た目が似ているからといって流用しないようにしましょう。
3:41大切な注意点です。
3:43文字を少し下げて見せたい、というだけの理由でサブを使ってはいけません。
3:48記事も、見た目だけの位置調整にはシーエスエスを使いましょう、と伝えています。
3:55たとえば、ロゴの文字を少し下げたい、脚注っぽく見せたい、といった場合は、
4:00シーエスエスのバーティカルアラインやフォントサイズで調整します。
4:05サブは、あくまで意味として下付きであることを示すタグです。
4:10この分け方を守ると、読み上げソフトや検索エンジンにも意味が正しく伝わります。
4:16見た目と意味を分けて考える習慣は、エイチティーエムエル全体で役に立ちます。
4:22迷ったときは、その下付きに意味があるかどうかを自分に問いかけてみてください。
4:28それが一番確実な判断の目安になります。
4:31サブの属性についてです。
4:33記事の通り、この要素に必須となる専用の属性はありません。
4:37必要に応じて、グローバル属性と呼ばれる共通の属性を使います。
4:42アイディーは文書内で一意な識別子、クラスはシーエスエスやジャバスクリプトで複数の要素をまとめて選ぶ目印、
4:47ラングは内容の言語の指定です。
4:52データ属性にはアプリ独自の値を保持できますが、秘密情報を置く場所ではありません。
4:58普段は属性を付けず、数字を囲むだけで十分です。
5:02コード例のように、どうしても見た目をそろえたいときにクラスを付ける、といった使い方にとどめましょう。
5:09シーエスエスとの関係も確認しましょう。
5:12サブで囲んだ文字は、ブラウザーの標準スタイルで、少し小さくなり、ベースラインより下に表示されます。
5:20自分で何もしなくても下付きらしく見えるのは、この標準スタイルのおかげです。
5:26文字をもう少し大きくしたい、下がり幅を変えたい、といった微調整はシーエスエスで行えます。
5:33ただし、シーエスエスで普通の文字を下付きらしく見せても、意味としては下付きにはなりません。
5:40意味はサブタグが担い、見た目の微調整はシーエスエス、と分けて考えてください。
5:46両方を正しく組み合わせるのが基本です。
5:49注意点と、よくある間違いを確認します。
5:52一つ目は、複雑な数式です。
5:55化学式が長くなると、読み上げソフトが意図通りに読まない場合があります。
6:00意味の対応を別途確認し、必要なら補足の説明を添えましょう。
6:05二つ目は、囲み方です。
6:06下付きにしたい数字だけを囲み、化学式全体や文章全体をサブで囲まないでください。
6:13三つ目は表示確認で、三百二十ピクセル程度の狭い画面や文字拡大時にも、下付き文字が欠けたり読みにくくなったりしないか確かめましょう。
6:23行間が詰まって見える場合は、シーエスエスで行の高さを調整すると読みやすくなります。
6:30特に化学式をたくさん並べるページでは、読み手が数字を見落とさないよう、
6:34文字の大きさにも気を配りましょう。
6:38ブラウザー互換性を確認します。
6:40記事が参照するエムディーエヌの記録では、サブ本体は、クロームが一以降、エッジが十二以降、
6:46ファイアフォックスが一以降、サファリが四以前から対応しています。
6:51数字がとても小さいことからも分かる通り、古くから使える基本的な要素で、現在の主要ブラウザーでは安心して使えます。
7:00これは要素本体の対応開始の記録であり、細かな表示の違いまで保証するものではありません。
7:06下がり幅や文字の大きさはブラウザーごとに少し違う場合があるので、大切なページではスマートフォンでも一度表示を確認しましょう。
7:15最後に練習とまとめです。
7:17サブは、化学式などの下付き文字を示すタグでした。
7:21大切なポイントは三つです。
7:23一つ目は、意味として下付きであるときにだけ使うこと。
7:27二つ目は、下げたい文字だけを囲み、文章全体は囲まないこと。
7:32三つ目は、見た目だけの位置調整にはシーエスエスを使うことです。
7:36練習として、水と二酸化炭素の化学式を段落の中に書き、数字だけをサブで囲んで、
7:41ブラウザーで表示を確認してみてください。
7:46お疲れさまでした。
7:47次回は、エイチティーエムエルの中にシーエスエスを書くスタイルタグを学びましょう。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

subタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。化学式などの下付き文字。単なる位置調整にはCSSを使います。

解説記事・サンプルコードを読む：HTMLのsubタグとは？属性・使い方・ブラウザー互換性と活用例 →