HTMLで正しく打ち消し線を引く方法4つをわかりやすく解説

HTMLにおける打ち消し線とは修正などの目的で、テキストの中心を貫くように横向きに引く線のことです。

日々更新されていくWebサイトでは、古くなった情報を訂正し、新しい情報に書き換えるということがよくあります。

一時的な変更の際に、元の情報も残しておくというケースも少なくありません。

そうしたときに、使用するのが打ち消し線です。

正確ではないテキストに適用すれば、訂正されているということを伝えられます。

htmlで打ち消し線を引くにはいくつかの方法があり、中には正しくないものも存在します。

広く知られている方法をまとめたので、ぜひ参考にしてください。

sタグを使う

sは「strike-through（取り消し線）」を意味します。

HTML
<p>テキスト<s>テキスト</s>テキスト</p>

strikeタグと同様、テキストをタグで囲うことで打ち消し線を引くことが可能です。

このタグはHTML5でも使用可能です。

HTML4.01では、単に打ち消し線を引くという見た目だけの役割でした。

しかし、HTML5では「正確ではなくなった、あるいは関係なくなった」という文法上の意味を持つようになっています。

delタグを使う

delは「delete（削除する）」の略です。

HTML
<p>テキスト<delete>テキスト</delete>テキスト</p>

strikeタグ、sタグと同様、テキストをタグで囲うことで打ち消し線を引けます。

その名の通り、削除された部分であるということを示すタグです。

訂正の意味合いが強いsタグとは、文法上の役割が若干異なります。

delタグの属性

delタグには、削除についての詳しい情報示す属性があります。

datetime（日付）

内容を削除した日付を示す属性です。

HTML
<p>テキスト<del datetime="2020-10-10">テキスト</delete>テキスト</p>

この日付は閲覧者には見えませんが、検索エンジンには削除された日付を伝えられるので、SEO上の意味を持っています。

また、いつ編集したのかが明確に残るので情報の管理もしやすくなるでしょう。

cite（関連リンク）

情報の引用元を示す属性です。

HTML
<p>テキスト<dell cite="URL">テキスト</delete>テキスト</p>

このようにURLを記述します。

これも閲覧者には見えませんが、検索エンジンには情報源を伝えられるし、後から確認する際にも便利です。

delタグとセットで使用するinsタグ

delタグは内容を削除し、insタグは追記を行います。

つまり、この2つをセットで使用することで情報の修正、変更ができるということです。

HTML
<p>テキスト<dell>削除する内容</delete><ins>追加する内容</ins>テキスト</p>

このようにdelタグの内容の代わりに追加するテキストに使用します。

CSSを使う

文法上の意味を持たせることなく、打ち消し線だけを引きたい場合は、cssを使います。

HTML
<p>テキスト<span>テキスト</span>テキスト</p>

まずは打ち消し線を引きたい箇所を文法上の意味を持たず、デフォルトでは表示上も変化のないspanタグで囲ってください。

spanタグにCSSを指定します。

CSS
span {
text-decoration:line-through;
}

text-decorationはテキストに線の装飾をつけるプロパティで、line-throughが打ち消し線です。

線のデザインの変更

text-decorationで引かれた線は、デザインの変更もできます。

CSS
span {
text-decoration:line-through;
text-decoration-color:#ff0000;/*線の色を指定*/
text-decoration-style:double;/*線のスタイルを指定*/
}

text-decoration-colorは線の色を指定するプロパティで、テキストの色はそのままで線の色だけを変更できます。

text-decoration-styleは線のスタイルを変更するプロパティです。doubleは二重線になります。text-decoration-styleには以下のような値があります。

これらのプロパティは、先に紹介した打ち消し線を引くタグにも適用可能です。

strikeタグを使う（非推奨）

strikeとは「strike-through（削除する）」の略です。

HTML
<p>テキスト<strike>テキスト</strike>テキスト</p>

このようにテキストをタグで囲うと、打ち消し線が引かれます。

とても簡単な方法ですが、HTML5では廃止されています。

現状では多くのブラウザで打ち消し線が表示されますが、いずれは対応しなくなってしまうかもしれないので、使用は避けた方がよいでしょう。

まとめ

htmlで打ち消し線を引くにはいくつかの方法がありますが、意味合いはそれぞれ異なります。

訂正のsタグ、削除のdelタグ、文法上の意味はないcss。

どんな目的で打ち消し線を引くのか考え、適切な方法を選んでください。