完全無料!授業料0円のプログラミング教室特集はこちら

【delタグとは】取り消し線を引くためのhtmlタグを解説

【delタグとは】取り消し線を引くためのhtmlタグを解説

自分のページに掲載した古い情報を削除したい。

こんなときは、ただ書き換えれば良いのかな?

それとも、「変更しました」っていうのを伝えたほうが良い?

 

こんなお悩みに答えます。

結論から言って、HTMLで情報を削除したことを伝えたければ、<del>というタグを使いましょう。

本記事にて、<del>の使い方を完結に解説します。

 

スポンサードサーチ

delタグとは

delタグとは

<del>は「delete(デリート)」の略でして、その意味通り、削除したい内容を示すときに使われるHTMLタグです。

読み方は“デルタグ”になります。

 

delタグの目的

<del>は削除した部分であることを示すために使います。

結果として、<del></del>で囲った部分には、取り消し線が引かれます。

 

delタグの使い方

<del>の使い方は簡単です。

 

delタグの使い方

<p>今は<del>平成</del>です。</p>

今は平成です。

 

こんな感じで、<del>で囲った部分に取り消し線が引かれます。

 

上記サンプルでは<p>の一部を<del>で囲っていますが、<p>を丸々囲むことも可能です。

 

pタグをまるっと囲む

<del><p>今は平成です。</p></del>

今は平成です。

 

この場合の注意点としては、“複数の<p>はまとめて囲めない”というところ。

2個以上の段落に取り消し線を引きたいのであれば、それぞれの段落を<del>で囲みましょう。

 

delタグ使用上の注意点

繰り返しになりますが、<del>は、その部分の情報を削除したことを示すときにのみ使用します。

単純に“取り消し線を引きたい”というデザイン目的の使用はNGなので注意しましょう。

線を引きたいだけなら、<span>で囲い、CSSでカスタマイズしてください。

 

デザイン目的の取り消し線を引く

HTML

<p>ここに<span class="line-through">打ち消し線</span>を引きます。</p>
CSS

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

 

delタグの詳細設定

<del>には属性を追加することで、打ち消し内容の詳細を設定することが可能です。

ちなみに、これらの属性追加により、ブラウザ上の見た目に変化はありません。あくまでも検索エンジンのクローラーに対しての情報提示が目的です。

属性の記載は必須ではありません。必要だと思ったら使いましょう。

 

取り消し日時を指定する

その情報がいつ削除されたのかを示すためには、datetimeという属性を指定します。

 

datetimeで日時指定

<p>今は<del datetime="2019-05-01">平成</del>です。</p>

 

令和に変わったのは、2019年5月1日なので、その日付を入れると上記のようになりますね。

日付は「-(ハイフン)」で指定し、時間まで指定したければ「:(コロン)」を使えばOKです。

 

引用元の情報を記載する

その情報が削除された理由を示す関連リンクを指定したい場合は、cite属性を使いましょう。

 

citeで関連リンク指定

<p>今は<del cite="https://ja.wikipedia.org/wiki/reiwa">平成</del>です。</p>

 

これで、この情報が削除された理由を示す関連リンクを結びつけることが可能になります。

 

スポンサードサーチ

まとめ:情報を削除したらdelタグを使おう

まとめ

本記事は以上になります。

<del>は削除したい内容を示すときに便利なタグです。

<del>を使って、検索エンジンに“ここを削除したよ”というのを適切に伝えることを心がけましょう。

おわり。