<time>要素の使い方・サンプルコード
Sara
<time>
<time>要素は、西暦や24時間表記で正確な日付を示します。
属性
datetime
datetime 属性の値は、検索エンジンなどコンピュータで読み取れる形式にするため
- 24時間表記
- グレゴリオ暦（西暦）
- ローカル日時
- グローバル日時
などで正確に記述する必要があります。
＊datetime 属性は必ず指定する必要はありません
datetime 属性に指定する値と time 要素に書くテキストが同じ場合は、datetime 属性は不要です。
例）<time>2020-01-05</time>
表示するテキストが「2020年1月5日」のようにコンピュータが読み取れない文字列の場合は datetime 属性を指定します。
例）<time datetime=”2020-01-05″>2020年1月5日</time>
日付の記述例
| 例 | 表記方法 | |
|---|---|---|
| 年 | 2020年 | 2020 |
| 年月 | 2020年1月 | 2020-01 |
| 年月日 | 2020年1月5日 | 2020-01-05 |
| ●●●●年 第●週 | 2020年 第24週 | 2020-W24 |
| 時分 | 16時25分 | 16:25 |
| 時分秒 | 16時25分53秒 | 16:25:53 |
| ローカル日時 | 2020年1月5日 16時25分 | 2020-01-05T16:25 |
| グローバル日時 | 2020年1月5日 16時25分 | 2020-01-05T16:25+9:00 |
| 期間 | 1週間と2日と3時間45分6秒 | 1w 2d 3h 45m 6s *1 |
| P9DT3H45M6S *2 |
*1 w(週)、d（日）、h（時）、m（分）、s（秒）
*2 P + 日数（1週間と2日なので9）+ D + T + 時間 + H + 分 + M + 秒 + S
グローバル日時の書き方
例）日本時間2020年1月5日16時25分53秒
Step1：年月日を書く → 2020-01-05
Step2：時分秒を書く → 16:25:53
Step3：年月日と時分秒を T で繋ぐ → 2020-01-05T16:25:53
Step4：UTC（協定世界時）とJST（日本標準時）の時差が 9 時間なので +9:00 を付ける
完成）2020-01-05T16:25:53+09:00
グローバル属性
全ての HTML 要素に共通して使用できるグローバル属性はこちら
使用例
例① datetime 属性を使わない場合
この映画は<time>2020-03-15</time>に公開されます。例② datetime 属性を使う場合
この映画は<time datetime="2020-03-15T10:00">2020年3月15日</time>に公開されます。対応ブラウザ
関連するタグ
- <data>：読み取り可能なデータ
Subscribe
0 Comments
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
>> 詳しいプロフィールはこちら
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
>> 詳しいプロフィールはこちら
