1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
---
title: <time>
slug: Web/HTML/Element/time
tags:
- Element
- HTML
- HTML text-level semantics
- HTML5
- 'HTML:Flow content'
- 'HTML:Palpable Content'
- 'HTML:Phrasing content'
- Reference
- Web
translation_of: Web/HTML/Element/time
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary">HTML の <strong><code><time></code> 要素</strong>は、特定の時の区間を表します。</span> <code>datetime</code> 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。</p>
<p>次のうちの一つを表します。</p>
<ul>
<li>24時間制の時刻</li>
<li>{{interwiki("wikipedia", "グレゴリオ暦")}}の正確な日付 (時刻やタイムゾーンを伴うことも可能)</li>
<li><a href="https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html#valid-duration-string">妥当な期間</a></li>
</ul>
<div>{{EmbedInteractiveExample("pages/tabbed/time.html", "tabbed-shorter")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td>
</tr>
<tr>
<th scope="row">許可されている内容</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td>
</tr>
<tr>
<th scope="row">タグの省略</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">許可されている親要素</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td>
</tr>
<tr>
<th scope="row">暗黙の ARIA ロール</th>
<td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
</tr>
<tr>
<th scope="row">許可されている ARIA ロール</th>
<td>すべて</td>
</tr>
<tr>
<th scope="row">DOM インターフェイス</th>
<td>{{domxref("HTMLTimeElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>他のすべての HTML 要素と同様に、この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>に対応しています。</p>
<dl>
<dt>{{htmlattrdef("datetime")}}</dt>
<dd>この属性は要素の日付や時刻を表し、下記に示す書式のうちの一つでなければなりません。</dd>
</dl>
<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>
<p>この要素は、機械可読な形式で日付や時刻を表現するためのものです。例えばユーザーエージェントが、ユーザーのカレンダーにイベントの予定情報を提供することに役立てることができます。</p>
<p>この要素はグレゴリオ暦導入前の日付に対して使用するべきではありません (日付の計算で混乱するため)。</p>
<p><dfn>datetime 値</dfn> (機械可読な日時の値) は要素の <code>datetime</code> 属性の値であり、正しい書式 (下記参照) でなければなりません。要素に <code>datetime</code> 属性がない場合、<strong>子孫要素を持ってはならず</strong>、 <dfn>datetime 値</dfn>が要素のテキストの内容になります。</p>
<h3 id="Valid_datetime_Values" name="Valid_datetime_Values">妥当な datetime 値</h3>
<dl>
<dt>妥当な年の文字列</dt>
<dd><code>2011</code></dd>
<dt>妥当な月の文字列</dt>
<dd><code>2011-11</code></dd>
<dt>妥当な日付の文字列</dt>
<dd><code>2011-11-18</code></dd>
<dt>年のない妥当な日付の文字列</dt>
<dd><code>11-18</code></dd>
<dt>妥当な週の文字列</dt>
<dd><code>2011-W47</code></dd>
<dt>妥当な時刻の文字列</dt>
<dd><code>14:54</code></dd>
<dd><code>14:54:39</code></dd>
<dd><code>14:54:39.929</code></dd>
<dt>妥当なローカル日時の文字列</dt>
<dd><code>2011-11-18T14:54:39.929</code></dd>
<dd><code>2011-11-18 14:54:39.929</code></dd>
<dt>妥当なグローバル日時の文字列</dt>
<dd><code>2011-11-18T14:54:39.929Z</code></dd>
<dd><code>2011-11-18T14:54:39.929-0400</code></dd>
<dd><code>2011-11-18T14:54:39.929-04:00</code></dd>
<dd><code>2011-11-18 14:54:39.929Z</code></dd>
<dd><code>2011-11-18 14:54:39.929-0400</code></dd>
<dd><code>2011-11-18 14:54:39.929-04:00</code></dd>
<dt>妥当な期間の文字列</dt>
<dd><code>PT4H18M3S</code></dd>
</dl>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Simple_example" name="Simple_example">単純な例</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><p>コンサートは<time datetime="2018-07-07T20:00:00">20:00</time>に始まります。</p>
</pre>
<h4 id="Output" name="Output">結果</h4>
<p>{{EmbedLiveSample('Simple_example', 250, 60)}}</p>
<h3 id="Datetime_example" name="Datetime_example"><code>datetime</code> の例</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><p>コンサートは<time
datetime="2001-05-15T19:00">5月15日</time>に開催されます。</p>
</pre>
<h4 id="Output_2" name="Output_2">結果</h4>
<p>{{EmbedLiveSample('Datetime_example', 250, 60)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-time-element', '<time>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>{{SpecName('HTML5.1')}} から変更なし</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'textlevel-semantics.html#the-time-element', '<time>')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>{{SpecName('HTML5 W3C')}} から変更なし</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-time-element', '<time>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.elements.time")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{HTMLElement("data")}} 要素では、他の種類の値を示すことが可能です。</li>
</ul>
|
