WEBVTT

1
00:00:00.000 --> 00:00:01.019
こんにちは。

2
00:00:01.019 --> 00:00:04.757
エイチティーエムエル、リファレンス解説です。

3
00:00:04.757 --> 00:00:08.324
HTMLタグ編の二十本目は、サブタグです。

4
00:00:08.324 --> 00:00:12.571
これは、化学式などで使う下付き文字を示すタグです。

5
00:00:12.571 --> 00:00:20.045
たとえば水の化学式、エイチツーオーのツーは、普通の文字より少し下に、小さく表示されます。

6
00:00:20.045 --> 00:00:22.933
あの小さな数字が、下付き文字です。

7
00:00:22.933 --> 00:00:26.670
サブは、その位置に意味があるときに使います。

8
00:00:26.670 --> 00:00:32.446
今回は、どんな場面で使うのか、基本の書き方、スープタグとの違い、シーエスエスで代用してはいけない場面まで、

9
00:00:32.446 --> 00:00:38.222
初心者向けに順番に解説します。

10
00:00:38.222 --> 00:00:43.658
小さなタグですが、意味を正しく伝えるために大切な役割があります。

11
00:00:43.658 --> 00:00:50.283
日常ではあまり意識しませんが、教科書や理科のページではよく登場する表記です。

12
00:00:50.283 --> 00:00:54.700
その意味を正しく届けるために、サブの出番があります。

13
00:00:54.700 --> 00:00:57.985
まず、どんな場面で使うかを整理しましょう。

14
00:00:57.985 --> 00:00:59.862
代表的なのは化学式です。

15
00:00:59.862 --> 00:01:04.243
水はエイチツーオー、二酸化炭素はシーオーツーと書きます。

16
00:01:04.243 --> 00:01:11.439
このツーは、原子が二つあるという意味を持つ数字なので、ただ小さく見せたいだけではありません。

17
00:01:11.439 --> 00:01:15.975
意味として下付きである必要がある、というのがポイントです。

18
00:01:15.975 --> 00:01:24.579
逆に、文章の中で文字を少し下げて見せたいだけなら、それは見た目の調整なのでサブではなくシーエスエスを使います。

19
00:01:24.579 --> 00:01:30.054
タグ名ではなく、内容の意味から判断する、という考え方を覚えてください。

20
00:01:30.054 --> 00:01:34.904
この区別ができると、ほかのタグを選ぶときも迷いにくくなります。

21
00:01:34.904 --> 00:01:36.326
基本の書き方です。

22
00:01:36.326 --> 00:01:41.697
サブは開始タグと終了タグを明示し、下付きにしたい文字だけを囲みます。

23
00:01:41.697 --> 00:01:46.437
コード例では、段落の中の数字のツーだけをサブで囲んでいます。

24
00:01:46.437 --> 00:01:51.651
エイチとオーは普通の文字、ツーだけが下付きになる、という構造です。

25
00:01:51.651 --> 00:01:57.812
文章全体を囲むのではなく、必要な一文字、あるいは数文字だけを囲むのが基本です。

26
00:01:57.812 --> 00:02:03.973
まずはこの一行を写して、ブラウザーでツーが下がって見えるか確認してみましょう。

27
00:02:03.973 --> 00:02:08.239
書き終えたら、開発者ツールのエレメンツで、サブが段落の中に正しく入っているか、

28
00:02:08.239 --> 00:02:12.505
構造も一緒に確認してください。

29
00:02:12.505 --> 00:02:21.036
囲む場所がずれると、思わぬ文字まで小さくなってしまうので、開始タグと終了タグの位置を丁寧に確かめましょう。

30
00:02:21.036 --> 00:02:24.847
記事の活用事例を、少し広げて見てみましょう。

31
00:02:24.847 --> 00:02:32.990
一つ目は水のエイチツーオー、二つ目は二酸化炭素のシーオーツー、三つ目は酸素分子のオーツーです。

32
00:02:32.990 --> 00:02:39.400
どの例も、下付きにしたい数字だけをサブで囲む、という同じ形の繰り返しです。

33
00:02:39.400 --> 00:02:44.771
試すときは、練習用ファイルの本文にこの例を貼り付けて保存し、再読み込みして、

34
00:02:44.771 --> 00:02:50.141
数字が下がって小さく見えるかを確認してください。

35
00:02:50.141 --> 00:02:56.378
化学式以外でも、意味として下付きになる表記があれば同じ書き方が使えます。

36
00:02:56.378 --> 00:03:02.615
逆に、ただの飾りで数字を下げたい場合は、この形を使わないことも大切です。

37
00:03:02.615 --> 00:03:11.104
三つの例を見比べると、数字の位置だけが変わっていて、ほかの文字はそのままであることも分かります。

38
00:03:11.104 --> 00:03:14.778
ここで、前回学んだスープタグとの違いを整理しましょう。

39
00:03:14.778 --> 00:03:18.453
スープは上付き文字で、十の二乗のような指数に使います。

40
00:03:18.453 --> 00:03:21.447
サブは下付き文字で、化学式の数字に使います。

41
00:03:21.447 --> 00:03:26.074
コード例のように、上がスープ、下がサブ、と覚えると分かりやすいです。

42
00:03:26.074 --> 00:03:29.476
見た目が逆なだけでなく、表している意味も違います。

43
00:03:29.476 --> 00:03:33.559
指数なのか、原子の数なのか、内容に合った方を選んでください。

44
00:03:33.559 --> 00:03:36.280
どちらも、意味のある位置を示すタグです。

45
00:03:36.280 --> 00:03:41.996
位置を変えたいだけのときに、見た目が似ているからといって流用しないようにしましょう。

46
00:03:41.996 --> 00:03:43.429
大切な注意点です。

47
00:03:43.429 --> 00:03:48.999
文字を少し下げて見せたい、というだけの理由でサブを使ってはいけません。

48
00:03:48.999 --> 00:03:55.048
記事も、見た目だけの位置調整にはシーエスエスを使いましょう、と伝えています。

49
00:03:55.048 --> 00:04:00.459
たとえば、ロゴの文字を少し下げたい、脚注っぽく見せたい、といった場合は、

50
00:04:00.459 --> 00:04:05.871
シーエスエスのバーティカルアラインやフォントサイズで調整します。

51
00:04:05.871 --> 00:04:10.487
サブは、あくまで意味として下付きであることを示すタグです。

52
00:04:10.487 --> 00:04:16.535
この分け方を守ると、読み上げソフトや検索エンジンにも意味が正しく伝わります。

53
00:04:16.535 --> 00:04:22.424
見た目と意味を分けて考える習慣は、エイチティーエムエル全体で役に立ちます。

54
00:04:22.424 --> 00:04:28.632
迷ったときは、その下付きに意味があるかどうかを自分に問いかけてみてください。

55
00:04:28.632 --> 00:04:31.656
それが一番確実な判断の目安になります。

56
00:04:31.656 --> 00:04:33.489
サブの属性についてです。

57
00:04:33.489 --> 00:04:37.766
記事の通り、この要素に必須となる専用の属性はありません。

58
00:04:37.766 --> 00:04:42.349
必要に応じて、グローバル属性と呼ばれる共通の属性を使います。

59
00:04:42.349 --> 00:04:47.466
アイディーは文書内で一意な識別子、クラスはシーエスエスやジャバスクリプトで複数の要素をまとめて選ぶ目印、

60
00:04:47.466 --> 00:04:52.583
ラングは内容の言語の指定です。

61
00:04:52.583 --> 00:04:58.693
データ属性にはアプリ独自の値を保持できますが、秘密情報を置く場所ではありません。

62
00:04:58.693 --> 00:05:02.206
普段は属性を付けず、数字を囲むだけで十分です。

63
00:05:02.206 --> 00:05:09.844
コード例のように、どうしても見た目をそろえたいときにクラスを付ける、といった使い方にとどめましょう。

64
00:05:09.844 --> 00:05:12.880
シーエスエスとの関係も確認しましょう。

65
00:05:12.880 --> 00:05:20.710
サブで囲んだ文字は、ブラウザーの標準スタイルで、少し小さくなり、ベースラインより下に表示されます。

66
00:05:20.710 --> 00:05:26.622
自分で何もしなくても下付きらしく見えるのは、この標準スタイルのおかげです。

67
00:05:26.622 --> 00:05:33.653
文字をもう少し大きくしたい、下がり幅を変えたい、といった微調整はシーエスエスで行えます。

68
00:05:33.653 --> 00:05:40.844
ただし、シーエスエスで普通の文字を下付きらしく見せても、意味としては下付きにはなりません。

69
00:05:40.844 --> 00:05:46.916
意味はサブタグが担い、見た目の微調整はシーエスエス、と分けて考えてください。

70
00:05:46.916 --> 00:05:49.952
両方を正しく組み合わせるのが基本です。

71
00:05:49.952 --> 00:05:52.975
注意点と、よくある間違いを確認します。

72
00:05:52.975 --> 00:05:55.044
一つ目は、複雑な数式です。

73
00:05:55.044 --> 00:06:00.613
化学式が長くなると、読み上げソフトが意図通りに読まない場合があります。

74
00:06:00.613 --> 00:06:05.228
意味の対応を別途確認し、必要なら補足の説明を添えましょう。

75
00:06:05.228 --> 00:06:06.978
二つ目は、囲み方です。

76
00:06:06.978 --> 00:06:13.184
下付きにしたい数字だけを囲み、化学式全体や文章全体をサブで囲まないでください。

77
00:06:13.184 --> 00:06:23.527
三つ目は表示確認で、三百二十ピクセル程度の狭い画面や文字拡大時にも、下付き文字が欠けたり読みにくくなったりしないか確かめましょう。

78
00:06:23.527 --> 00:06:30.051
行間が詰まって見える場合は、シーエスエスで行の高さを調整すると読みやすくなります。

79
00:06:30.051 --> 00:06:34.267
特に化学式をたくさん並べるページでは、読み手が数字を見落とさないよう、

80
00:06:34.267 --> 00:06:38.484
文字の大きさにも気を配りましょう。

81
00:06:38.484 --> 00:06:40.683
ブラウザー互換性を確認します。

82
00:06:40.683 --> 00:06:46.253
記事が参照するエムディーエヌの記録では、サブ本体は、クロームが一以降、エッジが十二以降、

83
00:06:46.253 --> 00:06:51.823
ファイアフォックスが一以降、サファリが四以前から対応しています。

84
00:06:51.823 --> 00:07:00.032
数字がとても小さいことからも分かる通り、古くから使える基本的な要素で、現在の主要ブラウザーでは安心して使えます。

85
00:07:00.032 --> 00:07:06.336
これは要素本体の対応開始の記録であり、細かな表示の違いまで保証するものではありません。

86
00:07:06.336 --> 00:07:15.424
下がり幅や文字の大きさはブラウザーごとに少し違う場合があるので、大切なページではスマートフォンでも一度表示を確認しましょう。

87
00:07:15.424 --> 00:07:17.337
最後に練習とまとめです。

88
00:07:17.337 --> 00:07:21.162
サブは、化学式などの下付き文字を示すタグでした。

89
00:07:21.162 --> 00:07:23.234
大切なポイントは三つです。

90
00:07:23.234 --> 00:07:27.378
一つ目は、意味として下付きであるときにだけ使うこと。

91
00:07:27.378 --> 00:07:32.000
二つ目は、下げたい文字だけを囲み、文章全体は囲まないこと。

92
00:07:32.000 --> 00:07:36.941
三つ目は、見た目だけの位置調整にはシーエスエスを使うことです。

93
00:07:36.941 --> 00:07:41.564
練習として、水と二酸化炭素の化学式を段落の中に書き、数字だけをサブで囲んで、

94
00:07:41.564 --> 00:07:46.186
ブラウザーで表示を確認してみてください。

95
00:07:46.186 --> 00:07:47.620
お疲れさまでした。

96
00:07:47.620 --> 00:07:53.996
次回は、エイチティーエムエルの中にシーエスエスを書くスタイルタグを学びましょう。