blob: 2e7deda39e249cf58ffedf5aa694f636d0badc55 (
plain)
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
|
---
title: <time>
slug: Web/CSS/time
tags:
- CSS
- CSS Data Type
- CSS データ型
- Layout
- Reference
- Web
- ウェブ
- レイアウト
translation_of: Web/CSS/time
---
<div>{{CSSRef}}</div>
<p><strong><code><time></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、時間の値を秒単位またはミリ秒単位で表現します。これは {{cssxref("animation")}} や {{cssxref("transition")}} および関連するプロパティで使用されています。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<p><code><time></code> データ型は、 {{cssxref("<number>")}} の直後に下記の単位を続けます。省略可能ですが、その前に単一の <code>+</code> または <code>-</code> を付けることもあります。どの単位の場合も、単位と数字との間には空白を置きません。</p>
<div class="note">
<p><strong>メモ:</strong> 数値の <code>0</code> は単にに関わらず常に同じですが、単位は省略できません。言い換えれば、 <code>0</code> は無効であり、 <code>0s</code> または <code>0ms</code> を表すものではありません。</p>
</div>
<h3 id="Units" name="Units">単位</h3>
<dl>
<dt><strong><code id="s">s</code></strong></dt>
<dd>秒単位の時間を表します。例: <code>0s</code>, <code>1.5s</code>, <code>-60s</code></dd>
<dt><strong><code id="ms">ms</code></strong></dt>
<dd>ミリ秒単位の時間を表します。例: <code>0ms</code>, <code>150.25ms</code>, <code>-60000ms</code></dd>
</dl>
<div class="note">
<p><strong>メモ:</strong> <code>s</code> と <code>ms</code> の間の変換は、論理的に <code>1s</code> = <code>1000ms</code> となります。</p>
</div>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Valid_times" name="Valid_times">正しい時間</h3>
<pre>12s 正の整数
-456ms 負の整数
4.3ms 整数でない数値
14mS 単位では大文字小文字が区別されませんが、大文字は推奨されません。
+0s 先導する + と単位を伴うゼロです
-0ms 先導する - と単位を伴うゼロです
</pre>
<h3 id="Invalid_times" name="Invalid_times">正しくない時間</h3>
<pre>0 単位なしのゼロは <length> では使えますが、他のすべての単位では無効です。
12.0 これは <a title="CSS/number"><number></a> で <time> ではありません。単位が必須です。
7 ms <a title="CSS/number"><number></a> と単位の間に空白を置いてはいけません。
</pre>
<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('CSS4 Values','#time','<time>')}}</td>
<td>{{Spec2('CSS4 Values')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Values','#time','<time>')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td><code>s</code> と <code>ms</code> の正規の定義</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1','aural.html#times','<time>')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td><code>s</code> と <code>ms</code> の非公式な定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("css.types.time")}}</p>
|
