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
|
---
title: '<del>: 削除文字列要素'
slug: Web/HTML/Element/del
tags:
- HTML
- HTML 編集
- 'HTML:フローコンテンツ'
- 'HTML:記述コンテンツ'
- Reference
- Web
- 削除文字列
- 要素
translation_of: Web/HTML/Element/del
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML の <code><del></code> 要素</strong>は、文書から削除された文字列の範囲を表します。</span>これは例えば、「変更の追跡」や、ソースコードの差分情報を描画するときに使用することができます。 {{HTMLElement("ins")}} 要素は逆の目的に、文書に追加された文字列を示すために用いることができます。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<p>一般的にこの要素は (必ずではありませんが) 打ち消し線のスタイルを伴って描画されます。</p>
<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#Phrasing_content">記述コンテンツ</a> または <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td>
</tr>
<tr>
<th scope="row">許可されている内容</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Transparent_content_model">透過的コンテンツ</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>すべて</td>
</tr>
<tr>
<th scope="row">DOM インターフェイス</th>
<td>{{domxref("HTMLModElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>を持ちます。</p>
<dl>
<dt>{{htmlattrdef("cite")}}</dt>
<dd>変更についての説明を記したリソース（例えば、議事録など）への URI を示す。</dd>
<dt>{{htmlattrdef("datetime")}}</dt>
<dd>この属性は変更日時を示し、有効な日付文字列と任意の時刻文字列でなくてはなりません。値を時刻および日付の文字列として解釈できない場合は、要素に関連付けられたタイムスタンプはないものと解釈されます。日付のない文字列の書式については、<a href="/ja/docs/Web/HTML/Date_and_time_formats#Date_strings">日付の文字列</a>を参照してください。日付と時刻の両方を含んだ文字列の書式は、<a href="/ja/docs/Web/HTML/Date_and_time_formats#Local_date_and_time_strings">地方時の日付と時刻の文字列</a>にあります。</dd>
</dl>
<h2 id="Examples" name="Examples">例</h2>
<pre class="brush: html"><p><del>This text has been deleted</del>,
here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del></pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{EmbedLiveSample("Examples")}}</p>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
<p><code>del</code> 要素が存在することは、多くの読み上げ技術の既定の設定ではアナウンスされません。 CSS の {{cssxref("::before")}} 及び {{cssxref("::after")}} 疑似要素と共に {{cssxref("content")}} プロパティを使うことでアナウンスさせることができます。</p>
<pre>del::before,
del::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
del::before {
content: " [削除開始] ";
}
del::after {
content: " [削除終了] ";
}
</pre>
<p>読み上げソフトを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが削除されていることを知らないと理解に影響するような場面でのみ使用するようにしてください。</p>
<ul>
<li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li>
<li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li>
</ul>
<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', 'edits.html#the-del-element', '<del>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '<del>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<del>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("html.elements.del")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>テキストへの挿入を示す {{HTMLElement("ins")}} 要素</li>
<li>
<p>テキストの削除とは異なる抹消を表すための {{HTMLElement("s")}} 要素</p>
</li>
</ul>
|
