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
|
---
title: id
slug: Web/HTML/Global_attributes/id
tags:
- Global attributes
- HTML
- Reference
- Web
- id
- グローバル属性
translation_of: Web/HTML/Global_attributes/id
---
<div>{{HTMLSidebar("Global_attributes")}}</div>
<p><span class="seoSummary"><strong><code>id</code> {{glossary("global attribute", "グローバル属性")}}</strong>は、文書全体で一意でなければならない識別子 (ID) を定義します。この属性の用途は、リンク (<a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment">フラグメント識別子</a>を使用)、スクリプト、スタイル ({{glossary("CSS")}} を使用) で要素を特定することです。</span></p>
<div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<div class="blockIndicator warning">
<p>この属性の値は不伝導性の文字列です。つまり、ウェブ作者は人間が理解するための情報を伝えるためにこの情報を使用するべきではありません (ただし、 ID を人間が理解できるようにすることは、コードを理解するために有用です。例えば、 <code>ticket-18659</code> と <code>r45tgfe-freds&$@</code> を比べてみてください)。</p>
</div>
<p><code>id</code> の値に{{glossary("whitespace", "ホワイトスペース")}}文字 (空白やタブなど) を含めてはいけません。ブラウザーはホワイトスペース文字を含む不適合な ID を、ホワイトスペース文字が ID の一部であるかのように扱います。空白区切りで並べた値を受け入れる {{htmlattrxref("class")}} 属性とは対照的に、要素は ID の値をひとつだけ持つことができます。</p>
<div class="note">
<p><strong>注:</strong> {{glossary("ASCII")}} 英文字、数字、<code>'_'</code>、<code>'-'</code>、<code>'.'</code> 以外の文字は HTML 4 で許容されていなかったため、使用した場合に互換性の問題を引き起こす可能性があります。この制約は {{glossary("HTML5")}} で外されましたが、互換性のために ID は文字で始めるようにしましょう。</p>
</div>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>{{SpecName('HTML WHATWG')}} のスナップショットであり、 {{SpecName('HTML5 W3C')}} から変更なし。</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>{{SpecName('HTML WHATWG')}} のスナップショットであり、先頭の文字以外で <code>'_'</code>、<code>'-'</code>、<code>'.'</code> が使用可能になった。また、真にグローバルな属性になった。</td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td>{{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}} を除くすべての要素で対応。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.global_attributes.id")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li>
<li>{{domxref("Element.id")}} は、この属性を反映します。</li>
</ul>
|
