リファレンス

<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>に公開されます。

対応ブラウザ

関連するタグ

HTML タグ一覧はこちら

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
ABOUT ME
Sara
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました!
本格的に学びたい方へ

Code for Fun プログラミング講座

Code for Fun プログラミング講座では、プログラミングの基礎からアプリ開発まで学ぶことができます。

わかりやすく・シンプルをモットーに

  • 同じコードを書けば必ず完成できること
  • 専門用語を使いすぎないこと

を重視しています。

POINT 01

動くコード

プログラミングの文法だけを学んでも、そこから動くアプリを開発をするのは難しいです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなど「アプリとして機能するもの」を作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

分からないことがあっても、前のレッスンに戻ることができるので安心です。

お申し込みしたその日からからすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

0
この記事にコメントするx
記事URLをコピーしました