WEBVTT

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

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

3
00:00:03.823 --> 00:00:06.690
HTMLタグ編の九本目は、タイムタグです。

4
00:00:06.690 --> 00:00:12.970
これは、日付や時刻を表すためのタグで、人が読む表示と、機械が読む値を両立できるのが特徴です。

5
00:00:12.970 --> 00:00:21.571
たとえば、画面には二千二十六年十月一日と読みやすく表示しながら、裏側ではコンピューターが正確に処理できる形式で日付を伝えます。

6
00:00:21.571 --> 00:00:25.666
開催日、公開日、締め切りなど、日時が重要な場面で活躍します。

7
00:00:25.666 --> 00:00:29.284
今回は、基本の書き方から、デイトタイム属性の書式、間違えやすいポイントまで、

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

9
00:00:32.902 --> 00:00:39.045
イベント案内やお知らせ、ブログの公開日など、私たちが作るページには日時が頻繁に登場します。

10
00:00:39.045 --> 00:00:42.868
その一つひとつに正しく意味を付ける練習にもなるタグです。

11
00:00:42.868 --> 00:00:47.527
まず、なぜ機械用の値が必要なのかを考えてみましょう。

12
00:00:47.527 --> 00:00:55.233
人は、十月一日、来週の木曜日、といった表現でも、文脈から意味を読み取ることができます。

13
00:00:55.233 --> 00:01:00.519
しかし、検索エンジンやプログラム、カレンダー連携のような仕組みは、決まった書式で書かれた値の方が、

14
00:01:00.519 --> 00:01:05.806
確実に処理できます。

15
00:01:05.806 --> 00:01:10.644
単なる文章として日付を書いただけでは、それが開催日なのか、単なる数字の並びなのか、

16
00:01:10.644 --> 00:01:15.483
機械には判断がつきません。

17
00:01:15.483 --> 00:01:20.411
タイムタグで囲み、機械が読める値を添えることで、この日付や時刻が何を指すのかを、

18
00:01:20.411 --> 00:01:25.339
はっきり伝えることができます。

19
00:01:25.339 --> 00:01:31.970
逆に言えば、決まった書式さえ添えておけば、日程を一覧にしたり、期限が近い順に並べ替えたりといった処理も、

20
00:01:31.970 --> 00:01:38.600
プログラム側で安心して行えるようになります。

21
00:01:38.600 --> 00:01:40.047
基本の書き方です。

22
00:01:40.047 --> 00:01:46.640
タイムタグは、開始タグと終了タグを明示して、その間に人が読む日付や時刻を書きます。

23
00:01:46.640 --> 00:01:52.429
そして開始タグの中に、デイトタイム属性として、機械が読める値を添えます。

24
00:01:52.429 --> 00:01:57.414
画面に表示されるのは、タグの間に書いた読みやすい文章の方です。

25
00:01:57.414 --> 00:02:05.455
デイトタイム属性の値は、画面には直接表示されませんが、プログラムなどが読み取るための情報になります。

26
00:02:05.455 --> 00:02:11.083
まずは、囲んだ文章と、属性の値が、同じ日時を指していることが大切です。

27
00:02:11.083 --> 00:02:14.460
この二つをセットで書く形を覚えてください。

28
00:02:14.460 --> 00:02:17.727
デイトタイム属性の書式を確認します。

29
00:02:17.727 --> 00:02:23.355
日付だけを表す場合は、年、月、日をハイフンでつないで書きます。

30
00:02:23.355 --> 00:02:27.893
時刻だけの場合は、時と分をコロンでつないだ形です。

31
00:02:27.893 --> 00:02:34.791
日付と時刻を組み合わせる場合は、日付と時刻の間を大文字のティーでつなぎます。

32
00:02:34.791 --> 00:02:42.415
日本語の年月日といった書き方や、スラッシュ区切りは、機械用の書式としては使えません。

33
00:02:42.415 --> 00:02:49.131
画面表示は自由でも、属性の中は決められた書式で書く、という区別が重要です。

34
00:02:49.131 --> 00:02:55.666
時刻やタイムゾーンを含む場合は、特に書式をよく確認してから書きましょう。

35
00:02:55.666 --> 00:02:59.478
なお、月や日は二桁でそろえるのが基本です。

36
00:02:59.478 --> 00:03:09.280
一桁の数字をそのまま書くと、正しい書式として扱われない場合があるため、ゼロで埋めることを忘れないでください。

37
00:03:09.280 --> 00:03:11.995
記事の活用事例を見てみましょう。

38
00:03:11.995 --> 00:03:17.595
段落の中に、開催日という言葉に続けて、タイムタグが置かれています。

39
00:03:17.595 --> 00:03:24.214
タグの間には、二千二十六年十月一日と、日本語で読みやすい表記が書かれています。

40
00:03:24.214 --> 00:03:28.796
一方、デイトタイム属性には、二千二十六、ハイフン、十、ハイフン、ゼロ一という、

41
00:03:28.796 --> 00:03:33.378
機械向けの書式が入っています。

42
00:03:33.378 --> 00:03:38.978
ポイントは、意味は同じでも、相手に合わせて書き分けていることです。

43
00:03:38.978 --> 00:03:45.257
試すときは、保存して再読み込みし、表示が崩れていないかを確認してください。

44
00:03:45.257 --> 00:03:50.348
開発者ツールで要素を見ると、属性の値もあわせて確認できます。

45
00:03:50.348 --> 00:03:54.382
表示する文字は、読み手に合わせて工夫できます。

46
00:03:54.382 --> 00:04:01.399
たとえば、十月一日、木曜日、といった短い表示や、曜日を添えた表示でも構いません。

47
00:04:01.399 --> 00:04:12.099
大切なのは、タグの中の表示が省略されたり、言い換えられたりしても、デイトタイム属性には正確で完全な値が入っていることです。

48
00:04:12.099 --> 00:04:16.309
ただし、逆に表示と属性が食い違ってはいけません。

49
00:04:16.309 --> 00:04:25.430
表示では十月一日と言いながら、属性が九月三十日になっていては、読む人と機械で違う情報になってしまいます。

50
00:04:25.430 --> 00:04:30.868
表示を変えたら、属性も一緒に見直す、という意識を持ちましょう。

51
00:04:30.868 --> 00:04:37.709
たとえば、毎年恒例の行事のように、年を省略して伝えた方が自然な場面もあります。

52
00:04:37.709 --> 00:04:43.848
そういうときほど、属性側に完全な情報を残しておく価値が大きくなります。

53
00:04:43.848 --> 00:04:45.807
時刻を扱うときの注意です。

54
00:04:45.807 --> 00:04:53.641
日付だけなら大きな問題になりにくいですが、時刻を含む場合は、それがどの地域の時刻なのかが重要になります。

55
00:04:53.641 --> 00:04:59.215
たとえば夜七時半という時刻も、日本と海外では実際の瞬間が大きく異なります。

56
00:04:59.215 --> 00:05:06.899
そのため、必要に応じて、タイムゾーンのずれを示す情報を、時刻の後ろに続けて書く書式も用意されています。

57
00:05:06.899 --> 00:05:12.022
コード例のプラスゼロ九、ゼロゼロは、日本時間を示す書き方の一例です。

58
00:05:12.022 --> 00:05:20.308
オンライン開催や世界向けの案内では、表示にも日本時間と添えるなど、読み手が迷わない工夫をあわせて行いましょう。

59
00:05:20.308 --> 00:05:21.640
属性を確認します。

60
00:05:21.640 --> 00:05:26.226
タイムタグで中心になるのは、何といってもデイトタイム属性です。

61
00:05:26.226 --> 00:05:31.256
これが、機械が読める日時を指定する、タイムタグ専用の重要な属性です。

62
00:05:31.256 --> 00:05:36.139
そのほかは、ほかの要素でも使う共通のグローバル属性が利用できます。

63
00:05:36.139 --> 00:05:40.799
文書の中で一意な識別子のアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、

64
00:05:40.799 --> 00:05:45.459
内容の言語を示すラングなどです。

65
00:05:45.459 --> 00:05:51.525
アプリ独自の値を保持するデータ属性も使えますが、秘密情報を置く場所ではありません。

66
00:05:51.525 --> 00:05:55.520
まずはデイトタイムを正確に書くことに集中してください。

67
00:05:55.520 --> 00:05:58.146
よくある間違いを三つ紹介します。

68
00:05:58.146 --> 00:06:05.859
一つ目は、画面の文字列だけを変更して、デイトタイム属性の日付が古いままになってしまうことです。

69
00:06:05.859 --> 00:06:12.260
記事でも特に注意されている失敗で、更新作業では必ず両方をセットで直しましょう。

70
00:06:12.260 --> 00:06:20.629
二つ目は、デイトタイム属性に、二千二十六年十月一日といった日本語の書式をそのまま書いてしまうことです。

71
00:06:20.629 --> 00:06:25.717
機械用の値は、決められた数字と記号の書式で書く必要があります。

72
00:06:25.717 --> 00:06:31.625
三つ目は、日時とは関係のない文章にまでタイムタグを使ってしまうことです。

73
00:06:31.625 --> 00:06:35.892
日付や時刻を表す内容のときだけ使うようにしましょう。

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

75
00:06:38.109 --> 00:06:43.949
記事が参照するエムディーエヌの記録では、タイムタグはクロームが六十二以降、

76
00:06:43.949 --> 00:06:49.788
エッジが十四以降、ファイアフォックスが二十二以降、サファリが七以降に対応しています。

77
00:06:49.788 --> 00:06:54.815
中心となるデイトタイム属性についても、同じ対応状況が示されています。

78
00:06:54.815 --> 00:06:59.693
現在の主要なブラウザーでは、安心して使える要素の一つだと言えます。

79
00:06:59.693 --> 00:07:02.945
ただし、この表が示すのは要素本体の対応です。

80
00:07:02.945 --> 00:07:11.224
検索エンジンや外部サービスが、その日時をどう活用するかは、各サービスの仕様にも左右される点は覚えておきましょう。

81
00:07:11.224 --> 00:07:13.097
最後に練習とまとめです。

82
00:07:13.097 --> 00:07:19.496
タイムタグは、日付や時刻を表し、人が読む表示と機械が読む値を両立させるタグでした。

83
00:07:19.496 --> 00:07:21.526
大切なポイントは三つです。

84
00:07:21.526 --> 00:07:29.330
一つ目は、タグの間には読みやすい表示を書き、デイトタイム属性には決められた書式で正確な値を書くこと。

85
00:07:29.330 --> 00:07:34.793
二つ目は、日付、時刻、日時で書式が違うので、目的に合った形を選ぶこと。

86
00:07:34.793 --> 00:07:40.568
三つ目は、表示を変更したら属性も一緒に見直し、食い違いを作らないことです。

87
00:07:40.568 --> 00:07:46.967
練習として、自分で作ったページの開催日や公開日に、タイムタグを付けてみてください。

88
00:07:46.967 --> 00:07:48.372
お疲れさまでした。

89
00:07:48.372 --> 00:07:52.118
次回もHTMLタグを一つずつ学んでいきましょう。

90
00:07:52.118 --> 00:07:59.922
確認のコツは、表示を声に出して読み、その日時と属性の値が頭の中で一致するかを照らし合わせることです。

91
00:07:59.922 --> 00:08:03.356
小さな習慣ですが、公開前のミスを減らせます。