【HTML】取り消し線の書き方｜HTMLとCSSを実例付きで解説

（最終更新日：2023年6月）

✔対象となる読者の方々

「HTML内で取り消し線を使いたいが、その方法を知らない」
「取り消し線を活用したいが、適切なコードの使い方が分からない」
「具体的な取り消し線の使用例を見てみたい」

✔当記事でお届けする情報

• HTML内で取り消し線を使う基礎知識
• 正しい取り消し線のコード書き方および応用方法
• 取り消し線を用いた実用的な事例

当記事では、HTML内で取り消し線を活用するための基礎知識から、応用に至るまで、実用的なサンプルを交えて丁寧に解説しています。

ぜひ最後までご覧ください。

取り消し線の使用シーン

ここでは、取り消し線が主に使用されるシーンについて詳しく説明します。

取り消し線の活用方法を理解することで、読者はその適用範囲と効果的な使用方法を把握することができます。

• 取り消し線の重要性と使用場面
• 後から文章を編集した場合
• 強調するために取り消し線を活用

取り消し線の重要性と使用場面

取り消し線は、ウェブデザインにおける重要な要素のひとつです。

情報を修正したり、特定の文を強調したりする際に用いられます。

• 商品の価格変更時に元の価格を取り消し線で示す：価格の変動をユーザーに視覚的に伝えられる
• 間違えた情報を訂正する際にも取り消し線を用いる：誤情報が配信された事実を明示し、ユーザーへの信頼を保てる

取り消し線はウェブデザインにおける効果的なツールであり、その適切な使い方を学ぶことは大切です。

後から文章を編集した場合

ウェブページの文章を後から編集する際に、取り消し線は非常に有用です。

情報が古くなった部分や誤った部分を訂正する場合、取り消し線で元の文章を示すことで、訂正の履歴を明示的に伝えられます。

例えば、ブログ記事で誤った情報を掲載した場合、取り消し線を利用して訂正された部分を強調することで、読者への信頼を維持できるのです。

強調するために取り消し線を活用

取り消し線は文章の一部を強調するための視覚的なツールとしても活用されます。

一部の情報を取り消し線で見せることで、その部分が特別であること、注目すべきであることを視覚的に伝えられます。

例を挙げるとオンラインショップでです。

割引前の価格に取り消し線を引くことで、割引後の価格がどれだけお得であるかを強調できるでしょう。

HTMLで取り消し線を実装する方法

ここからは、HTMLで取り消し線を実装する方法について詳しく説明します。

HTMLタグの適用方法を理解することで、必要な場面ですぐに取り消し線を適用できるしょう。

• <s>要素を使う方法
• <strike>要素を使う方法
• <del>要素を使う方法

<s>要素を使う方法

取り消し線をHTMLで表示する最も簡単な方法の一つは、<s>タグを使うこと。

<s>タグは、取り消し線を引くべきテキストを囲みます。

例えば、「<s>割引前の価格</s>」と記述すると、”割引前の価格”というテキストに取り消し線が引かれます。

ただしこのタグはHTML5では非推奨とされているので、現代のウェブサイト制作では使わないようにしましょう。

<strike>要素を使う方法

<strike>タグも、取り消し線を引くための古いHTMLタグです。

使用方法は<s>タグと同様で、取り消し線を引きたいテキストを囲みます。

しかし、このタグもHTML5で非推奨とされており、新しいウェブサイトでは使用を控えるべきです。

<del>要素を使う方法

現代のHTML（特にHTML5）では、<del>タグが、取り消し線を表示するための標準的な方法です。

<del>タグは、ドキュメント内で削除されたテキストを示すために使用されます。

ブラウザはこのタグで囲まれたテキストに取り消し線を自動的に引くのです。

例えば、「<del>割引前の価格</del>」と記述すると、”割引前の価格”というテキストに取り消し線が引かれます。

<del>タグはセマンティックなマークアップを可能にするため、SEOにも有利です。

CSSを活用した取り消し線のカスタマイズ

こちらでは、HTMLに加えて、CSSを活用した取り消し線のカスタマイズについて解説します。

CSSを使用することで、ウェブページの見た目を更に向上させられるのです。

• 基本的な取り消し線の実装
• 取り消し線に色を付ける方法
• 取り消し線の太さを変更し、二重線にする方法

基本的な取り消し線の実装

CSSを使用して取り消し線を実装する基本的な方法は、「text-decoration」プロパティを使用することです。

このプロパティに「line-through」を指定することで、簡単に取り消し線を実現できます。

例えば、以下のように記述します。

p {
  text-decoration: line-through;
}

上記のスタイルを適用すると、<p>タグで囲まれたテキスト全体に取り消し線が引かれます。

取り消し線に色を付ける方法

取り消し線の色を変更できます。

「text-decoration-color」が、色を変更するためのプロパティです。

このプロパティに色の値を指定することで、取り消し線の色をカスタマイズできます。

以下がその例です。

p {
  text-decoration: line-through;
  text-decoration-color: red;
}

このように記述すると、<p>タグで囲まれたテキストの取り消し線が赤色になります。

取り消し線の太さを変更し、二重線にする方法

取り消し線の太さを変更したり、取り消し線を二重線にしたりする方法について説明します。

特定の箇所を強調するためや、デザインの一環として活用しましょう。

取り消し線の太さは、text-decoration-thicknessプロパティを利用します。

このプロパティに数値やパーセンテージを指定することで、取り消し線の太さを変更可能。

例えば、以下のように指定します。

p {
  text-decoration: line-through;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}

このスタイルを適用すると、<p>タグで囲まれたテキスト全体に赤色の取り消し線が引かれ、その太さが2pxになります。

以下は二重線の例です。

p {
  text-decoration: line-through double;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}

text-decoration-styleプロパティにdoubleを指定します。

HTMLのみで十分か？

こちらでは、取り消し線の実装に関して、HTMLだけで十分なのか、それともCSSが必要なのかという問いについて考察します。

• HTMLだけで良い条件の案件獲得が可能か
• CSSの必要性

HTMLだけで良い条件の案件獲得が可能か

HTMLだけで取り消し線を実装する場合は、タグひとつで簡単に適用できます。

しかし、それが十分かどうかは、取り扱うウェブページの内容や目的によるでしょう。

例えば、単純な文書やブログの記事など、デザインに特別な要件がない場合は、HTMLだけで十分です。

CSSの必要性

一方、デザインの自由度を高めたい、または特定のビジュアルエフェクトを適用したい場合には、CSSを利用する必要が出てきます。

またより高度なスタイルを適用するためには、CSSが不可欠です。

CSSを利用すれば、取り消し線の色や太さを調整したり、二重線にしたりと、さまざまなデザインを実現できます。

それぞれの要件や目的に応じて、HTMLだけでの実装とCSSを組み合わせた実装を選択しましょう。

まとめ

当記事を通じて、HTMLとCSSを用いた取り消し線の基本的な実装方法を学びました。

HTMLだけでも取り消し線を引くことができ、さらにCSSを用いることで、色を変えたり、太さを調節したりと、自由なデザインを実現できます。

HTMLだけでなくCSSを使用することで、ウェブページのデザインに深みを加えることも可能。

取り消し線だけでなく、他要素に対しても同様のスタイリングを適用し、より効果的なウェブページデザインを実現できます。

これらの知識を活用して、ユーザーにとって読みやすく、魅力的なウェブページを作りましょう。