SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 7:25動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:01エイチティーエムエル、リファレンス解説です。
  3. 0:04HTMLタグ編の十八本目は、エスユーピータグです。
  4. 0:08これは、指数などの上付き文字を示すためのタグです。
  5. 0:13たとえば面積を表す平方メートルでは、数字の二を小さく上に付けて書きますよね。
  6. 0:19あの小さな二に意味を持たせて表すのが、このタグの役割です。
  7. 0:24脚注の番号を付ける場面でも使われます。
  8. 0:27今回は、どんな場面で使うのか、基本の書き方、コード例、下付き文字との違い、
  9. 0:32使うときの注意点まで、初心者向けに順番に解説します。
  10. 0:37小さいけれど、意味の伝わり方が変わるタグとして聞いてください。
  11. 0:43まず、どんな場面で使うかを整理しましょう。
  12. 0:46代表例は三つです。
  13. 0:48一つ目は数学の指数で、二の三乗やエックスの二乗のように、もとの数字の右上に小さく付く数字です。
  14. 0:55二つ目は面積などの単位で、平方メートルや平方センチメートルを短く書くときに使います。
  15. 1:02三つ目は脚注番号で、本文のあとに小さな番号を付け、ページ下部の注釈へ案内します。
  16. 1:09大切なのは、ただ見た目を上にずらしたいだけなら使わないことです。
  17. 1:14上付きであることに意味がある部分にだけ使うのが原則です。
  18. 1:18迷ったら、その文字が指数や注釈かどうかを考えてみましょう。
  19. 1:23基本の書き方です。
  20. 1:25エスユーピーは開始タグと終了タグを明示し、上付きにしたい文字だけをその間に挟みます。
  21. 1:32コード例の一つ目は記事の例で、面積の単位はエムのあとに二を上付きにして、
  22. 1:36平方メートルを表しています。
  23. 1:41二つ目は二の三乗で、答えは八になります。
  24. 1:44ポイントは、文章全体を囲むのではなく、小さく上に付けたい一文字や数字だけを囲むことです。
  25. 1:52エスユーピーは文章の流れの中に置けるタグなので、段落の途中でも自然に使えます。
  26. 1:58まずは一文字だけを囲む小さな例から書いて、表示を確認してみましょう。
  27. 2:04記事の活用事例を、少し広げて見てみましょう。
  28. 2:08テーマは、指数や単位を正しく表すことです。
  29. 2:12部屋の広さは二十平方メートル、水の量は二立方メートル、十の二乗は百、という三つの文を並べました。
  30. 2:21どれも、右上に付く小さな数字が、単位や計算の意味を決めています。
  31. 2:26もしこの数字を普通の大きさで横に並べてしまうと、二十エム二のように読み間違えやすくなります。
  32. 2:35試すときは、練習用ファイルの本文にこの例を貼り付けて保存し、再読み込みして上付きで表示されるかを確認してください。
  33. 2:45開発者ツールのエレメンツで入れ子も確かめましょう。
  34. 2:49もう一つの代表的な使い方が、脚注番号です。
  35. 2:53書き方は、番号をエスユーピーで囲み、その内側にエータグを入れて、ページ下部の注釈へリンクさせます。
  36. 3:01コード例では、無料です、という文のあとに角括弧付きの一番を付け、クリックするとアイディーがノートワンの注釈へ移動するようにしています。
  37. 3:12記事でも触れられている通り、小さな文字はタップしづらくなりがちです。
  38. 3:18スマートフォンでも押しやすい大きさや余白を、シーエスエスで確保しましょう。
  39. 3:24番号と注釈の対応がずれていないかも、公開前に必ず確認してください。
  40. 3:30よく比べられるのが、エスユービータグです。
  41. 3:33こちらは下付き文字を示すタグで、役割がちょうど逆になります。
  42. 3:38たとえば水の化学式、エイチツーオーの二は、文字の下に小さく付きます。
  43. 3:44これがエスユービーです。
  44. 3:46一方、面積の二は上に付くのでエスユーピーです。
  45. 3:50見た目の位置だけで覚えるのではなく、化学式は下、指数は上、という意味の違いで使い分けましょう。
  46. 3:57次回の動画では、このエスユービーを詳しく取り上げます。
  47. 4:02今回のうちに、上下のペアとして名前をセットで覚えておくと整理しやすくなります。
  48. 4:08エスユーピーの属性についてです。
  49. 4:11記事の通り、この要素に必須となる専用の属性はありません。
  50. 4:15必要に応じて、グローバル属性と呼ばれる共通の属性を使います。
  51. 4:20アイディーは文書内で一意な識別子、クラスはシーエスエスやジャバスクリプトで複数の要素をまとめて選ぶ目印、
  52. 4:26ラングは内容の言語の指定です。
  53. 4:31データ属性にはアプリ独自の値を保持できますが、秘密情報を置く場所ではありません。
  54. 4:37コード例のようにクラスを付ければ、特定の上付き文字だけ色や大きさを調整することもできます。
  55. 4:44迷った属性は無理に付けず、必要になったときに足すくらいで十分です。
  56. 4:50シーエスエスとの関係も押さえておきましょう。
  57. 4:53エスユーピーを使うと、ブラウザーは標準のスタイルで、文字を少し上へずらし、
  58. 4:57少し小さく表示してくれます。
  59. 5:00そのため、基本はタグを書くだけで意図した見た目になります。
  60. 5:05行の高さが崩れる場合や、もう少し大きく読みやすくしたい場合には、シーエスエスで位置や文字サイズを調整します。
  61. 5:13反対に、意味のない文字をただ上にずらして見せたいだけなら、エスユーピーではなく、
  62. 5:18シーエスエスのバーティカルアラインなどで整える方が適切です。
  63. 5:23意味はタグ、見た目の微調整はシーエスエス、と分けて考えましょう。
  64. 5:28注意点と、よくある間違いを確認します。
  65. 5:31一つ目は行間の崩れです。
  66. 5:33上付き文字がある行だけ高さが広がって見えることがあるので、前後の行と比べて不自然でないか確認し、
  67. 5:38必要ならシーエスエスで行の高さを調整します。
  68. 5:44二つ目は読みにくさです。
  69. 5:46小さく表示される分、もとの文字サイズが小さい文章では読みづらくなります。
  70. 5:52三つ目は、順位や強調のつもりで何にでも付けてしまうことです。
  71. 5:57上付きに意味がない場所では使わないようにしましょう。
  72. 6:01最後に、三百二十ピクセル程度の狭い画面や文字拡大時にも、内容が欠けないかを確認してください。
  73. 6:08ブラウザー互換性を確認します。
  74. 6:11記事が参照するエムディーエヌの記録では、エスユーピー本体は、クロームが一以降、
  75. 6:16エッジが十二以降、ファイアフォックスが一以降、サファリが四以前の版から対応しています。
  76. 6:22ウェブのごく初期から使われてきた基本の要素なので、現在使われているブラウザーならまず問題なく表示できます。
  77. 6:30ただし、これは要素本体の対応開始の記録であり、細かな表示位置の違いまで保証するものではありません。
  78. 6:37実際の表示の上がり具合や文字の小ささは、ブラウザーやフォントによって少しずつ異なるため、
  79. 6:42身近なスマートフォンでも一度開いて確認しましょう。
  80. 6:47最後に練習とまとめです。
  81. 6:49エスユーピーは、指数や単位、脚注番号といった、意味のある上付き文字を示すタグでした。
  82. 6:55大切なポイントは三つです。
  83. 6:57一つ目は、上付きにしたい文字だけを囲むこと。
  84. 7:01二つ目は、脚注ではエータグと組み合わせて注釈へつなぐこと。
  85. 7:05三つ目は、下付きのエスユービーと意味で使い分けることです。
  86. 7:10練習として、平方メートルと二の三乗を含む文を二つ書き、それぞれ数字だけをエスユーピーで囲んで、
  87. 7:15表示と行間を確認してみてください。
  88. 7:20お疲れさまでした。
  89. 7:21次回は下付き文字のエスユービーを学びましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

supタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。指数などの上付き文字。脚注リンクにも利用できます。

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