WEBVTT

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

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

3
00:00:03.662 --> 00:00:06.539
HTMLタグ編の三十三本目は、エスタグです。

4
00:00:06.539 --> 00:00:12.163
エスは、かつては正しかったけれど、今はもう正確ではなくなった情報を示すためのタグです。

5
00:00:12.163 --> 00:00:17.002
たとえば、以前の受付時間や、終了したキャンペーンの案内がこれにあたります。

6
00:00:17.002 --> 00:00:22.625
ただ消してしまうのではなく、あえて残した上で、今は違うんですよ、と伝えるのが役割です。

7
00:00:22.625 --> 00:00:27.595
今回は、よく間違えるデルタグとの違いを中心に、初心者向けに順番に解説します。

8
00:00:27.595 --> 00:00:31.780
見た目は小さいタグですが、案内の信頼を守る大切な役割があります。

9
00:00:31.780 --> 00:00:36.540
では、どんな場面で使うのか、具体例から見ていきましょう。

10
00:00:36.540 --> 00:00:40.280
身近なのは、店舗やイベントの案内の変更です。

11
00:00:40.280 --> 00:00:45.381
受付時間が延びた、料金が改定された、キャンペーンが終わった。

12
00:00:45.381 --> 00:00:52.351
こうしたとき、古い情報をエスで囲んで残し、そのすぐ隣に新しい正しい情報を書きます。

13
00:00:52.351 --> 00:00:56.601
読み手は、何がどう変わったのかが一目で分かります。

14
00:00:56.601 --> 00:01:01.701
以前の案内を見て来た人にも、変更に気づいてもらえるわけです。

15
00:01:01.701 --> 00:01:09.692
逆に、古い情報を残す意味がない場合は、無理にエスを使わず、普通に書き換えてしまって構いません。

16
00:01:09.692 --> 00:01:14.792
日程や条件が変わりやすい案内ほど、この書き方が役に立ちます。

17
00:01:14.792 --> 00:01:16.717
基本の書き方を確認します。

18
00:01:16.717 --> 00:01:22.787
使い方はシンプルで、もはや正しくなくなった部分を開始タグと終了タグで囲むだけです。

19
00:01:22.787 --> 00:01:25.007
スライドは記事の活用事例です。

20
00:01:25.007 --> 00:01:29.375
受付は十八時までです、という古い案内をエスで囲み、その後に、現在は十九時まで受け付けます、

21
00:01:29.375 --> 00:01:33.742
と新しい情報を続けています。

22
00:01:33.742 --> 00:01:40.552
囲まれた部分だけが古い情報、前後の文章とは意味が違う、と読み手とブラウザーに伝わるわけです。

23
00:01:40.552 --> 00:01:46.918
エス自体は文章の流れの中で使うインライン要素なので、段落のピーの中に置くのが基本です。

24
00:01:46.918 --> 00:01:51.804
囲む範囲は必要最小限にし、どこが古い情報なのかを明確にしましょう。

25
00:01:51.804 --> 00:01:56.175
ここが今回いちばん大切な、デルタグとの使い分けです。

26
00:01:56.175 --> 00:02:01.722
見た目はどちらも取り消し線で、とても似ていますが、意味は違います。

27
00:02:01.722 --> 00:02:06.093
デルは、文書を編集する過程で削除した部分を示します。

28
00:02:06.093 --> 00:02:09.287
下書きを直した、という編集の履歴です。

29
00:02:09.287 --> 00:02:17.861
一方エスは、編集の話ではなく、書かれている内容そのものが、今はもう当てはまらなくなった場合に使います。

30
00:02:17.861 --> 00:02:22.399
料金が変わった、時間が変わった、という事実の変化です。

31
00:02:22.399 --> 00:02:29.796
なぜ取り消すのか、編集だからデル、内容が古くなったからエス、と理由で選ぶと間違えません。

32
00:02:29.796 --> 00:02:36.016
この区別は、読み手だけでなく、検索エンジンや支援技術にも正しく伝わります。

33
00:02:36.016 --> 00:02:39.989
もう一つの活用例として、料金表示の訂正を見てみましょう。

34
00:02:39.989 --> 00:02:44.742
スライドの例では、入場料の旧料金、八百円をエスで囲んで残し、新料金の九百円をストロングで示して、

35
00:02:44.742 --> 00:02:49.495
四月一日改定、と変更日も添えています。

36
00:02:49.495 --> 00:02:54.319
こう書くと、値上げがあったことと、今の正しい金額の両方が伝わります。

37
00:02:54.319 --> 00:02:59.143
チケット売り場や、セール終了後の商品ページでも同じ考え方が使えます。

38
00:02:59.143 --> 00:03:02.690
大切なのは、取り消し線だけで終わらせないことです。

39
00:03:02.690 --> 00:03:09.500
読み手が知りたいのは、今いくらなのか、という現在の情報なので、そちらを必ずはっきり書きましょう。

40
00:03:09.500 --> 00:03:14.324
色だけで区別せず、言葉でも変更だと分かるように書くのがポイントです。

41
00:03:14.324 --> 00:03:18.024
そもそも、なぜ古い情報をわざわざ残すのでしょうか。

42
00:03:18.024 --> 00:03:21.873
理由は、変更があったこと自体が大切な情報だからです。

43
00:03:21.873 --> 00:03:26.535
たとえば、以前の案内をメモして来たお客さんは、新しい情報だけが書かれていても、

44
00:03:26.535 --> 00:03:31.198
自分のメモと違うことに気づけないかもしれません。

45
00:03:31.198 --> 00:03:36.674
古い情報を取り消し線で残せば、ああ、変わったんだな、とすぐに理解できます。

46
00:03:36.674 --> 00:03:41.707
スクリーンショットや印刷した案内を持っている人への配慮にもなります。

47
00:03:41.707 --> 00:03:44.963
ただし、すべての変更で残す必要はありません。

48
00:03:44.963 --> 00:03:50.292
誤字の修正のような小さな直しは、普通に書き換える方が読みやすくなります。

49
00:03:50.292 --> 00:03:55.176
つまりエスは、読み手の混乱を防ぐための、さりげない案内役なのです。

50
00:03:55.176 --> 00:03:57.203
属性について整理します。

51
00:03:57.203 --> 00:04:00.751
エスには、このタグ専用の属性はありません。

52
00:04:00.751 --> 00:04:05.819
必要に応じて、すべての要素で使えるグローバル属性を使います。

53
00:04:05.819 --> 00:04:07.677
代表的なのは三つです。

54
00:04:07.677 --> 00:04:15.617
アイディーは文書の中で一つだけの目印で、ページ内リンクやジャバスクリプトからの参照に使います。

55
00:04:15.617 --> 00:04:20.853
クラスはシーエスエスやスクリプトでまとめて選ぶための名前です。

56
00:04:20.853 --> 00:04:26.935
ラングは、その部分の言語を示すもので、日本語ならジェイエーを指定します。

57
00:04:26.935 --> 00:04:30.989
ほかに、独自の値を保持するデータ属性もあります。

58
00:04:30.989 --> 00:04:36.057
注意点として、クラスを付けても要素の意味自体は変わりません。

59
00:04:36.057 --> 00:04:38.084
意味はタグで決まります。

60
00:04:38.084 --> 00:04:43.828
意味のない属性を並べる必要はなく、必要な場面だけで使うのが基本です。

61
00:04:43.828 --> 00:04:45.997
見た目についても触れておきます。

62
00:04:45.997 --> 00:04:50.335
多くのブラウザーでは、エスの内容は取り消し線付きで表示されます。

63
00:04:50.335 --> 00:04:51.962
これが標準の見た目です。

64
00:04:51.962 --> 00:04:55.893
ただ、これはあくまで初期設定なので、スライドのようにシーエスエスで文字の色を薄くしたり、

65
00:04:55.893 --> 00:04:59.824
線の太さを変えたりできます。

66
00:04:59.824 --> 00:05:01.857
ここで大切な注意点があります。

67
00:05:01.857 --> 00:05:08.906
単に線を引きたいだけなら、エスを使うのではなく、シーエスエスのテキストデコレーションで線を引きましょう。

68
00:05:08.906 --> 00:05:12.838
エスは、あくまで内容がもはや正しくないときに選ぶタグです。

69
00:05:12.838 --> 00:05:17.040
意味と見た目を分けて考えることが、正しい使い方につながります。

70
00:05:17.040 --> 00:05:21.920
線の色を変える場合も、コントラストが弱くなりすぎないよう注意しましょう。

71
00:05:21.920 --> 00:05:24.009
ブラウザー互換性を確認します。

72
00:05:24.009 --> 00:05:28.978
記事が参照するエムディーエヌの記録では、エス要素は、クロームがバージョン一以降、

73
00:05:28.978 --> 00:05:33.946
エッジが十二以降、ファイアフォックスが一以降、サファリがバージョン四以前からと、

74
00:05:33.946 --> 00:05:38.914
とても古くからすべての主要ブラウザーで対応しています。

75
00:05:38.914 --> 00:05:41.004
安心して使えるタグの一つです。

76
00:05:41.004 --> 00:05:43.372
ただし、これは要素本体の対応です。

77
00:05:43.372 --> 00:05:49.780
新しいシーエスエスの装飾などを組み合わせる場合は、そちら側の対応状況は別に確認してください。

78
00:05:49.780 --> 00:05:56.466
また、スマホのブラウザーでも表示が崩れないか、大切なページでは実機で一度確認しておくと安心です。

79
00:05:56.466 --> 00:06:01.620
対応表は作成時点の記録なので、新しい装飾を使うときは最新情報も確認します。

80
00:06:01.620 --> 00:06:04.975
実装前後のチェックポイントをまとめます。

81
00:06:04.975 --> 00:06:10.511
一つ目、エスで囲んだら、必ず隣に現在の正しい情報を書いてください。

82
00:06:10.511 --> 00:06:15.208
取り消し線だけでは、読み手は今どうなのかが分かりません。

83
00:06:15.208 --> 00:06:18.730
二つ目、エスは装飾用のタグではありません。

84
00:06:18.730 --> 00:06:25.105
終わったことや古くなったことでない内容に、見た目目的で使うのは避けましょう。

85
00:06:25.105 --> 00:06:29.466
タグ名ではなく、内容の意味から判断するのが原則です。

86
00:06:29.466 --> 00:06:31.479
三つ目は表示の確認です。

87
00:06:31.479 --> 00:06:41.041
三百二十ピクセル程度の狭い画面や、文字を拡大したときにも、古い情報と新しい情報の両方が欠けずに読めるか確かめます。

88
00:06:41.041 --> 00:06:46.744
公開後も情報が古くなっていないか、定期的に見直す習慣をつけましょう。

89
00:06:46.744 --> 00:06:48.809
最後に練習とまとめです。

90
00:06:48.809 --> 00:06:53.456
エスは、もはや正確ではなくなった情報を示すタグでした。

91
00:06:53.456 --> 00:06:55.693
大切なポイントは三つです。

92
00:06:55.693 --> 00:07:04.298
一つ目、内容が古くなったときはエス、文書の編集で削除したときはデルと、取り消す理由で使い分けること。

93
00:07:04.298 --> 00:07:09.805
二つ目、専用の属性はなく、見た目の調整はシーエスエスで行うこと。

94
00:07:09.805 --> 00:07:16.173
三つ目、古い情報を残すときは、現在の正しい情報を必ずセットで書くことです。

95
00:07:16.173 --> 00:07:23.401
練習として、受付時間の変更案内を、エスと新しい時間を組み合わせて書いてみてください。

96
00:07:23.401 --> 00:07:24.950
お疲れさまでした。

97
00:07:24.950 --> 00:07:29.425
次回もエイチティーエムエルタグの解説を続けましょう。

98
00:07:29.425 --> 00:07:35.276
身近な案内文で一度試すと、このタグの使いどころが自然と身につきます。