HTML 取り消し線 タグの使い方を完全整理【正しい書き方と注意点がすぐわかる】

HTMLで取り消し線を付けたいとき、どのタグを使えばよいのか迷う方は少なくありません。
以前よく見かけた書き方と、現在推奨される書き方が異なるため、古い情報をそのまま使うと意味やSEOの面で不安が残ることもあります。

この記事では、HTMLの取り消し線タグの基本から、delタグとsタグの違い、CSSでの装飾方法、実務での使い分けまでを整理して解説します。
コピペしやすいサンプルも交えながら、初心者にもわかりやすく、制作や更新作業ですぐ使える形でまとめています。

HTML 取り消し線 タグの基本と最初に知るべきポイント

HTMLで取り消し線を表現したい場合、まず理解しておきたいのは、見た目の装飾と文章の意味は分けて考えるべきという点です。
取り消し線は単に文字の上に線を引くだけではなく、そのテキストが修正済みなのか、無効になった情報なのか、あるいは参考として残しているだけなのかによって適切な記述が変わります。

現在のHTMLでは、取り消し線に関連する要素として主にdelタグとsタグが使われます。
一方で、以前使われることがあったstrikeタグは現在の標準的な書き方では推奨されません。意味を正しく伝えたいページでは、何となく古いコードを流用するのではなく、用途に合ったタグを選ぶことが重要です。

取り消し線は何のために使うのか

取り消し線は、内容が削除されたことや、現在は有効ではない情報であることを視覚的に示すために使われます。
たとえば、価格改定前の金額、修正前の文言、終了したキャンペーン情報などでよく利用されます。

ただし、すべての取り消し線が同じ意味を持つわけではありません。
実際の更新履歴として削除された内容ならdelタグが向いていますし、もはや正確ではないが参考として残したい文ならsタグが適しています。見た目が似ていても意味は異なるため、検索エンジンや支援技術に配慮するなら、ここを正確に使い分けることが大切です。

現在よく使われるタグの種類

HTMLで取り消し線を表現する方法は主に次の3つの観点で整理できます。

つまり、単純に線を引くことだけを目的にせず、その文字列にどんな意味を持たせたいかから選ぶと失敗しにくくなります。

取り消し線に使うHTMLタグの違いと使い分け

HTMLで取り消し線を扱う際に最も重要なのが、delタグとsタグの違いを理解することです。
どちらもブラウザ上では似た表示になることがありますが、文書構造としての意味は異なります。見た目だけで判断すると、後から内容を修正した際に整合性が取りづらくなる場合があります。

また、過去の情報を参考にしているとstrikeタグを見かけることがありますが、現在は積極的に採用する理由はほとんどありません。保守性や可読性、意味の明確さを重視するなら、最新の考え方に合わせて実装するのが安心です。

delタグは削除された内容を示す

delタグは、そのテキストが文書の中で削除された内容であることを示します。
たとえば、仕様変更によって説明文の一部が不要になった場合や、改定前の価格を履歴として残したい場合に適しています。

サンプルは次のようになります。

このように書くことで、取り消された内容であるという意味をHTML自体に持たせられます。
情報更新を明確に示したい場面では、非常に相性のよいタグです。

sタグは現在は正確でない内容を示す

sタグは、その内容がもはや正確ではない、あるいは有効ではないことを示す要素です。
完全に削除されたというより、過去の情報として残しておきたいケースに向いています。

たとえば、終了した受付期間や販売終了商品などを示すときに自然です。

delタグよりも履歴性は弱く、現在無効であることの表示に重点があります。
意味の違いを意識すると、コンテンツの整理がしやすくなります。

strikeタグが推奨されにくい理由

strikeタグは古いHTMLで使われていた取り消し線用のタグですが、現在の標準的な制作では推奨されません。
理由は、文書にどんな意味があるのかを十分に表現しにくく、より適切な要素としてdelタグやsタグが用意されているためです。

古いテンプレートや過去記事のHTMLを編集していると見つかることがありますが、新規作成であえて採用する必要はほとんどありません。
修正する余裕があるなら、用途に応じてdelタグまたはsタグへ置き換えると、コードの意図が伝わりやすくなります。

CSSで取り消し線を付ける方法とHTMLタグとの関係

取り消し線はHTMLタグだけでなく、CSSでも表現できます。代表的なのはtext-decorationプロパティを使う方法です。
この方法は見た目の調整に強く、色や線種のコントロールもしやすいため、デザイン面を重視する場面で便利です。

ただし、CSSはあくまで装飾です。
そのため、内容の削除や無効化といった意味まで伝えたいなら、delタグやsタグをベースにしたうえでCSSを重ねるのが理想です。見た目だけを優先してspanタグに線を引く方法もありますが、意味づけが必要な本文では慎重に使うべきです。

text-decorationで指定する基本形

CSSで取り消し線を付ける基本形は、text-decoration: line-through; です。
たとえば、任意の文字列にだけ線を引きたい場合は次のように書けます。

この方法は、意味づけを必要としない演出には便利です。
一方で、文書として削除を示したいなら、delタグやsタグのほうが適切です。つまり、CSSは単独で使うより、HTMLの意味を補強する形で使うと整合性が取りやすくなります。

見た目を調整したいときの実践例

CSSを併用すると、取り消し線の色や文字色を調整して視認性を高められます。
たとえば、旧価格を薄いグレーで表示し、新価格を目立たせると、読み手にとって理解しやすいレイアウトになります。

このように、意味はHTMLで持たせ、見た目はCSSで整えると、検索エンジンにも読者にもわかりやすい構成になります。
WordPressのテキストエディターでも扱いやすい方法です。

HTMLの取り消し線タグを使うときの注意点と実務のコツ

取り消し線は便利ですが、多用するとかえって読みづらくなります。
特にスマホでは、長い文章全体に線が入ると視認性が落ちやすく、重要な情報が伝わりにくくなります。そのため、取り消し線は短い語句や旧情報の一部に絞って使うのが実務的です。

また、SEOの観点でも、重要な本文全体を取り消すような使い方は避けたほうが無難です。不要になったテキストを大量に残すより、必要な情報へ整理し直したほうが、ページ全体の品質を保ちやすくなります。取り消し線は補助的な表現として考えるとバランスが良くなります。

価格表示や修正履歴での使い方

実務で取り消し線が最も活躍しやすいのは、価格変更や内容更新の場面です。
旧価格をdelタグで示し、その直後に新価格を強調表示すると、読み手は変更内容をひと目で理解できます。

また、文章の修正点を見せたい場合にも有効です。
ただし、修正履歴を本文に大量に残すと情報が散らかるため、公開ページでは必要最小限にとどめるのが基本です。読みやすさを優先しつつ、必要な変更だけを見せる設計が重要です。

アクセシビリティと読みやすさへの配慮

取り消し線は視覚的に意味を伝えやすい一方で、すべての利用者に同じように伝わるとは限りません。
そのため、重要な変更点は取り消し線だけに頼らず、終了しました、改定しました、旧価格ですといった補足テキストを添えるのがおすすめです。

さらに、線の色を薄くしすぎると見えづらくなるため、背景とのコントラストにも配慮が必要です。
スマホ中心の閲覧環境では、装飾よりも理解のしやすさが優先されます。見た目を整えつつ、意味が明確に伝わる書き方を心がけると、実用性の高いページになります。

まとめ

HTMLで取り消し線を付けるときは、単に線を引くのではなく、そのテキストがどんな状態なのかを意識してタグを選ぶことが大切です。
削除された内容ならdelタグ、現在は正確でない情報ならsタグ、見た目だけ調整したいならCSSという整理で考えると、迷いにくくなります。

特に実務では、意味はHTMLで表現し、見た目はCSSで整えるという考え方が有効です。
古いstrikeタグは新規実装で無理に使う必要はありません。取り消し線を適切に使えば、価格改定や修正内容の表示がわかりやすくなり、読者にとっても親切なページに仕上がります。

迷ったときは、まずその文字列が削除なのか、無効情報なのかを判断してからタグを選んでみてください。
それだけで、HTMLの取り消し線タグはぐっと使いやすくなります。