WEBVTT

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

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

3
00:00:04.437 --> 00:00:08.558
HTMLタグ編の五本目は、ユーと書く、ユータグです。

4
00:00:08.558 --> 00:00:13.946
これは、綴りの間違いの指摘など、文字に注釈があることを示すタグです。

5
00:00:13.946 --> 00:00:20.443
多くのブラウザーでは下線付きで表示されますが、その見た目だけが目的ではありません。

6
00:00:20.443 --> 00:00:25.989
大切なのは、その部分に何らかの注釈がある、という意味を伝えることです。

7
00:00:25.989 --> 00:00:30.981
今回は、基本の書き方から、リンクとの見分け方、単なる下線との使い分け、関連するタグとの違いまで、

8
00:00:30.981 --> 00:00:35.973
初心者向けに順番に解説します。

9
00:00:35.973 --> 00:00:40.252
似たタグと迷いやすいポイントを、ここで整理しましょう。

10
00:00:40.252 --> 00:00:45.764
ユータグが活躍するのは、文章の中の一部分に注釈があると示したい場面です。

11
00:00:45.764 --> 00:00:50.817
代表的な例が、誤字や綴りの間違いをあえて引用して指摘する場合です。

12
00:00:50.817 --> 00:00:57.095
間違っている部分をユータグで囲むことで、ここが指摘の対象です、と読み手に伝えます。

13
00:00:57.095 --> 00:01:03.985
ほかにも、中国語の固有名詞の表記など、言語上の注釈を示す使い方が仕様では挙げられています。

14
00:01:03.985 --> 00:01:07.047
ただし、下線だけでは理由は伝わりません。

15
00:01:07.047 --> 00:01:11.488
なぜ注釈を付けたのかは、前後の文章でも補うことが大切です。

16
00:01:11.488 --> 00:01:17.000
意味がはっきりしない場所に、なんとなく使うタグではないと覚えてください。

17
00:01:17.000 --> 00:01:18.354
基本の書き方です。

18
00:01:18.354 --> 00:01:24.975
ユータグは、開始タグと終了タグを向かい合わせに書き、注釈の対象になる文字だけを囲みます。

19
00:01:24.975 --> 00:01:30.241
段落全体を囲むのではなく、文章の中の必要な部分だけに使うのが基本です。

20
00:01:30.241 --> 00:01:34.755
そのため、ピー要素で書いた段落の中に置くことが多くなります。

21
00:01:34.755 --> 00:01:40.773
ほかの文章を飾るタグと同じく、タグの対応関係を間違えないように注意してください。

22
00:01:40.773 --> 00:01:47.694
ここでも原則は同じで、ユータグは見た目を変えるための道具ではなく、意味を示すためのタグです。

23
00:01:47.694 --> 00:01:53.412
書き方自体はシンプルなので、まずは使う場面を正しく選ぶことに集中しましょう。

24
00:01:53.412 --> 00:01:55.855
記事の活用事例を見てみましょう。

25
00:01:55.855 --> 00:02:03.182
この例では、誤記の例、という段落の中で、スタイルシートト、という文字がユータグで囲まれています。

26
00:02:03.182 --> 00:02:08.068
最後のトが余分で、綴りが間違っていることを示すための書き方です。

27
00:02:08.068 --> 00:02:15.090
正しくはスタイルシートであり、あえて間違った形を引用して、指摘の対象をはっきりさせています。

28
00:02:15.090 --> 00:02:20.968
試すときは、エイチティーエムエルファイルを保存して再読み込みし、開発者ツールのエレメンツで、

29
00:02:20.968 --> 00:02:26.845
対象の文字だけがユーの中に入っているかを確認してみてください。

30
00:02:26.845 --> 00:02:31.120
段落全体を囲んでいないかも、あわせてチェックしましょう。

31
00:02:31.120 --> 00:02:34.566
ユータグで最も注意したいのが、リンクとの誤認です。

32
00:02:34.566 --> 00:02:39.389
ウェブでは長く、下線が付いた文字はリンクである、という慣習があります。

33
00:02:39.389 --> 00:02:46.832
そのため、ユータグで下線が付いた文字を見ると、読み手がクリックできるものだと勘違いしてしまうことがあります。

34
00:02:46.832 --> 00:02:50.002
記事でも、この点が注意として挙げられています。

35
00:02:50.002 --> 00:02:54.343
対策としては、ユータグを使う場面を誤記の指摘などの本来の意味に絞ること、

36
00:02:54.343 --> 00:02:58.685
そしてリンクにしたい場合は必ずエータグを使うことです。

37
00:02:58.685 --> 00:03:05.300
逆に、リンクではない文字を、リンクのように見せない配慮も、読みやすいページ作りには欠かせません。

38
00:03:05.300 --> 00:03:08.175
シーエスエスとの使い分けを整理します。

39
00:03:08.175 --> 00:03:16.043
もし目的が、ただ文字に下線を引きたい、という見た目だけの話なら、ユータグではなくシーエスエスを使います。

40
00:03:16.043 --> 00:03:23.306
シーエスエスのテキストデコレーションで下線を指定すれば、意味を持たせたくない装飾として扱えます。

41
00:03:23.306 --> 00:03:26.861
一方、誤記の指摘のように、そこに注釈があるという意味を伝えたい場合にだけ、

42
00:03:26.861 --> 00:03:30.417
ユータグを選びます。

43
00:03:30.417 --> 00:03:32.838
この判断の軸は、いつも同じです。

44
00:03:32.838 --> 00:03:38.285
意味があるかどうかでタグを選び、見た目だけの変更はシーエスエスに任せる。

45
00:03:38.285 --> 00:03:44.640
ユータグは使用頻度が高いタグではありませんが、この使い分けを理解することが大切です。

46
00:03:44.640 --> 00:03:47.781
関連するタグとの違いも確認しておきます。

47
00:03:47.781 --> 00:03:53.277
エータグは別のページへのリンクを作るタグで、役割はまったく異なります。

48
00:03:53.277 --> 00:04:00.343
エービービーアールタグは略語を示し、ストロングタグは重要性、イーエムタグは強調を表します。

49
00:04:00.343 --> 00:04:07.409
アイタグやビータグも、見た目が変わる点では似ていますが、それぞれ異なる意味を持っています。

50
00:04:07.409 --> 00:04:11.492
ユータグの担当は、あくまで注釈があることの表示です。

51
00:04:11.492 --> 00:04:18.716
見た目が似ているからといって代わりに使うのではなく、伝えたい意味に合うタグを選んでください。

52
00:04:18.716 --> 00:04:25.468
迷ったときは、その部分が何を表しているのかを言葉で説明してみると判断しやすくなります。

53
00:04:25.468 --> 00:04:27.340
属性について確認します。

54
00:04:27.340 --> 00:04:31.241
ユータグには、このタグ専用の必須属性はありません。

55
00:04:31.241 --> 00:04:36.077
必要に応じて、すべての要素で使えるグローバル属性を利用します。

56
00:04:36.077 --> 00:04:42.006
代表的なものとして、文書の中で一意な名前を付けるアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、

57
00:04:42.006 --> 00:04:47.934
内容の言語を示すラングがあります。

58
00:04:47.934 --> 00:04:56.359
ほかにも、アプリ独自の値を保持するデータ属性が使えますが、秘密情報を置く場所ではない点には注意してください。

59
00:04:56.359 --> 00:05:00.260
子要素に付ける属性と混同しないようにし、見た目の指定はシーエスエスで行う、

60
00:05:00.260 --> 00:05:04.160
という分担を守りましょう。

61
00:05:04.160 --> 00:05:07.454
見た目とシーエスエスについても触れておきます。

62
00:05:07.454 --> 00:05:11.606
多くのブラウザーでは、ユータグは通常の下線で表示されます。

63
00:05:11.606 --> 00:05:16.761
しかし、通常の下線はリンクと見分けが付きにくいため、シーエスエスで波線に変えたり、

64
00:05:16.761 --> 00:05:21.916
色を変えたりして、誤記の指摘らしい見た目にする工夫もできます。

65
00:05:21.916 --> 00:05:28.074
原稿の校正で使われるような波線にすれば、読み手もリンクではないと理解しやすくなります。

66
00:05:28.074 --> 00:05:32.370
ここでも大切なのは、装飾を変えても意味は変わらないことです。

67
00:05:32.370 --> 00:05:37.668
見た目を工夫するときは、読み手が誤解しないかどうかを基準に選んでください。

68
00:05:37.668 --> 00:05:39.882
ブラウザー互換性を確認します。

69
00:05:39.882 --> 00:05:45.343
記事が参照するエムディーエヌの記録では、ユータグはクロームが一以降、エッジが十二以降、

70
00:05:45.343 --> 00:05:50.803
ファイアフォックスが一以降、サファリが一以降に対応しています。

71
00:05:50.803 --> 00:05:56.559
つまり、現在の主要なブラウザーでは、長く安定して使える基本的なタグの一つです。

72
00:05:56.559 --> 00:06:04.824
ただし、この表が示すのは要素本体の対応であり、属性や別の仕組みまで含めた完全な動作を保証するものではありません。

73
00:06:04.824 --> 00:06:08.735
スマートフォンのブラウザーでは条件が異なる場合もあるため、対象とする実機で表示を確認すると、

74
00:06:08.735 --> 00:06:12.646
より安心です。

75
00:06:12.646 --> 00:06:16.336
対応状況よりも、使う場面が合っているかが重要です。

76
00:06:16.336 --> 00:06:18.430
最後に練習とまとめです。

77
00:06:18.430 --> 00:06:24.190
ユータグは、綴りの指摘など、文字に注釈があることを示すタグでした。

78
00:06:24.190 --> 00:06:26.459
大切なポイントは三つです。

79
00:06:26.459 --> 00:06:31.695
一つ目は、対象の文字だけを囲み、注釈の理由も文章で補うこと。

80
00:06:31.695 --> 00:06:38.152
二つ目は、下線だけが目的ならシーエスエスを使い、リンクと誤認させないこと。

81
00:06:38.152 --> 00:06:43.563
三つ目は、専用の必須属性はなく、グローバル属性を使うことです。

82
00:06:43.563 --> 00:06:48.624
練習として、誤記の例を引用する短い段落を書き、間違っている部分だけをユーで囲んで、

83
00:06:48.624 --> 00:06:53.685
表示と構造を確かめてみてください。

84
00:06:53.685 --> 00:07:00.666
実装後は、幅三百二十ピクセル程度の狭い画面でも内容が欠けないかも確認しましょう。

85
00:07:00.666 --> 00:07:02.237
お疲れさまでした。

86
00:07:02.237 --> 00:07:07.124
次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。