WEBVTT

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

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

3
00:00:04.304 --> 00:00:08.761
エイチティーエムエルタグ編の六十本目は、インス、タグです。

4
00:00:08.761 --> 00:00:16.754
インスは、インサート、つまり挿入という言葉に由来し、文書が公開されたあとに追加された部分を示すタグです。

5
00:00:16.754 --> 00:00:21.826
たとえば、お知らせの開催時間が後から書き換わったとき、古い内容を消して終わりにするのではなく、

6
00:00:21.826 --> 00:00:26.898
何が新しく加わったかを読者に残せます。

7
00:00:26.898 --> 00:00:31.970
ただ下線を引いただけでは装飾にしか見えませんが、インスで囲むことで、これは後から追加された内容です、

8
00:00:31.970 --> 00:00:37.042
という編集上の意味が伝わります。

9
00:00:37.042 --> 00:00:41.807
今回は基本から、削除を表すデルとの組み合わせまで学びましょう。

10
00:00:41.807 --> 00:00:49.492
この考え方は、ニュースやお知らせのように、公開したあとも内容が更新され続けるページで特に役立ちます。

11
00:00:49.492 --> 00:00:52.193
どんな場面で使うか考えてみましょう。

12
00:00:52.193 --> 00:00:57.146
一つ目は、イベントのお知らせで開始時刻や参加費が変わったときです。

13
00:00:57.146 --> 00:01:01.798
新しい情報をインスで示せば、何が変わったかが一目で分かります。

14
00:01:01.798 --> 00:01:06.450
二つ目は、利用規約やキャンペーン案内に一文を追記したときです。

15
00:01:06.450 --> 00:01:11.102
追加した部分を明示すると、前に読んだ人にも変更点が伝わります。

16
00:01:11.102 --> 00:01:15.304
逆に、普通の文章を目立たせたいだけの場面では使いません。

17
00:01:15.304 --> 00:01:21.157
インスは見た目を変える道具ではなく、編集の履歴を意味として残すためのタグです。

18
00:01:21.157 --> 00:01:25.059
後から足されたかどうか、という視点で判断しましょう。

19
00:01:25.059 --> 00:01:31.512
週報や議事録のように、版を重ねる文書でも、どこが新しい情報かを示す手がかりになります。

20
00:01:31.512 --> 00:01:33.536
基本の書き方を確認します。

21
00:01:33.536 --> 00:01:39.451
使い方はシンプルで、追加した語句や文章を、開始タグと終了タグで囲むだけです。

22
00:01:39.451 --> 00:01:45.678
画面の例では、持ち物の説明にタオルという言葉を後から追加したことを示しています。

23
00:01:45.678 --> 00:01:50.270
多くのブラウザーでは、インスの内容は初期状態で下線付きで表示されるため、

24
00:01:50.270 --> 00:01:54.863
見た目でも追加部分に気づきやすくなっています。

25
00:01:54.863 --> 00:01:58.599
ただし、下線はあくまでブラウザーの初期表示です。

26
00:01:58.599 --> 00:02:07.005
リンクと紛らわしい場合は、後で学ぶシーエスエスで色や線の種類を変えて、リンクと区別できるように整えましょう。

27
00:02:07.005 --> 00:02:15.100
文章の一部だけを囲むことも、段落ごと追加した内容を囲むこともでき、追加の単位に合わせて使い分けられます。

28
00:02:15.100 --> 00:02:20.577
インスが最も力を発揮するのは、削除を表すデルタグと組み合わせたときです。

29
00:02:20.577 --> 00:02:26.814
デルは取り消し線で削除された内容を、インスは下線で新しく追加された内容を示します。

30
00:02:26.814 --> 00:02:33.964
画面の例は記事でも紹介されている形で、開催時間が十三時から十四時に変わったことを表しています。

31
00:02:33.964 --> 00:02:37.767
古い時刻をデル、新しい時刻をインスで囲むと、変更前と変更後が一文の中で並び、

32
00:02:37.767 --> 00:02:41.570
読み手は履歴を追えます。

33
00:02:41.570 --> 00:02:49.177
文章を丸ごと書き換えてしまう前に、変更を見せたい部分だけを、この二つのタグで丁寧に示すのがコツです。

34
00:02:49.177 --> 00:02:57.392
取り消しと追加が並ぶことで、読み手は元の文を頭の中で復元しなくても、変更の流れをそのまま追うことができます。

35
00:02:57.392 --> 00:03:00.167
次に、インス専用の属性を見ていきます。

36
00:03:00.167 --> 00:03:02.066
まずデイトタイム属性です。

37
00:03:02.066 --> 00:03:08.492
これは、その部分をいつ追加・編集したかを、機械が読み取れる形式で記録するための属性です。

38
00:03:08.492 --> 00:03:14.627
たとえば二千二十六年九月二十一日に変更したなら、その日付を決められた書式で書きます。

39
00:03:14.627 --> 00:03:16.818
時刻まで含めることもできます。

40
00:03:16.818 --> 00:03:25.581
この値は画面にそのまま表示されるわけではありませんが、検索エンジンや支援技術などが変更時点を理解する手がかりになります。

41
00:03:25.581 --> 00:03:32.007
書くときは、思いつきの表記ではなく、有効な日時の書式になっているかを必ず確認しましょう。

42
00:03:32.007 --> 00:03:38.580
日付だけでなく、時刻まで含めた正確な記録は、あとから履歴を確認するときの目印にもなります。

43
00:03:38.580 --> 00:03:41.188
もう一つの専用属性が、サイト属性です。

44
00:03:41.188 --> 00:03:48.737
サイト属性には、なぜこの変更を行ったのかを説明したページや、変更の出典となる文書のユーアールエルを指定します。

45
00:03:48.737 --> 00:03:52.168
前の画面のデイトタイムと一緒に使うこともできます。

46
00:03:52.168 --> 00:03:58.619
注意したいのは、サイト属性を指定しても、画面上にリンクが自動で表示されるわけではないことです。

47
00:03:58.619 --> 00:04:05.207
読者にも理由を伝えたい場合は、変更のお知らせとして通常の文章やリンクを本文に別途用意しましょう。

48
00:04:05.207 --> 00:04:11.109
属性は機械向けの補足、本文は人向けの説明、と役割を分けて考えると整理しやすくなります。

49
00:04:11.109 --> 00:04:17.835
理由を説明したページが別にある場合は、その場所を示しておくと、変更の信頼性も伝わりやすくなります。

50
00:04:17.835 --> 00:04:22.541
活用例として、お知らせの訂正文を組み立ててみましょう。

51
00:04:22.541 --> 00:04:27.508
開始時刻が十三時から十四時に変わる場合、古い時刻をデル、新しい時刻をインスで示し、

52
00:04:27.508 --> 00:04:32.475
デイトタイムで変更日を添えます。

53
00:04:32.475 --> 00:04:38.923
ここで大切なのが、記事でも注意されている、色や下線だけに頼らないことです。

54
00:04:38.923 --> 00:04:46.418
画面が見づらい環境や、線の意味を知らない読み手には、変更点が伝わらないことがあります。

55
00:04:46.418 --> 00:04:54.435
そこで、十四時に変更します、という通常の文章を一緒に書いておくと、誰にでも確実に伝わります。

56
00:04:54.435 --> 00:05:00.709
タグの意味と文章の説明を両方そろえることが、親切な訂正文のポイントです。

57
00:05:00.709 --> 00:05:02.827
見た目について触れておきます。

58
00:05:02.827 --> 00:05:07.841
インスは多くのブラウザーで下線付きで表示されますが、下線はリンクの表示とも似ているため、

59
00:05:07.841 --> 00:05:12.855
読み手がクリックできるものと誤解するおそれがあります。

60
00:05:12.855 --> 00:05:19.775
その場合はシーエスエスで、下線を消して薄い背景色を付けるなど、リンクとは違う見た目に整えられます。

61
00:05:19.775 --> 00:05:24.153
画面の例では、淡い緑の背景で追加部分をそっと目立たせています。

62
00:05:24.153 --> 00:05:27.755
ただし、見た目を消してしまうと変更点が分からなくなるので、背景や太字など、

63
00:05:27.755 --> 00:05:31.356
別の手がかりは残しましょう。

64
00:05:31.356 --> 00:05:36.441
意味付けはインス、見た目の調整はシーエスエス、という分担は変わりません。

65
00:05:36.441 --> 00:05:43.361
デルとインスで色をそろえておくと、削除は赤系、追加は緑系のように、変更の種類が直感的に伝わります。

66
00:05:43.361 --> 00:05:45.702
似たタグとの使い分けを整理します。

67
00:05:45.702 --> 00:05:50.108
デルは、文書の編集で削除された部分を示し、インスと対で使います。

68
00:05:50.108 --> 00:05:54.032
エスタグは、セール終了後の旧価格のように、もはや正確ではなくなった情報を示すもので、

69
00:05:54.032 --> 00:05:57.956
編集の削除とは意味が違います。

70
00:05:57.956 --> 00:06:02.775
ユータグは、綴りの指摘など、文字に注釈があることを示すためのものです。

71
00:06:02.775 --> 00:06:07.594
下線や取り消し線といった見た目が似ていても、意味はそれぞれ異なります。

72
00:06:07.594 --> 00:06:11.932
後から追加された部分かどうかを基準に、追加ならインス、編集による削除ならデル、

73
00:06:11.932 --> 00:06:16.269
単に古くなった情報ならエス、と選び分けましょう。

74
00:06:16.269 --> 00:06:18.190
ブラウザー互換性を確認します。

75
00:06:18.190 --> 00:06:23.057
記事が参照するエムディーエヌの記録では、インス要素はクロームが一以降、エッジが十二以降、

76
00:06:23.057 --> 00:06:27.925
ファイアフォックスが一以降、サファリが四以前から対応しています。

77
00:06:27.925 --> 00:06:34.201
サイト属性とデイトタイム属性も、各ブラウザーの初期の頃から対応している項目として挙げられています。

78
00:06:34.201 --> 00:06:38.556
歴史の長い基本要素なので、現在の主要ブラウザーでは安心して使えます。

79
00:06:38.556 --> 00:06:46.369
実装後は、開発者ツールで追加部分が正しくインスとして入っているか、細い画面幅でも変更点が欠けずに読めるかを確認しましょう。

80
00:06:46.369 --> 00:06:47.892
最後にまとめです。

81
00:06:47.892 --> 00:06:52.799
インスタグは、文書に後から追加された部分を示す要素でした。

82
00:06:52.799 --> 00:06:54.491
ポイントは三つです。

83
00:06:54.491 --> 00:06:59.229
一つ目、追加した語句や文をインスで囲み、削除された部分のデルと組み合わせると、

84
00:06:59.229 --> 00:07:03.967
変更前と変更後が一目で分かること。

85
00:07:03.967 --> 00:07:08.197
二つ目、デイトタイム属性で変更した日時を、サイト属性で理由の出どころを、

86
00:07:08.197 --> 00:07:12.427
機械が読める形で補えること。

87
00:07:12.427 --> 00:07:19.364
三つ目、下線や色だけに頼らず、変更したという事実を通常の文章でも説明することです。

88
00:07:19.364 --> 00:07:27.656
練習として、お知らせの時刻変更をデルとインスで書いてみて、ブラウザーで表示を確認してみてください。

89
00:07:27.656 --> 00:07:29.178
お疲れさまでした。

90
00:07:29.178 --> 00:07:36.116
まずは身近なお知らせ文を一つ選び、変更前と変更後を並べる練習から始めてみましょう。