delタグ 削除されたテキストを表す

HTMLの<del>デリートタグは、文書から削除されたテキストを表します。「del」は「delete（削除の意味）」の略です。

<p>会員登録をします。<del>次にメール認証を行います。</del></p>

ニュースやブログ投稿などの文章に用いることで、読者やプログラム（例：検索エンジンのクローラー）に対して「この部分が削除されたよ」と明確に伝えることができます。

このページの目次

• delタグの使い方
  • delには取り消し線が表示される
  • 取り消し線を表示したいだけであればCSSを使う
  • 1つの段落をdelタグで囲んでも良い
  • リストで使う例
  • insタグと合わせて「変更」を表現する
  • datetime属性で削除した日付を表す
  • cite属性で関連リンクを指定する
  • 取り消し線の色を変更する方法

delタグの使い方

「<del>なんて使わず、デリートキーでまるっと消してしまえば良いんじゃないの？」と思うかもしれません。<del>は「削除した」ことをあえて伝えたい場合に使います。

delには取り消し線が表示される

主要ブラウザでは、<del>内のテキストには取り消し線（打ち消し線）が表示されます。これは以下のようなCSSが指定されているためです。

ブラウザのデフォルトCSS

del { 
  text-decoration: line-through;
}

取り消し線を表示したいだけであればCSSを使う

<del>は（内容的に）文書から削除されたテキストに対してのみ使います。単に取り消し線をひきたいだけなら、CSSを使います。

<p>ただ<span class="line-through">取り消し線</span>を引く</p>
<p class="line-through">ただ取り消し線を引く</p>

.line-through {
  text-decoration: line-through;
}

👆たとえばCSSでline-throughというclassには取り消し線を引くように設定しておきます。あとはHTMLで取り消し線を引きたい場所にそのclassを指定すればOKです。

1つの段落をdelタグで囲んでも良い

<del><p>Amazon.comはオンラインの書店です。</p></del>

👆段落ごと消去されたことを表すために、<p>を<del>でマークアップしてもOKです。

<!-- 🙅不適切な例 -->
<del>
  <p>Amazon.comはオンラインの書店です。</p>
  <p>Amazon.comはWebでのみ使用できます。</p>
</del>

<!-- 🙆段落ごとにdelを使う -->
<del><p>Amazon.comはオンラインの書店です。</p></del>
<del><p>Amazon.comはWebでのみ使用できます。</p></del>

👆ただし、仕様書には「段落の境界をまたいではいけない」と書かれています。複数の段落が削除されたことを表したいときは1つの段落ごとに<del>を使うようにしましょう。

リストで使う例

<del>は段落以外でも使うことができます。

<h2>買い物リスト</h2>
<ul>
 <li>たまご</li>
 <li><del>うどん</del></li>
 <li><del>とうもろこし</del></li>
 <li>はくさい</li>
</ul>

👆たとえば買い物リストやToDoリストで<del>を使えば「すでに買った」「すでに終えた」といったニュアンスを表現できます。

insタグと合わせて「変更」を表現する

✍️insタグは追記を表す

<del>とは反対に「insert（挿入）」の意味を持つ<ins>というHTMLタグもあります。<ins>は文書に追加されたテキストを表します。

関連するページを読む

insタグの使い方 - HTML

<p>Amazon.comは
  <del>オンラインの書店</del>
  <ins>世界最大級のネット通販サイト</ins>
  です。</p>

👆追記を意味する<ins>と合わせて使うことで「削除して追記」つまり変更や修正を表すことができます。

datetime属性で削除した日付を表す

<del>タグにdatetimeを指定すると「テキストを削除した日」を指定することができます。

<p>Amazon.comは<del datetime="2020-01-28">オンラインの書店</del>です。</p>

👆「このテキストは2020年1月28日に削除された」と分かります。この日付はブラウザの画面に直接表示されるものではありません（＝読者が見るものではありません）。基本的には「自分や共同編集者が後から見たときに、いつ編集されたか分かるようにするため」に指定します。

cite属性で関連リンクを指定する

<del>タグのcite属性には「その削除に関するリンク（URL）」を指定することができます。「なぜ削除したのか」などの編集の意図が詳しく書かれたページのURLを貼るイメージです。

<p>Amazon.comは<del cite="https://example.com/logs/edit/">オンラインの書店</del>です。</p>

こちらもブラウザの画面には表示されません。自分が後から見たときに分かりやすいように記入するものです（もちろん必要な場合にのみ指定すればOKです）。

取り消し線の色を変更する方法

ちなみに取り消し線の色を変更したいという場合には、少し面倒な指定が必要になります。

👇まずCSSで色の指定を行っておきます。delのcolorプロパティで取り消し線の色を、delの中のspanに対して文字色を指定する形になります。

del {
  color: #1da1ff; /* 打ち消し線の色 */
}
del span {
  color: #000; /* 文字色 */
}

👇HTMLで<del>を使うときに、中に<span>タグを含めるようにします。

<p>Amazon.comは<del><span>オンラインの書店</span></del>です。</p>

👇すると以下のように、取り消し線と文字色を別にすることができます。

<p>Amazon.comは<del><span>オンラインの書店</span></del>です。</p>

del {
  color: #1da1ff; /* 打ち消し線の色 */
}
del span {
  color: #000; /* 文字色 */
}