WEBVTT

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

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

3
00:00:04.678 --> 00:00:08.856
HTMLタグ編の十八本目は、エスユーピータグです。

4
00:00:08.856 --> 00:00:13.033
これは、指数などの上付き文字を示すためのタグです。

5
00:00:13.033 --> 00:00:19.382
たとえば面積を表す平方メートルでは、数字の二を小さく上に付けて書きますよね。

6
00:00:19.382 --> 00:00:24.227
あの小さな二に意味を持たせて表すのが、このタグの役割です。

7
00:00:24.227 --> 00:00:27.402
脚注の番号を付ける場面でも使われます。

8
00:00:27.402 --> 00:00:32.665
今回は、どんな場面で使うのか、基本の書き方、コード例、下付き文字との違い、

9
00:00:32.665 --> 00:00:37.928
使うときの注意点まで、初心者向けに順番に解説します。

10
00:00:37.928 --> 00:00:43.108
小さいけれど、意味の伝わり方が変わるタグとして聞いてください。

11
00:00:43.108 --> 00:00:46.537
まず、どんな場面で使うかを整理しましょう。

12
00:00:46.537 --> 00:00:48.006
代表例は三つです。

13
00:00:48.006 --> 00:00:55.680
一つ目は数学の指数で、二の三乗やエックスの二乗のように、もとの数字の右上に小さく付く数字です。

14
00:00:55.680 --> 00:01:02.538
二つ目は面積などの単位で、平方メートルや平方センチメートルを短く書くときに使います。

15
00:01:02.538 --> 00:01:09.069
三つ目は脚注番号で、本文のあとに小さな番号を付け、ページ下部の注釈へ案内します。

16
00:01:09.069 --> 00:01:14.293
大切なのは、ただ見た目を上にずらしたいだけなら使わないことです。

17
00:01:14.293 --> 00:01:18.865
上付きであることに意味がある部分にだけ使うのが原則です。

18
00:01:18.865 --> 00:01:23.600
迷ったら、その文字が指数や注釈かどうかを考えてみましょう。

19
00:01:23.600 --> 00:01:25.151
基本の書き方です。

20
00:01:25.151 --> 00:01:32.390
エスユーピーは開始タグと終了タグを明示し、上付きにしたい文字だけをその間に挟みます。

21
00:01:32.390 --> 00:01:36.699
コード例の一つ目は記事の例で、面積の単位はエムのあとに二を上付きにして、

22
00:01:36.699 --> 00:01:41.008
平方メートルを表しています。

23
00:01:41.008 --> 00:01:44.455
二つ目は二の三乗で、答えは八になります。

24
00:01:44.455 --> 00:01:52.038
ポイントは、文章全体を囲むのではなく、小さく上に付けたい一文字や数字だけを囲むことです。

25
00:01:52.038 --> 00:01:58.760
エスユーピーは文章の流れの中に置けるタグなので、段落の途中でも自然に使えます。

26
00:01:58.760 --> 00:02:04.620
まずは一文字だけを囲む小さな例から書いて、表示を確認してみましょう。

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

28
00:02:08.594 --> 00:02:12.387
テーマは、指数や単位を正しく表すことです。

29
00:02:12.387 --> 00:02:21.058
部屋の広さは二十平方メートル、水の量は二立方メートル、十の二乗は百、という三つの文を並べました。

30
00:02:21.058 --> 00:02:26.838
どれも、右上に付く小さな数字が、単位や計算の意味を決めています。

31
00:02:26.838 --> 00:02:35.148
もしこの数字を普通の大きさで横に並べてしまうと、二十エム二のように読み間違えやすくなります。

32
00:02:35.148 --> 00:02:45.444
試すときは、練習用ファイルの本文にこの例を貼り付けて保存し、再読み込みして上付きで表示されるかを確認してください。

33
00:02:45.444 --> 00:02:49.960
開発者ツールのエレメンツで入れ子も確かめましょう。

34
00:02:49.960 --> 00:02:53.476
もう一つの代表的な使い方が、脚注番号です。

35
00:02:53.476 --> 00:03:01.679
書き方は、番号をエスユーピーで囲み、その内側にエータグを入れて、ページ下部の注釈へリンクさせます。

36
00:03:01.679 --> 00:03:12.896
コード例では、無料です、という文のあとに角括弧付きの一番を付け、クリックするとアイディーがノートワンの注釈へ移動するようにしています。

37
00:03:12.896 --> 00:03:18.589
記事でも触れられている通り、小さな文字はタップしづらくなりがちです。

38
00:03:18.589 --> 00:03:24.783
スマートフォンでも押しやすい大きさや余白を、シーエスエスで確保しましょう。

39
00:03:24.783 --> 00:03:30.308
番号と注釈の対応がずれていないかも、公開前に必ず確認してください。

40
00:03:30.308 --> 00:03:33.789
よく比べられるのが、エスユービータグです。

41
00:03:33.789 --> 00:03:38.761
こちらは下付き文字を示すタグで、役割がちょうど逆になります。

42
00:03:38.761 --> 00:03:44.397
たとえば水の化学式、エイチツーオーの二は、文字の下に小さく付きます。

43
00:03:44.397 --> 00:03:46.386
これがエスユービーです。

44
00:03:46.386 --> 00:03:50.198
一方、面積の二は上に付くのでエスユーピーです。

45
00:03:50.198 --> 00:03:57.988
見た目の位置だけで覚えるのではなく、化学式は下、指数は上、という意味の違いで使い分けましょう。

46
00:03:57.988 --> 00:04:02.464
次回の動画では、このエスユービーを詳しく取り上げます。

47
00:04:02.464 --> 00:04:08.928
今回のうちに、上下のペアとして名前をセットで覚えておくと整理しやすくなります。

48
00:04:08.928 --> 00:04:11.474
エスユーピーの属性についてです。

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

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

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

52
00:04:26.033 --> 00:04:31.364
ラングは内容の言語の指定です。

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

54
00:04:37.729 --> 00:04:44.889
コード例のようにクラスを付ければ、特定の上付き文字だけ色や大きさを調整することもできます。

55
00:04:44.889 --> 00:04:50.140
迷った属性は無理に付けず、必要になったときに足すくらいで十分です。

56
00:04:50.140 --> 00:04:53.378
シーエスエスとの関係も押さえておきましょう。

57
00:04:53.378 --> 00:04:57.131
エスユーピーを使うと、ブラウザーは標準のスタイルで、文字を少し上へずらし、

58
00:04:57.131 --> 00:05:00.884
少し小さく表示してくれます。

59
00:05:00.884 --> 00:05:05.152
そのため、基本はタグを書くだけで意図した見た目になります。

60
00:05:05.152 --> 00:05:13.100
行の高さが崩れる場合や、もう少し大きく読みやすくしたい場合には、シーエスエスで位置や文字サイズを調整します。

61
00:05:13.100 --> 00:05:18.251
反対に、意味のない文字をただ上にずらして見せたいだけなら、エスユーピーではなく、

62
00:05:18.251 --> 00:05:23.402
シーエスエスのバーティカルアラインなどで整える方が適切です。

63
00:05:23.402 --> 00:05:28.112
意味はタグ、見た目の微調整はシーエスエス、と分けて考えましょう。

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

65
00:05:31.197 --> 00:05:33.146
一つ目は行間の崩れです。

66
00:05:33.146 --> 00:05:38.829
上付き文字がある行だけ高さが広がって見えることがあるので、前後の行と比べて不自然でないか確認し、

67
00:05:38.829 --> 00:05:44.512
必要ならシーエスエスで行の高さを調整します。

68
00:05:44.512 --> 00:05:46.460
二つ目は読みにくさです。

69
00:05:46.460 --> 00:05:52.306
小さく表示される分、もとの文字サイズが小さい文章では読みづらくなります。

70
00:05:52.306 --> 00:05:57.177
三つ目は、順位や強調のつもりで何にでも付けてしまうことです。

71
00:05:57.177 --> 00:06:01.399
上付きに意味がない場所では使わないようにしましょう。

72
00:06:01.399 --> 00:06:08.868
最後に、三百二十ピクセル程度の狭い画面や文字拡大時にも、内容が欠けないかを確認してください。

73
00:06:08.868 --> 00:06:11.023
ブラウザー互換性を確認します。

74
00:06:11.023 --> 00:06:16.913
記事が参照するエムディーエヌの記録では、エスユーピー本体は、クロームが一以降、

75
00:06:16.913 --> 00:06:22.803
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前の版から対応しています。

76
00:06:22.803 --> 00:06:30.417
ウェブのごく初期から使われてきた基本の要素なので、現在使われているブラウザーならまず問題なく表示できます。

77
00:06:30.417 --> 00:06:37.456
ただし、これは要素本体の対応開始の記録であり、細かな表示位置の違いまで保証するものではありません。

78
00:06:37.456 --> 00:06:42.412
実際の表示の上がり具合や文字の小ささは、ブラウザーやフォントによって少しずつ異なるため、

79
00:06:42.412 --> 00:06:47.368
身近なスマートフォンでも一度開いて確認しましょう。

80
00:06:47.368 --> 00:06:49.237
最後に練習とまとめです。

81
00:06:49.237 --> 00:06:55.780
エスユーピーは、指数や単位、脚注番号といった、意味のある上付き文字を示すタグでした。

82
00:06:55.780 --> 00:06:57.805
大切なポイントは三つです。

83
00:06:57.805 --> 00:07:01.231
一つ目は、上付きにしたい文字だけを囲むこと。

84
00:07:01.231 --> 00:07:05.749
二つ目は、脚注ではエータグと組み合わせて注釈へつなぐこと。

85
00:07:05.749 --> 00:07:10.266
三つ目は、下付きのエスユービーと意味で使い分けることです。

86
00:07:10.266 --> 00:07:15.251
練習として、平方メートルと二の三乗を含む文を二つ書き、それぞれ数字だけをエスユーピーで囲んで、

87
00:07:15.251 --> 00:07:20.235
表示と行間を確認してみてください。

88
00:07:20.235 --> 00:07:21.637
お疲れさまでした。

89
00:07:21.637 --> 00:07:25.220
次回は下付き文字のエスユービーを学びましょう。