VIDEO LESSON

HTMLのtimeタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 8:03動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03HTMLタグ編の九本目は、タイムタグです。
0:06これは、日付や時刻を表すためのタグで、人が読む表示と、機械が読む値を両立できるのが特徴です。
0:12たとえば、画面には二千二十六年十月一日と読みやすく表示しながら、裏側ではコンピューターが正確に処理できる形式で日付を伝えます。
0:21開催日、公開日、締め切りなど、日時が重要な場面で活躍します。
0:25今回は、基本の書き方から、デイトタイム属性の書式、間違えやすいポイントまで、
0:29初心者向けに順番に解説します。
0:32イベント案内やお知らせ、ブログの公開日など、私たちが作るページには日時が頻繁に登場します。
0:39その一つひとつに正しく意味を付ける練習にもなるタグです。
0:42まず、なぜ機械用の値が必要なのかを考えてみましょう。
0:47人は、十月一日、来週の木曜日、といった表現でも、文脈から意味を読み取ることができます。
0:55しかし、検索エンジンやプログラム、カレンダー連携のような仕組みは、決まった書式で書かれた値の方が、
1:00確実に処理できます。
1:05単なる文章として日付を書いただけでは、それが開催日なのか、単なる数字の並びなのか、
1:10機械には判断がつきません。
1:15タイムタグで囲み、機械が読める値を添えることで、この日付や時刻が何を指すのかを、
1:20はっきり伝えることができます。
1:25逆に言えば、決まった書式さえ添えておけば、日程を一覧にしたり、期限が近い順に並べ替えたりといった処理も、
1:31プログラム側で安心して行えるようになります。
1:38基本の書き方です。
1:40タイムタグは、開始タグと終了タグを明示して、その間に人が読む日付や時刻を書きます。
1:46そして開始タグの中に、デイトタイム属性として、機械が読める値を添えます。
1:52画面に表示されるのは、タグの間に書いた読みやすい文章の方です。
1:57デイトタイム属性の値は、画面には直接表示されませんが、プログラムなどが読み取るための情報になります。
2:05まずは、囲んだ文章と、属性の値が、同じ日時を指していることが大切です。
2:11この二つをセットで書く形を覚えてください。
2:14デイトタイム属性の書式を確認します。
2:17日付だけを表す場合は、年、月、日をハイフンでつないで書きます。
2:23時刻だけの場合は、時と分をコロンでつないだ形です。
2:27日付と時刻を組み合わせる場合は、日付と時刻の間を大文字のティーでつなぎます。
2:34日本語の年月日といった書き方や、スラッシュ区切りは、機械用の書式としては使えません。
2:42画面表示は自由でも、属性の中は決められた書式で書く、という区別が重要です。
2:49時刻やタイムゾーンを含む場合は、特に書式をよく確認してから書きましょう。
2:55なお、月や日は二桁でそろえるのが基本です。
2:59一桁の数字をそのまま書くと、正しい書式として扱われない場合があるため、ゼロで埋めることを忘れないでください。
3:09記事の活用事例を見てみましょう。
3:11段落の中に、開催日という言葉に続けて、タイムタグが置かれています。
3:17タグの間には、二千二十六年十月一日と、日本語で読みやすい表記が書かれています。
3:24一方、デイトタイム属性には、二千二十六、ハイフン、十、ハイフン、ゼロ一という、
3:28機械向けの書式が入っています。
3:33ポイントは、意味は同じでも、相手に合わせて書き分けていることです。
3:38試すときは、保存して再読み込みし、表示が崩れていないかを確認してください。
3:45開発者ツールで要素を見ると、属性の値もあわせて確認できます。
3:50表示する文字は、読み手に合わせて工夫できます。
3:54たとえば、十月一日、木曜日、といった短い表示や、曜日を添えた表示でも構いません。
4:01大切なのは、タグの中の表示が省略されたり、言い換えられたりしても、デイトタイム属性には正確で完全な値が入っていることです。
4:12ただし、逆に表示と属性が食い違ってはいけません。
4:16表示では十月一日と言いながら、属性が九月三十日になっていては、読む人と機械で違う情報になってしまいます。
4:25表示を変えたら、属性も一緒に見直す、という意識を持ちましょう。
4:30たとえば、毎年恒例の行事のように、年を省略して伝えた方が自然な場面もあります。
4:37そういうときほど、属性側に完全な情報を残しておく価値が大きくなります。
4:43時刻を扱うときの注意です。
4:45日付だけなら大きな問題になりにくいですが、時刻を含む場合は、それがどの地域の時刻なのかが重要になります。
4:53たとえば夜七時半という時刻も、日本と海外では実際の瞬間が大きく異なります。
4:59そのため、必要に応じて、タイムゾーンのずれを示す情報を、時刻の後ろに続けて書く書式も用意されています。
5:06コード例のプラスゼロ九、ゼロゼロは、日本時間を示す書き方の一例です。
5:12オンライン開催や世界向けの案内では、表示にも日本時間と添えるなど、読み手が迷わない工夫をあわせて行いましょう。
5:20属性を確認します。
5:21タイムタグで中心になるのは、何といってもデイトタイム属性です。
5:26これが、機械が読める日時を指定する、タイムタグ専用の重要な属性です。
5:31そのほかは、ほかの要素でも使う共通のグローバル属性が利用できます。
5:36文書の中で一意な識別子のアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
5:40内容の言語を示すラングなどです。
5:45アプリ独自の値を保持するデータ属性も使えますが、秘密情報を置く場所ではありません。
5:51まずはデイトタイムを正確に書くことに集中してください。
5:55よくある間違いを三つ紹介します。
5:58一つ目は、画面の文字列だけを変更して、デイトタイム属性の日付が古いままになってしまうことです。
6:05記事でも特に注意されている失敗で、更新作業では必ず両方をセットで直しましょう。
6:12二つ目は、デイトタイム属性に、二千二十六年十月一日といった日本語の書式をそのまま書いてしまうことです。
6:20機械用の値は、決められた数字と記号の書式で書く必要があります。
6:25三つ目は、日時とは関係のない文章にまでタイムタグを使ってしまうことです。
6:31日付や時刻を表す内容のときだけ使うようにしましょう。
6:35ブラウザー互換性を確認します。
6:38記事が参照するエムディーエヌの記録では、タイムタグはクロームが六十二以降、
6:43エッジが十四以降、ファイアフォックスが二十二以降、サファリが七以降に対応しています。
6:49中心となるデイトタイム属性についても、同じ対応状況が示されています。
6:54現在の主要なブラウザーでは、安心して使える要素の一つだと言えます。
6:59ただし、この表が示すのは要素本体の対応です。
7:02検索エンジンや外部サービスが、その日時をどう活用するかは、各サービスの仕様にも左右される点は覚えておきましょう。
7:11最後に練習とまとめです。
7:13タイムタグは、日付や時刻を表し、人が読む表示と機械が読む値を両立させるタグでした。
7:19大切なポイントは三つです。
7:21一つ目は、タグの間には読みやすい表示を書き、デイトタイム属性には決められた書式で正確な値を書くこと。
7:29二つ目は、日付、時刻、日時で書式が違うので、目的に合った形を選ぶこと。
7:34三つ目は、表示を変更したら属性も一緒に見直し、食い違いを作らないことです。
7:40練習として、自分で作ったページの開催日や公開日に、タイムタグを付けてみてください。
7:46お疲れさまでした。
7:48次回もHTMLタグを一つずつ学んでいきましょう。
7:52確認のコツは、表示を声に出して読み、その日時と属性の値が頭の中で一致するかを照らし合わせることです。
7:59小さな習慣ですが、公開前のミスを減らせます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

timeタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。日付や時刻。datetime に機械が読み取れる値を指定します。

解説記事・サンプルコードを読む：HTMLのtimeタグとは？属性・使い方・ブラウザー互換性と活用例 →