WEBVTT

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

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

3
00:00:03.594 --> 00:00:07.321
エイチティーエムエルタグ編の八十九本目は、デルタグです。

4
00:00:07.321 --> 00:00:10.649
デルは、文書の編集で削除された部分を示す要素です。

5
00:00:10.649 --> 00:00:16.639
ただ消してしまうのではなく、以前はこう書かれていた、という履歴を読み手に残すのが役割です。

6
00:00:16.639 --> 00:00:19.967
多くのブラウザーでは取り消し線付きで表示されます。

7
00:00:19.967 --> 00:00:25.225
今回は、デルが表す意味、インスとの組み合わせ、サイト属性とデイトタイム属性、

8
00:00:25.225 --> 00:00:30.483
具体的な使い方、ブラウザー互換性、よくある間違いまで、順番に確認していきましょう。

9
00:00:30.483 --> 00:00:36.340
削除と追加はセットで語られることが多いので、インスとの対比も意識しながら聞いてください。

10
00:00:36.340 --> 00:00:38.070
使う場面を整理します。

11
00:00:38.070 --> 00:00:42.947
デルが向いているのは、会場や日程、料金などが変更になったときに、古い内容を削除として残し、

12
00:00:42.947 --> 00:00:47.823
新しい内容と並べて見せる場面です。

13
00:00:47.823 --> 00:00:54.272
たとえば案内文の訂正で、何をどう直したのかが一目で分かれば、読み手は混乱しません。

14
00:00:54.272 --> 00:01:00.092
逆に、記事がはっきり注意している通り、デルは情報を隠すタグではありません。

15
00:01:00.092 --> 00:01:06.148
囲んだ文字はエイチティーエムエルの中にそのまま残るので、機密情報や個人情報は、

16
00:01:06.148 --> 00:01:12.204
デルで隠したつもりにならず、そもそも公開ページに出力しないことが大前提です。

17
00:01:12.204 --> 00:01:18.968
価格改定のお知らせなど、読み手が以前の情報を知っている場面では、特に効果を発揮します。

18
00:01:18.968 --> 00:01:21.171
基本の書き方を確認します。

19
00:01:21.171 --> 00:01:27.780
この教材では、開始タグと終了タグを明示して、その間に削除された内容を入れます。

20
00:01:27.780 --> 00:01:32.609
画面の例では、会場は、という文章の中で、第一教室の部分だけをデルで囲み、

21
00:01:32.609 --> 00:01:37.438
続けて第二教室と新しい情報を書いています。

22
00:01:37.438 --> 00:01:44.047
デルは文の一部分を囲む使い方が基本ですが、段落全体の削除を示すこともできます。

23
00:01:44.047 --> 00:01:50.825
シーエスエスで取り消し線を引くだけでも見た目は似ますが、デルを使うと、これは編集で削除された部分だ、

24
00:01:50.825 --> 00:01:57.603
という意味まで機械や支援技術に伝えられる点が大きな違いです。

25
00:01:57.603 --> 00:02:04.212
タグで意味付けしておけば、後から見直したときにも編集の意図がそのまま残ります。

26
00:02:04.212 --> 00:02:06.530
記事の活用事例を読み解きます。

27
00:02:06.530 --> 00:02:16.265
例では、会場、という案内文の中で、第一教室をデルで囲み、デイトタイム属性で二千二十六年九月二十一日という変更日を添えています。

28
00:02:16.265 --> 00:02:21.210
その直後に、第二教室へ変更しました、と新しい内容を続けています。

29
00:02:21.210 --> 00:02:28.009
閉じた情報ではなく、古い内容と新しい内容が並ぶことで、変更の経緯がその場で理解できます。

30
00:02:28.009 --> 00:02:35.272
試すときは、練習用ファイルのボディの適切な位置にこの例を写し、保存して再読み込みしてください。

31
00:02:35.272 --> 00:02:41.144
開発者ツールのエレメンツで、入れ子が崩れていないかも合わせて確認しましょう。

32
00:02:41.144 --> 00:02:46.552
日付を添えることで、それがいつの変更なのかも読み手に同時に伝わります。

33
00:02:46.552 --> 00:02:50.265
相方の要素、インスとの組み合わせを確認します。

34
00:02:50.265 --> 00:02:57.367
インスは、文書に追加された部分を示す要素で、多くのブラウザーでは下線付きで表示されます。

35
00:02:57.367 --> 00:03:07.375
デルで古い内容を削除として残し、すぐ隣にインスで新しい内容を置くと、何が何に置き換わったのかという差分が一目瞭然になります。

36
00:03:07.375 --> 00:03:14.316
画面の例は参加費の変更で、三千円が削除され、二千五百円が追加されたことが読み取れます。

37
00:03:14.316 --> 00:03:23.033
片方だけでも意味は通りますが、変更の前後を伝えたい場面では、この二つをセットで使うのが基本と考えてください。

38
00:03:23.033 --> 00:03:28.844
順序は、古い内容のデルを先に、新しい内容のインスを後に置くのが自然です。

39
00:03:28.844 --> 00:03:30.799
サイト属性についてです。

40
00:03:30.799 --> 00:03:39.596
サイト属性には、なぜ削除や変更を行ったのか、その理由を説明する文書や案内ページのユーアールエルを指定します。

41
00:03:39.596 --> 00:03:44.483
機械やブラウザーが参照するための補足情報という位置づけです。

42
00:03:44.483 --> 00:03:46.927
ここで大切な注意点があります。

43
00:03:46.927 --> 00:03:52.954
サイト属性を指定しても、画面に自動でリンクが表示されるわけではありません。

44
00:03:52.954 --> 00:04:02.403
読み手にも変更理由を知ってほしい場合は、属性だけに頼らず、本文の中にも理由や案内へのリンクをきちんと書いてください。

45
00:04:02.403 --> 00:04:09.082
属性はあくまで裏側の補足、本文が表側の説明、と分けて考えると整理しやすくなります。

46
00:04:09.082 --> 00:04:14.784
指定は任意ですが、大きな訂正ほど、根拠を示しておく価値が高くなります。

47
00:04:14.784 --> 00:04:17.145
デイトタイム属性についてです。

48
00:04:17.145 --> 00:04:24.229
デイトタイム属性には、その削除が行われた日時を、機械が読み取れる決まった書式で指定します。

49
00:04:24.229 --> 00:04:30.211
基本は、二千二十六年十月一日のように、年、月、日をハイフンでつないだ形です。

50
00:04:30.211 --> 00:04:37.453
必要に応じて、画面の二つ目の例のように、大文字のティーを挟んで時刻まで含めることもできます。

51
00:04:37.453 --> 00:04:42.648
この属性があると、いつ変更されたのかをプログラムが正確に拾えます。

52
00:04:42.648 --> 00:04:47.370
逆に、人間向けの感覚的な表現をそのまま書くと無効な値になってしまうので、

53
00:04:47.370 --> 00:04:52.093
必ず決められた書式で書くことを意識してください。

54
00:04:52.093 --> 00:04:58.075
日付だけでも十分に役立ちますので、まずは日単位の指定から始めてみてください。

55
00:04:58.075 --> 00:05:01.111
似た要素、エスタグとの違いを確認します。

56
00:05:01.111 --> 00:05:05.210
エスタグも取り消し線で表示されますが、意味が違います。

57
00:05:05.210 --> 00:05:10.979
エスは、もはや正確ではなくなった情報や、関係がなくなった情報を示すものです。

58
00:05:10.979 --> 00:05:15.837
一方デルは、文書を編集する過程で削除した、という履歴を示します。

59
00:05:15.837 --> 00:05:19.556
古い価格が単に無効になっただけならエス、編集の経緯として削除を残すならデル、

60
00:05:19.556 --> 00:05:23.275
と使い分けてください。

61
00:05:23.275 --> 00:05:28.209
見た目については、取り消し線の有無や色をシーエスエスで調整できますが、色だけに頼らず、

62
00:05:28.209 --> 00:05:33.143
線と文脈でも削除だと分かる形を保ちましょう。

63
00:05:33.143 --> 00:05:39.215
迷ったときは、編集の履歴なのか、情報の失効なのか、という視点で判断してください。

64
00:05:39.215 --> 00:05:41.697
ブラウザー互換性を確認します。

65
00:05:41.697 --> 00:05:46.827
記事が紹介するエムディーエヌのデータでは、デル要素本体は、クロームが一以降、

66
00:05:46.827 --> 00:05:51.957
ファイアフォックスが一以降、エッジが十二以降、サファリが四以前から対応している、

67
00:05:51.957 --> 00:05:57.087
非常に古くから使える要素です。

68
00:05:57.087 --> 00:06:03.458
今回扱ったサイト属性とデイトタイム属性についても、クローム一以降、エッジ十二以降、

69
00:06:03.458 --> 00:06:09.829
ファイアフォックス一以降、サファリ三以降という対応状況が示されています。

70
00:06:09.829 --> 00:06:14.794
実務では安心して使える部類ですが、数値は確認時点の記録です。

71
00:06:14.794 --> 00:06:20.917
モバイル環境も含め、対象端末で表示を一度確かめる習慣は付けておきましょう。

72
00:06:20.917 --> 00:06:24.723
特別な配慮が必要になる場面は少ないと言えます。

73
00:06:24.723 --> 00:06:27.007
よくある間違いを三つ挙げます。

74
00:06:27.007 --> 00:06:33.556
一つ目は、文書の編集とは関係のない、単に古くなった情報までデルで囲んでしまうことです。

75
00:06:33.556 --> 00:06:38.429
その場合はエスタグが適切で、デルは編集履歴を示す場面に絞ります。

76
00:06:38.429 --> 00:06:43.607
二つ目は、見せたくない情報をデルで囲んで隠したつもりになることです。

77
00:06:43.607 --> 00:06:49.850
ソースを表示すれば誰でも読めてしまうので、公開できない内容は最初から出力しません。

78
00:06:49.850 --> 00:06:54.114
三つ目は、デイトタイム属性の書式を崩してしまうことです。

79
00:06:54.114 --> 00:06:57.617
機械可読な値でなければ属性の意味が失われます。

80
00:06:57.617 --> 00:07:04.318
あわせて、小さい画面幅や文字拡大でも、前後の文章と一緒に読みやすいかを確認してください。

81
00:07:04.318 --> 00:07:09.343
この三つを避けるだけで、読み手に伝わる履歴の質が大きく変わります。

82
00:07:09.343 --> 00:07:10.170
まとめです。

83
00:07:10.170 --> 00:07:15.406
デルは、文書の編集で削除された部分を、履歴として読み手に残すための要素です。

84
00:07:15.406 --> 00:07:18.024
最後にチェックリストで確認しましょう。

85
00:07:18.024 --> 00:07:24.362
まず、その削除が本当に編集の経緯として示すべきものか、単なる無効情報ならエスタグではないか。

86
00:07:24.362 --> 00:07:29.873
次に、追加された内容があるなら、インスと並べて前後関係が分かる形になっているか。

87
00:07:29.873 --> 00:07:36.487
そして、必要な場面では、サイト属性で理由を、デイトタイム属性で日時を、正しい書式で補えているか。

88
00:07:36.487 --> 00:07:41.034
秘密情報を隠す用途には使わない、という線引きも忘れないでください。

89
00:07:41.034 --> 00:07:43.377
これでデルタグの解説を終わります。

90
00:07:43.377 --> 00:07:47.786
ぜひ、案内文や料金表を改訂する場面で、実際に試してみてください。