SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04HTMLタグ編の五本目は、ユーと書く、ユータグです。
  4. 0:08これは、綴りの間違いの指摘など、文字に注釈があることを示すタグです。
  5. 0:13多くのブラウザーでは下線付きで表示されますが、その見た目だけが目的ではありません。
  6. 0:20大切なのは、その部分に何らかの注釈がある、という意味を伝えることです。
  7. 0:25今回は、基本の書き方から、リンクとの見分け方、単なる下線との使い分け、関連するタグとの違いまで、
  8. 0:30初心者向けに順番に解説します。
  9. 0:35似たタグと迷いやすいポイントを、ここで整理しましょう。
  10. 0:40ユータグが活躍するのは、文章の中の一部分に注釈があると示したい場面です。
  11. 0:45代表的な例が、誤字や綴りの間違いをあえて引用して指摘する場合です。
  12. 0:50間違っている部分をユータグで囲むことで、ここが指摘の対象です、と読み手に伝えます。
  13. 0:57ほかにも、中国語の固有名詞の表記など、言語上の注釈を示す使い方が仕様では挙げられています。
  14. 1:03ただし、下線だけでは理由は伝わりません。
  15. 1:07なぜ注釈を付けたのかは、前後の文章でも補うことが大切です。
  16. 1:11意味がはっきりしない場所に、なんとなく使うタグではないと覚えてください。
  17. 1:17基本の書き方です。
  18. 1:18ユータグは、開始タグと終了タグを向かい合わせに書き、注釈の対象になる文字だけを囲みます。
  19. 1:24段落全体を囲むのではなく、文章の中の必要な部分だけに使うのが基本です。
  20. 1:30そのため、ピー要素で書いた段落の中に置くことが多くなります。
  21. 1:34ほかの文章を飾るタグと同じく、タグの対応関係を間違えないように注意してください。
  22. 1:40ここでも原則は同じで、ユータグは見た目を変えるための道具ではなく、意味を示すためのタグです。
  23. 1:47書き方自体はシンプルなので、まずは使う場面を正しく選ぶことに集中しましょう。
  24. 1:53記事の活用事例を見てみましょう。
  25. 1:55この例では、誤記の例、という段落の中で、スタイルシートト、という文字がユータグで囲まれています。
  26. 2:03最後のトが余分で、綴りが間違っていることを示すための書き方です。
  27. 2:08正しくはスタイルシートであり、あえて間違った形を引用して、指摘の対象をはっきりさせています。
  28. 2:15試すときは、エイチティーエムエルファイルを保存して再読み込みし、開発者ツールのエレメンツで、
  29. 2:20対象の文字だけがユーの中に入っているかを確認してみてください。
  30. 2:26段落全体を囲んでいないかも、あわせてチェックしましょう。
  31. 2:31ユータグで最も注意したいのが、リンクとの誤認です。
  32. 2:34ウェブでは長く、下線が付いた文字はリンクである、という慣習があります。
  33. 2:39そのため、ユータグで下線が付いた文字を見ると、読み手がクリックできるものだと勘違いしてしまうことがあります。
  34. 2:46記事でも、この点が注意として挙げられています。
  35. 2:50対策としては、ユータグを使う場面を誤記の指摘などの本来の意味に絞ること、
  36. 2:54そしてリンクにしたい場合は必ずエータグを使うことです。
  37. 2:58逆に、リンクではない文字を、リンクのように見せない配慮も、読みやすいページ作りには欠かせません。
  38. 3:05シーエスエスとの使い分けを整理します。
  39. 3:08もし目的が、ただ文字に下線を引きたい、という見た目だけの話なら、ユータグではなくシーエスエスを使います。
  40. 3:16シーエスエスのテキストデコレーションで下線を指定すれば、意味を持たせたくない装飾として扱えます。
  41. 3:23一方、誤記の指摘のように、そこに注釈があるという意味を伝えたい場合にだけ、
  42. 3:26ユータグを選びます。
  43. 3:30この判断の軸は、いつも同じです。
  44. 3:32意味があるかどうかでタグを選び、見た目だけの変更はシーエスエスに任せる。
  45. 3:38ユータグは使用頻度が高いタグではありませんが、この使い分けを理解することが大切です。
  46. 3:44関連するタグとの違いも確認しておきます。
  47. 3:47エータグは別のページへのリンクを作るタグで、役割はまったく異なります。
  48. 3:53エービービーアールタグは略語を示し、ストロングタグは重要性、イーエムタグは強調を表します。
  49. 4:00アイタグやビータグも、見た目が変わる点では似ていますが、それぞれ異なる意味を持っています。
  50. 4:07ユータグの担当は、あくまで注釈があることの表示です。
  51. 4:11見た目が似ているからといって代わりに使うのではなく、伝えたい意味に合うタグを選んでください。
  52. 4:18迷ったときは、その部分が何を表しているのかを言葉で説明してみると判断しやすくなります。
  53. 4:25属性について確認します。
  54. 4:27ユータグには、このタグ専用の必須属性はありません。
  55. 4:31必要に応じて、すべての要素で使えるグローバル属性を利用します。
  56. 4:36代表的なものとして、文書の中で一意な名前を付けるアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
  57. 4:42内容の言語を示すラングがあります。
  58. 4:47ほかにも、アプリ独自の値を保持するデータ属性が使えますが、秘密情報を置く場所ではない点には注意してください。
  59. 4:56子要素に付ける属性と混同しないようにし、見た目の指定はシーエスエスで行う、
  60. 5:00という分担を守りましょう。
  61. 5:04見た目とシーエスエスについても触れておきます。
  62. 5:07多くのブラウザーでは、ユータグは通常の下線で表示されます。
  63. 5:11しかし、通常の下線はリンクと見分けが付きにくいため、シーエスエスで波線に変えたり、
  64. 5:16色を変えたりして、誤記の指摘らしい見た目にする工夫もできます。
  65. 5:21原稿の校正で使われるような波線にすれば、読み手もリンクではないと理解しやすくなります。
  66. 5:28ここでも大切なのは、装飾を変えても意味は変わらないことです。
  67. 5:32見た目を工夫するときは、読み手が誤解しないかどうかを基準に選んでください。
  68. 5:37ブラウザー互換性を確認します。
  69. 5:39記事が参照するエムディーエヌの記録では、ユータグはクロームが一以降、エッジが十二以降、
  70. 5:45ファイアフォックスが一以降、サファリが一以降に対応しています。
  71. 5:50つまり、現在の主要なブラウザーでは、長く安定して使える基本的なタグの一つです。
  72. 5:56ただし、この表が示すのは要素本体の対応であり、属性や別の仕組みまで含めた完全な動作を保証するものではありません。
  73. 6:04スマートフォンのブラウザーでは条件が異なる場合もあるため、対象とする実機で表示を確認すると、
  74. 6:08より安心です。
  75. 6:12対応状況よりも、使う場面が合っているかが重要です。
  76. 6:16最後に練習とまとめです。
  77. 6:18ユータグは、綴りの指摘など、文字に注釈があることを示すタグでした。
  78. 6:24大切なポイントは三つです。
  79. 6:26一つ目は、対象の文字だけを囲み、注釈の理由も文章で補うこと。
  80. 6:31二つ目は、下線だけが目的ならシーエスエスを使い、リンクと誤認させないこと。
  81. 6:38三つ目は、専用の必須属性はなく、グローバル属性を使うことです。
  82. 6:43練習として、誤記の例を引用する短い段落を書き、間違っている部分だけをユーで囲んで、
  83. 6:48表示と構造を確かめてみてください。
  84. 6:53実装後は、幅三百二十ピクセル程度の狭い画面でも内容が欠けないかも確認しましょう。
  85. 7:00お疲れさまでした。
  86. 7:02次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

uタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。綴りの指摘など、文字に注釈があることを示します。リンクに見える装飾には注意します。

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