WEBVTT

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

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

3
00:00:03.904 --> 00:00:08.098
エイチティーエムエルタグ編の九十六本目は、サイトタグです。

4
00:00:08.098 --> 00:00:10.701
サイトは、作品の題名を示す要素です。

5
00:00:10.701 --> 00:00:18.221
たとえば本の名前、映画のタイトル、曲名や記事の題名など、創作物の名前を文章の中で示したいときに使います。

6
00:00:18.221 --> 00:00:23.716
多くのブラウザーでは斜体で表示されるため、周りの文章と見分けやすくなります。

7
00:00:23.716 --> 00:00:29.428
今回は、サイトの意味、引用元のユーアールエルを入れるサイト属性との違い、

8
00:00:29.428 --> 00:00:35.140
基本の使い方、コード例、ブラウザー互換性、そしてよくある間違いまで、順番に確認します。

9
00:00:35.140 --> 00:00:37.645
まず、サイトの役割を整理します。

10
00:00:37.645 --> 00:00:42.499
サイトは、ここは作品の題名です、と意味で伝えるための要素です。

11
00:00:42.499 --> 00:00:46.726
対象になるのは、本、映画、音楽、テレビ番組、絵画、ゲーム、ウェブサイトの記事など、

12
00:00:46.726 --> 00:00:50.953
創作された作品の名前です。

13
00:00:50.953 --> 00:00:54.867
画面の例では、本の題名だけをサイトで囲んでいます。

14
00:00:54.867 --> 00:00:59.407
大切なのは、斜体にしたいから使うのではない、という点です。

15
00:00:59.407 --> 00:01:06.453
見た目だけを変えたいならシーエスエスで対応し、内容が本当に作品の題名かどうかで判断します。

16
00:01:06.453 --> 00:01:12.872
普通の強調や、ただ目立たせたい単語に使うのは、意味がずれてしまうため避けましょう。

17
00:01:12.872 --> 00:01:16.329
サイトの書き方と配置を確認します。

18
00:01:16.329 --> 00:01:23.852
サイトは、開始タグと終了タグをセットで書き、その間に作品の題名を入れます。

19
00:01:23.852 --> 00:01:29.749
空要素ではないので、終了タグの書き忘れに注意してください。

20
00:01:29.749 --> 00:01:39.916
サイトは文章の流れの中に置けるインラインの要素で、段落や見出し、リストの中などに自然に入れられます。

21
00:01:39.916 --> 00:01:46.423
記事の説明でも、段落の中で題名だけを囲む形が基本になっています。

22
00:01:46.423 --> 00:01:53.845
特定の親要素の中にしか置けない、といった強い制限は基本の使い方ではありませんが、

23
00:01:53.845 --> 00:02:01.267
周りの文章の構造を崩さないよう、必要な範囲だけを囲むのが大切です。

24
00:02:01.267 --> 00:02:07.164
意味を持つタグの選択と、見た目の指定は分けて考えましょう。

25
00:02:07.164 --> 00:02:13.131
ここがサイトで最も間違いやすいポイント、サイト要素とサイト属性の違いです。

26
00:02:13.131 --> 00:02:16.357
名前は同じですが、役割はまったく別です。

27
00:02:16.357 --> 00:02:21.518
サイト要素は、画面に表示される作品の題名そのものを囲むタグです。

28
00:02:21.518 --> 00:02:26.275
一方、サイト属性は、ブロッククォートやキューのような引用要素に付ける属性で、

29
00:02:26.275 --> 00:02:31.033
引用元のユーアールエルを値として書きます。

30
00:02:31.033 --> 00:02:34.259
属性の値は通常、画面には表示されません。

31
00:02:34.259 --> 00:02:37.968
プログラムや支援技術が参照するための情報です。

32
00:02:37.968 --> 00:02:42.484
つまり、読者に見せたい題名はサイト要素、引用元のアドレスを機械向けに残したいときはサイト属性、

33
00:02:42.484 --> 00:02:46.999
と覚えてください。

34
00:02:46.999 --> 00:02:49.096
この区別が今回の核心です。

35
00:02:49.096 --> 00:02:51.522
基本のコード例を見ていきます。

36
00:02:51.522 --> 00:02:55.728
記事の活用事例のテーマは、作品の題名を示すことです。

37
00:02:55.728 --> 00:02:58.963
画面の一行目が、記事に載っている例です。

38
00:02:58.963 --> 00:03:04.140
参考文献という言葉のあとに、本の題名だけをサイトで囲んでいます。

39
00:03:04.140 --> 00:03:11.419
これだけで、これは普通の単語ではなく、作品の名前だ、と読み手にもプログラムにも伝わります。

40
00:03:11.419 --> 00:03:15.948
二つ目の例のように、文章の途中に入れても自然に読めます。

41
00:03:15.948 --> 00:03:20.154
逆に言えば、文章全体をサイトで囲む必要はありません。

42
00:03:20.154 --> 00:03:26.624
題名の部分だけを囲むことで、文章の読みやすさと、出典の分かりやすさが両立します。

43
00:03:26.624 --> 00:03:30.668
まずはこの一行の使い方をしっかり身に付けましょう。

44
00:03:30.668 --> 00:03:34.775
応用として、リンクや引用と組み合わせる方法です。

45
00:03:34.775 --> 00:03:39.567
サイト要素自体には、リンク先を指定する機能はありません。

46
00:03:39.567 --> 00:03:44.445
読者が出典を実際に開けるようにしたい場合は、画面のようにエー要素と組み合わせて、

47
00:03:44.445 --> 00:03:49.322
題名から出典ページへリンクします。

48
00:03:49.322 --> 00:04:00.275
また、長い文章を引用するときは、引用全体をブロッククォートで囲み、その下に出典としてサイトで題名を示す形が分かりやすくなります。

49
00:04:00.275 --> 00:04:07.120
引用元のユーアールエルをサイト属性に書いただけでは、読者の画面には何も出ません。

50
00:04:07.120 --> 00:04:12.768
読者に伝えるべき出典は、必ず本文の中にも見える形で置いてください。

51
00:04:12.768 --> 00:04:15.591
対象の範囲について、注意点を押さえます。

52
00:04:15.591 --> 00:04:19.049
記事がはっきり伝えているのは、サイトは人物の名前そのものを示すためのタグではない、

53
00:04:19.049 --> 00:04:22.507
ということです。

54
00:04:22.507 --> 00:04:28.718
たとえば著者の名前や、発言した人の名前を、それだけでサイトで囲むのは適切ではありません。

55
00:04:28.718 --> 00:04:32.952
囲んでよいのは、あくまでその人が作った作品の題名のほうです。

56
00:04:32.952 --> 00:04:39.586
本人の名前を出典として伝えたい場合は、通常の文章で書くか、リンクが必要ならエー要素を使います。

57
00:04:39.586 --> 00:04:44.385
人名を見たら機械的にサイトを付ける、という覚え方は間違いのもとです。

58
00:04:44.385 --> 00:04:48.196
作品の題名かどうか、という基準で毎回判断してください。

59
00:04:48.196 --> 00:04:50.432
属性について確認します。

60
00:04:50.432 --> 00:04:54.905
サイトには、この要素専用の必須属性はありません。

61
00:04:54.905 --> 00:05:01.055
必要に応じて、アイディー、クラス、ラングなどの共通属性を使います。

62
00:05:01.055 --> 00:05:07.205
ここで、前にお話しした引用要素のサイト属性と混同しないでください。

63
00:05:07.205 --> 00:05:14.100
サイト要素自体にユーアールエルを入れる属性はない、というのがポイントです。

64
00:05:14.100 --> 00:05:20.623
見た目については、多くのブラウザーで斜体になるのが標準ですが、画面の例のようにシーエスエスで斜体をやめて太字にするなど、

65
00:05:20.623 --> 00:05:27.146
自由に整えられます。

66
00:05:27.146 --> 00:05:31.805
ただし、見た目を変えても要素の意味は変わりません。

67
00:05:31.805 --> 00:05:36.464
データスター属性に秘密情報を置かない点も共通です。

68
00:05:36.464 --> 00:05:42.518
関連する要素との使い分けも押さえておきます。

69
00:05:42.518 --> 00:05:54.900
文中の短い引用を示すときはキュー、まとまった引用を示すときはブロッククォートが担当します。

70
00:05:54.900 --> 00:06:04.806
そして、その引用がどの作品から来たのか、題名を示すのがサイトの役割です。

71
00:06:04.806 --> 00:06:13.474
また、斜体で表示される点が似ているアイ要素は、専門用語や通常とは性質の異なる文字を示すもので、

72
00:06:13.474 --> 00:06:22.141
作品の題名とは意味が異なります。

73
00:06:22.141 --> 00:06:25.719
イーエムの強調とも別です。

74
00:06:25.719 --> 00:06:37.551
見た目が似ていても、意味が違う要素が用意されているのがエイチティーエムエルの特徴です。

75
00:06:37.551 --> 00:06:46.356
何を伝えたいのかを先に考え、その意味に合った要素を選びましょう。

76
00:06:46.356 --> 00:06:48.548
ブラウザー互換性を確認します。

77
00:06:48.548 --> 00:06:54.538
記事が紹介するエムディーエヌのデータでは、サイト要素本体は、クロームが一以降、

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

79
00:07:00.528 --> 00:07:07.980
かなり古くから使われてきた基本要素なので、現在の主要ブラウザーでは安心して使えると考えてよいでしょう。

80
00:07:07.980 --> 00:07:12.290
ただし、この表は要素本体の対応を示すもので、組み合わせるリンク先の仕組みや、

81
00:07:12.290 --> 00:07:16.600
追加の機能まで保証するものではありません。

82
00:07:16.600 --> 00:07:21.714
新しい仕組みを組み合わせる場合は、その対応状況を別に確認してください。

83
00:07:21.714 --> 00:07:24.928
モバイル環境でも実機で表示を試すと確実です。

84
00:07:24.928 --> 00:07:28.066
まとめとして、よくある間違いを三つ挙げます。

85
00:07:28.066 --> 00:07:32.917
一つ目は、著者など人物の名前そのものにサイトを付けてしまうことです。

86
00:07:32.917 --> 00:07:35.199
サイトが示すのは作品の題名です。

87
00:07:35.199 --> 00:07:41.618
二つ目は、サイト要素と、引用元のユーアールエルを入れるサイト属性を混同してしまうことです。

88
00:07:41.618 --> 00:07:45.898
表示される題名か、機械向けのアドレスか、で区別してください。

89
00:07:45.898 --> 00:07:52.460
三つ目は、斜体にしたいだけの理由で、作品の題名ではない文章までサイトで囲んでしまうことです。

90
00:07:52.460 --> 00:07:55.598
意味で選ぶ、という原則を思い出してください。

91
00:07:55.598 --> 00:07:58.166
サイトは、作品の題名を示す要素です。

92
00:07:58.166 --> 00:08:00.734
これでサイトタグの解説を終わります。

93
00:08:00.734 --> 00:08:05.156
ぜひ、自分のページで本の題名を囲む練習から始めてみてください。