HTMLで取消線を表示するタグと使い方｜との違いからCSSカスタマイズまで解説

「古い情報を見せたい」「セールの価格をわかりやすくしたい」そんなときに取り消し線があると、とても便利ですよね。

でも、<s>タグや<del>タグ、CSSの使い方など、どれを使えばいいのか迷ってしまうこともあると思います。

そこで今回は、HTMLで取り消し線を表示するタグとその使い方について、わかりやすく解説していきます。

タグごとの違いや、CSSでのカスタマイズ方法、さらに注意点まで詳しく紹介します。

取り消し線の使い方が分かれば、見た目も意味も伝わるページ作りができるようになりますので、ぜひ最後まで読んで参考にしてみてください。

HTMLで取消線を表示する基本タグとは？

取り消し線に使えるHTMLタグの種類

HTMLで取り消し線を表示するには、いくつかのタグを使う方法があります。

それぞれに意味や使い方が異なるため、正しく理解することが大切です。

主に使われるタグは次の通りです。

どのタグも取り消し線を表示しますが、意味が違うので使い分けが必要です。

特に意味を伝える必要がある場合は<del>を使うとよいでしょう。

<s>タグの使い方と意味

<s>タグは、情報がもう正しくないことを視覚的に示すときに使います。

たとえば、古い価格を見せたいときなどに使われます。

意味としては削除ではなく、「もう有効ではない」というニュアンスを含みます。

使用例は次の通りです。

<p>通常価格：<s>5,000円</s> 特別価格：3,000円</p>

このタグは内容の意味までは変えないので、SEOへの影響は少ないとされています。

見た目だけを変える時に使うのがポイントです。

<del>タグとの違いと使い分け

<del>タグは、文章の変更履歴や削除を意味する明確な意味づけがあるタグです。

文章の中で「この部分を削除した」とはっきり伝えたい場合に使います。

以下のように使います。

<p><del>この部分は削除されました</del></p>

<s>タグとの主な違いをまとめると以下のようになります。

意味を持たせたいときは<del>を選ぶのが正解です。

<strike>タグは非推奨？その理由

<strike>タグは、昔はよく使われていましたが、現在はHTML5で非推奨（obsolete）となっています。

その理由は、意味があいまいで、視覚的な変化のみを目的としていたためです。

このタグを使うと、次のように表示されます。

<p><strike>このテキストは古い</strike></p>

しかし、現在では次のような理由で使わないことが推奨されています。

これからは<strike>は使わず、<s>や<del>を使うことがベストです。

タグを使った基本的な記述例

HTMLで取り消し線を入れたい時には、タグを正しく記述する必要があります。

ここでは代表的な使い方を3つ紹介します。

それぞれの使い方を理解して、意味に合わせて適切なタグを選ぶことが重要です。

ブラウザごとの表示の違い

ほとんどのブラウザでは、<s>や<del>タグで取り消し線が正しく表示されますが、一部の古いブラウザでは挙動が異なる場合があります。

確認しておきたい主なポイントは以下の通りです。

どのタグも表示確認は必ず実機で行うことをおすすめします。

これにより、ユーザー体験を損なわずに済みます。

CSSを使って取消線をカスタマイズする方法

text-decorationを使ったスタイルの設定

HTMLタグだけで取り消し線を表示できますが、見た目をもっと自由に変えたいときにはCSSを使います。

その中でも一番基本的なのが、text-decorationプロパティです。

このプロパティを使えば、文字に線を引いたり装飾を加えることができます。

以下のように指定すると、取り消し線を表示できます。

text-decoration: line-through;

取り消し線をCSSで設定する方法にはいくつかの書き方があります。

線の色や形もCSSで細かく変えることができるのが魅力です。

特に強調したい場合には、赤色の波線なども使えます。

class属性を使ったカスタマイズ

CSSで取り消し線をよく使う場合は、class属性を使うと便利です。

毎回同じスタイルを書く必要がなく、HTMLの中がスッキリします。

まずCSSでクラスを定義します。


.strike {
text-decoration: line-through;
color: gray;
}


次にHTMLでそのクラスを呼び出します。


<span class="strike">旧価格：5,000円</span>


クラスを使うと次のようなメリットがあります。

クラスを使うことで、管理しやすく、変更にも強いコードになります。

hoverやactiveで取消線を動的に表示

CSSを使えば、マウスを乗せたときだけ取り消し線を表示するなどの動きも加えることができます。

こうした「動的な効果」は、ユーザーに直感的な操作感を与えます。

たとえば次のように書くと、マウスを乗せたときにだけ線が出ます。


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


このような設定ができるのは以下のタイミングです。

使うタイミングに応じて、見せ方を変えられるのが大きなメリットです。

ただし使いすぎるとユーザーが混乱するので注意しましょう。

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

CSSでは取り消し線の色や太さも自由に変えることができます。

これによって、より目立たせたり、デザインの一部として取り消し線を使ったりできます。

下の例は、線の色とスタイルを指定した書き方です。


.strike-custom {
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: double;
}


よく使われる装飾の種類は以下の通りです。

太さは直接設定できないため、擬似要素などを使って工夫する必要があります。

でも初心者のうちは色とスタイルを変えるだけでも十分に目立たせることができます。

複数行テキストへの適用方法

文章が長くなって複数行になると、取り消し線が途中で切れてしまわないか心配になることがあります。

でも大丈夫です。

基本的にCSSの取り消し線は複数行にも対応しています。

次のような書き方で、長い文章にも線がきちんと表示されます。


<div style="text-decoration: line-through;">
これはとても長い文章です。

改行してもちゃんと線が引かれます。

</div>

取り消し線が行ごとに切れてしまうことがある場合は、以下の設定を確認しましょう。

複数行でも安心して使えるのがCSSの取り消し線の強みです。

line-through以外の装飾との併用

CSSでは、取り消し線と他の文字装飾を同時に使うこともできます。

たとえば、文字色を変えたり、太字にしたりすることで、もっと効果的に伝えることができます。

次のようなスタイルを組み合わせて使えます。


.strike-mix {
text-decoration: line-through;
color: #999;
font-weight: bold;
font-style: italic;
}


主に組み合わせることが多いプロパティは次の通りです。

目的に合わせて、見せたい印象を調整できるのがCSSの強みです。

ただしやりすぎると読みづらくなるので、バランスが大切です。

CSSでの取消線表現の注意点

CSSで取り消し線を使うときには、いくつかのポイントに注意する必要があります。

間違った使い方をすると、ユーザーに誤解を与えたり、SEOに悪影響を与えることもあります。

気をつけるべきことをまとめると次の通りです。

CSSは便利ですが、使いすぎは逆効果になることもあります。

「見やすさ」と「伝えたい内容」のバランスを意識することが大切です。

HTML取消線タグの活用シーンと使い分け

価格表示や割引表現での使い方

取り消し線は、商品やサービスの価格表示でとてもよく使われます。

特に割引やキャンペーンを伝えたいときに効果的です。

古い価格に取り消し線をつけることで、今の価格がお得だとすぐにわかります。

次のような使い方が一般的です。

<p><s>通常価格：5,000円</s>→今だけ3,000円！</p>

このような表現は、次のような場面で使うことが多いです。

視覚的に「今がチャンス」と感じてもらえるため、取り消し線はマーケティングにも役立ちます。

編集履歴や変更箇所の強調に使う方法

文章を編集するときに、「ここは削除された」ということを読者に伝えたい場合があります。

そんなときに便利なのが<del>タグです。

意味のある「削除」を伝えるために使います。

たとえば、次のように書きます。

<p><del>旧デザインはこのようになっていました。

</del></p>

このような使い方をすることで、読者に次のような情報を伝えることができます。

透明性を大切にする場面では、<del>タグの活用がとても有効です。

文章内の強調や比喩的表現への応用

取り消し線は、ただの装飾ではなく文章の表現方法として使われることもあります。

たとえば「本当はこう言いたいけど、あえて隠す」ようなユーモアや、比喩的な表現で使われます。

以下のような書き方をすると、読者に遊び心を伝えられます。

<p>本当は<s>やりたくなかった</s>けど、挑戦しました。

</p>

このような表現が使える場面は次の通りです。

ただし、使いすぎると読みにくくなるので注意が必要です。

読みやすさを保ちながら、適度に活用しましょう。

ユーザビリティとアクセシビリティの観点

取り消し線を使うときには、見た目だけでなく使いやすさ（ユーザビリティ）や読みやすさ（アクセシビリティ）にも配慮することが大切です。

以下のようなことを意識しましょう。

見える人だけでなく、音声ブラウザを使う人にも配慮することが、現代のWebではとても大切です。

SEOへの影響と対策

取り消し線は見た目の変化を作る道具ですが、SEOのことも考えながら使う必要があります。

間違った使い方をすると、検索順位に悪影響を与えることがあります。

以下の点に注意しましょう。

見せ方ばかりに気を取られず、コンテンツの質と検索意図の一致が最優先です。

取り消し線を使う際のデザインバランス

取り消し線は便利ですが、使いすぎるとページ全体のデザインバランスが崩れてしまいます。

読みやすくて、伝えたいことがしっかり伝わるデザインを心がけましょう。

デザイン上の注意点は次の通りです。

デザインは見た目だけでなく、情報の優先度を示す道具でもあります。

取り消し線の役割をきちんと考えながら使いましょう。

使わない方が良いケースとその理由

取り消し線は便利ですが、すべての場面で使うべきではありません。

誤解を招いたり、内容の信頼性を下げてしまう可能性もあります。

使わない方が良いケースは以下の通りです。

「取り消し線を使う＝本来は見せない情報をあえて見せる」ことになるので、場面に応じて使う・使わないを判断するのが大切です。

読者の立場で考えるようにしましょう。

HTMLで取り消し線を使う際によくある質問

<s>タグと<del>タグはどちらが正しい？

取り消し線を使いたいとき、「<s>タグ」と「<del>タグ」のどちらを使えばいいのか迷うことがあります。

この2つは見た目は似ていますが、意味が違うため使い方を正しく理解することが大切です。

それぞれの違いをまとめると次のようになります。

このように、どちらが「正しい」というよりも、使い分けが大切です。

見た目だけなら<s>、意味を込めたいなら<del>を使いましょう。

MarkdownやCMSでも使える？

取り消し線をHTMLタグで書くだけでなく、Markdown記法やCMS（WordPressなど）でも使えるのか気になる方も多いと思います。

結論としては、使えますが方法が少し異なります。

Markdownでは、次のように書くことで取り消し線を表現できます。

~~この文章は取り消し線です~~

ただし、使用しているエディタやCMSの仕様によって、Markdownが正しく反映されないこともあります。

以下の点に注意しましょう。

CMSごとに仕様が違うため、実際に表示確認をしながら進めるのが安心です。

スマホやモバイルで正しく表示される？

取り消し線を使ったデザインがスマホやタブレットでちゃんと表示されるかどうかはとても大切なポイントです。

基本的には表示されますが、確認は必須です。

以下の点をチェックしておくと安心です。

特にスマホでは文字が小さくなるため、取り消し線が細いと読みづらくなる可能性があります。

そのため、線の色や太さにも気を配りましょう。

JavaScriptで取り消し線を動的に追加するには？

HTMLやCSSだけでなく、JavaScriptを使えばページの動きに合わせて取り消し線を追加・削除することができます。

とても便利なので、動的に変化させたい場合におすすめです。

以下は基本的な使い方の例です。


document.getElementById("text").style.textDecoration = "line-through";


もっと高度な制御も可能です。

たとえば、ボタンを押したときに取り消し線をつけるには以下のようにします。


document.getElementById("btn").addEventListener("click", function() {
document.getElementById("text").classList.toggle("strike");
});


動的に取り消し線を追加したい場面は次のようなときです。

ユーザーの操作に応じた変化をつけたいときに、JavaScriptはとても役立ちます。

SEOにマイナスの影響はある？

取り消し線を入れたことで、Googleなどの検索エンジンに悪い影響が出るのではと心配になるかもしれません。

結論としては、正しく使えばSEOに大きな悪影響はありません。

ただし、以下のようなケースでは注意が必要です。

取り消し線は装飾でありながら、意味を持つタグもあるため、どのタグをどの位置で使うかは戦略的に考えましょう。

WordPressでの使い方は？

WordPressを使っている場合、取り消し線を使う方法はいくつかあります。

ビジュアルエディタとコードエディタの2つの方法を知っておくと便利です。

ビジュアルエディタでは以下のように操作できます。

また、HTMLを直接書く場合は以下のようにします。

<s>この部分は旧情報です</s>

プラグインによっては、取り消し線のスタイルを変更できる機能がついていることもあります。

自分の目的に合わせて、使いやすい方法を選ぶのがポイントです。

取り消し線が表示されない原因と対処法

取り消し線が思った通りに表示されないこともあります。

そんなときは、原因を一つずつ確認していくことが大切です。

よくある原因を以下にまとめます。

まずはブラウザの「検証」機能を使って、スタイルがどう適用されているかを確認すると解決の手がかりになります。

一つ一つの設定を丁寧に見直すことが、正しい表示への近道です。

まとめ

これまでHTMLで取り消し線を使う方法や注意点について紹介してきました。

最後に大事なポイントをもう一度おさらいしましょう。

タグの意味を正しく知って、伝えたいことがきちんと届くように工夫していきましょう！今すぐ自分のサイトや記事に取り消し線を取り入れて、より伝わるデザインにチャレンジしてみてください。