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

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

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

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

delタグの使い方

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

😺「削除する前はこうだった」と残すことで、より正確に内容が伝えられる場合に使いましょう。

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

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

ブラウザのデフォルトCSS
del { 
  text-decoration: line-through;
}

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

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

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

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

😺「削除したテキスト」を表すためにdelタグを使った結果、取り消し線が引かれてユーザーも分かりやすい…というのが理想的です。

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>は文書に追加されたテキストを表します。

<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日に削除された」と分かります。この日付はブラウザの画面に直接表示されるものではありません(=読者が見るものではありません)。基本的には「自分や共同編集者が後から見たときに、いつ編集されたか分かるようにするため」に指定します。

😺場合によっては検索エンジンのクローラーなどのプログラムがdatetimeの日付を参考にする可能性があります。
😺もちろん必須ではありません。

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

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

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

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

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

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

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

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

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

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

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

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

😿疑似要素を使って簡単にできないか試みたのですが無理でした…