読み込み中...

HTMLで打ち消し線をマスターする6つの方法

打ち消し線を表示するHTMLの例 HTML
2024.04.07
この記事は約11分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

HTMLでのウェブデザインにおいて、打ち消し線は見落とされがちながらも、非常に重要な要素の一つです。

この記事では、HTMLで打ち消し線を効果的に使う方法を、基本から応用まで幅広く紹介します。

この知識は、プログラミングの経験が浅い方から、より専門的な技術を身につけたい方まで、幅広い読者にとって有益な内容となっています。

特に、ウェブサイトのデザインを改善し、よりユーザーの目を引くビジュアルを作成したい方には、この記事が理想的なガイドになるでしょう。

●HTMLとは

HTML（HyperText Markup Language）は、ウェブページを構築するための基礎となるマークアップ言語です。

HTMLは、ウェブの構造を定義し、テキスト、画像、リンクなどのウェブコンテンツをウェブページに配置するために使われます。

HTMLを理解することは、ウェブ開発の基本であり、HTMLの知識はすべてのウェブデベロッパーやデザイナーにとって必須です。

○HTMLの基本概念

HTMLの基本概念は、タグを使用してウェブページの構造を定義することにあります。

例えば、「<p>」と「</p>」は段落を表すタグで、この中にテキストを入れることでウェブページ上に段落が形成されます。

HTMLタグは非常に多岐にわたり、画像やリンク、リストなど様々なコンテンツを表示するために使われます。

○HTMLの重要性

ウェブデザインにおいてHTMLの理解は不可欠です。

HTMLによってウェブページの基本的な構造が作られ、CSSやJavaScriptといった他の技術と連携して、より動的で視覚的に魅力的なウェブサイトを作成することができます。

また、HTMLは検索エンジン最適化（SEO）においても重要で、適切に構造化されたHTMLは、検索エンジンによるより良い評価を受けるために不可欠です。

●打ち消し線の基本

打ち消し線は、HTMLにおいてテキストに特定の意味を持たせるために用いられる重要な要素の一つです。

打ち消し線は、通常、価格の変更、削除されたテキスト、あるいは修正された文章を示す際に利用されます。

このシンプルな装飾が、ウェブページにおける情報の伝達方法を強化し、ユーザーの理解を助ける役割を果たします。

○打ち消し線とは

打ち消し線を表現するHTMLタグは「<s>」と「<del>」の二つがあります。

これらのタグはビジュアル的には同じ効果をもたらしますが、意味合いには微妙な違いがあります。

「<s>」タグは、もはや関連性のないまたは不正確なテキストに使われ、一方で「<del>」タグは文書から削除されたテキストに適用されます。

○打ち消し線の基本的な使用方法

基本的な打ち消し線の使用方法は非常に簡単です。

例えば、元の価格を打ち消し線で表示し、新しい価格を隣に表示することがあります。

このような場合、「<s>」タグを使用して、次のように記述することができます。

<p>旧価格：<s>¥3,000</s> 新価格：¥2,500</p>

このコードは、”旧価格：¥3,000 新価格：¥2,500″という文章をウェブページ上に表示します。

ここで、”¥3,000″という部分に打ち消し線が引かれ、価格が下がったことが視覚的にわかりやすく表現されています。

打ち消し線を使うことで、ウェブサイト上でのプロモーションやセールを効果的に告知できるようになります。

この単純なタグを用いることで、ウェブページ上のテキストにさりげなく意味を加えることができ、訪問者の注意を引きつける効果を持っています。

また、テキストの変更や更新を表す際にも役立ち、情報の正確性を保ちつつ、ユーザーエクスペリエンスを向上させることができます。

●打ち消し線の詳細な使い方

HTMLで打ち消し線を使う際、その応用方法は様々です。

特に、CSSやJavaScriptを組み合わせることで、打ち消し線の表現をより動的かつ視覚的に魅力的にすることが可能です。

ここでは、打ち消し線を使ったいくつかの応用例として、基本的な使い方からCSSによるスタイル変更、さらにはJavaScriptを利用した動的な効果の実現方法を紹介します。

○サンプルコード1：基本的な打ち消し線の使い方

まずはHTMLのみを使用した基本的な打ち消し線の使い方を確認しましょう。

例えば、特定の文言を強調したい場合に打ち消し線を使用することができます。

<p>この<del>重要な</del>アナウンスメントをお読みください。</p>

このコードでは、「重要な」という文言に打ち消し線が引かれており、文書上での変更や修正が視覚的にわかりやすく表現されています。

打ち消し線は、ウェブページのテキストに特定の意味を持たせるためのシンプルながら効果的な手段です。

○サンプルコード2：CSSを使った打ち消し線のカスタマイズ

次に、CSSを使って打ち消し線のスタイルをカスタマイズする方法を見てみましょう。

打ち消し線の色や太さを変更することで、より目立たせたり、ページのデザインに合わせたりすることができます。

<p><span class="strikethrough">セール価格</span> 通常価格</p>

<style>
.strikethrough {
  text-decoration: line-through;
  color: red;
}
</style>

この例では、CSSを用いて打ち消し線を赤色にし、より目立たせています。

このようにCSSを利用することで、打ち消し線のビジュアルを柔軟にコントロールできます。

○サンプルコード3：JavaScriptと組み合わせた動的な打ち消し線

最後に、JavaScriptを使って動的に打ち消し線を表示する方法を紹介します。

例えば、ボタンクリックで特定のテキストに打ち消し線を追加したり、取り除いたりすることが可能です。

<p id="sale-text">セール価格</p>
<button onclick="toggleStrikethrough()">打ち消し線をトグル</button>

<script>
function toggleStrikethrough() {
  var element = document.getElementById('sale-text');
  if (element.style.textDecoration === 'line-through') {
    element.style.textDecoration = 'none';
  } else {
    element.style.textDecoration = 'line-through';
  }
}
</script>

このコードでは、ボタンをクリックすることで「セール価格」というテキストに対して打ち消し線の有無を切り替えることができます。

このような動的な変更は、ユーザーのインタラクションに応じてコンテンツを更新するウェブページにおいて有効です。

●打ち消し線の応用例

打ち消し線は、単に文言を取り消すためだけでなく、さまざまなクリエイティブな方法でウェブサイト上で活用できます。

ブログやニュースサイト、Eコマースサイト、教育的なウェブサイトなど、様々なジャンルのサイトで打ち消し線を使うことで、情報の提示方法を強化し、ユーザーエクスペリエンスを高めることが可能です。

ここでは、3つ具体的な使用例を紹介します。

○サンプルコード4：ブログやニュースサイトでの使用例

ブログやニュースサイトでは、打ち消し線を使って最新情報への更新を視覚的に表すことができます。

たとえば、記事の中で旧情報を打ち消し線で消し、新しい情報を隣に追加することが可能です。

<p>この商品の価格は<s>¥10,000</s> <span style="color:red;">¥8,000</span>になりました！</p>

このコードでは、元の価格「¥10,000」に打ち消し線が引かれ、新しい価格「¥8,000」が赤色で強調表示されています。

この方法で、読者に対して価格の変更を明確に伝えることができます。

○サンプルコード5：Eコマースサイトでのセール価格表示

Eコマースサイトでは、打ち消し線を使ってセールや割引を効果的に表示することができます。

商品の元の価格に打ち消し線を引き、新しいセール価格を隣に表示することで、お得感をアピールできます。

<p>セール中！<s>¥5,000</s> <strong>¥3,500</strong></p>

この例では、元の価格「¥5,000」に打ち消し線を引き、新しい価格「¥3,500」を強調しています。

セールの訴求力を高めるために、価格変更を明確に視覚化しています。

○サンプルコード6：教育的なウェブサイトでの活用

教育関連のウェブサイトでは、打ち消し線を使って誤った情報を訂正するために利用することができます。

たとえば、クイズの正解を示す際に間違った答えに打ち消し線を引き、正しい答えを新たに追加する方法です。

<p>日本の首都は<s>大阪</s> <u>東京</u>です。</p>

このコードでは、間違った情報「大阪」に打ち消し線を引き、正しい情報「東京」を下線で強調しています。

教育コンテンツにおいて、このような視覚的な手法は、情報の正確さを伝える上で非常に有効です。

●よくあるエラーと対処法

HTMLで打ち消し線を使用する際には、いくつかの一般的なエラーに遭遇する可能性があります。

こうしたエラーを理解し、適切に対処することで、ウェブページのデザインと機能性を高めることができます。

ここでは、打ち消し線を使う上でよくある二つのエラーとその対処法を詳細に説明します。

○エラー1：打ち消し線が表示されない

打ち消し線がウェブページ上で表示されない場合、最も一般的な原因は、HTMLタグが正しく記述されていないか、またはCSSによって上書きされていることです。

まず、HTMLタグが正確に記述されているかを確認します。

例えば、「<s>」タグや「<del>」タグが正しく閉じられているかどうかを確認してください。

また、CSSで打ち消し線のスタイルが変更されていないかも確認する必要があります。

例えば、下記のようなCSSルールが存在すると、打ち消し線が表示されない原因となることがあります。

s, del {
  text-decoration: none;
}

このCSSルールは、すべての「<s>」タグと「<del>」タグに対して、打ち消し線を非表示に設定しています。

このようなルールがある場合は、削除するか修正する必要があります。

○エラー2：打ち消し線のスタイルが期待通りにならない

打ち消し線のスタイルが期待通りにならない場合、問題はCSSにある可能性が高いです。

打ち消し線の色や太さなど、様々なスタイル属性がCSSによって制御されている可能性があります。

打ち消し線のスタイルを調整するためには、下記のようにCSSを編集することができます。

s, del {
  text-decoration: line-through;
  color: blue; /* 打ち消し線の色を青に設定 */
  text-decoration-thickness: 2px; /* 打ち消し線の太さを2pxに設定 */
}

このCSSルールでは、打ち消し線の色を青にし、太さを2pxに設定しています。

●HTMLと打ち消し線の豆知識

HTMLの打ち消し線は、単なるデザインの要素ではなく、その使用には豊富な歴史と背景があります。

また、打ち消し線はSEOにも影響を与える可能性があります。

ここでは、打ち消し線に関するいくつかの興味深い豆知識をご紹介します。

○豆知識1：打ち消し線とSEOの関係

打ち消し線自体が直接的にSEOに影響を及ぼすことはありませんが、ウェブページのコンテンツとしての質を高めるために間接的な効果を持ちます。

たとえば、セールやプロモーションで価格が変更された場合、打ち消し線を使用して旧価格を表すことで、ユーザーに対して割引の価値を明確に伝えることができます。

これにより、ユーザーの関心を引きつけ、サイトの滞在時間の延長やコンバージョン率の向上に寄与する可能性があります。

また、打ち消し線は、コンテンツの信頼性や正確性を示すための効果的な方法としても使用できます。

○豆知識2：打ち消し線の歴史的背景

打ち消し線の使用は、デジタル時代よりもずっと前から存在していました。

手書きの文書においては、間違いや訂正、削除を表すために利用されてきました。

コンピュータとインターネットの時代に入ると、打ち消し線はHTMLの一部として組み込まれ、「<s>」や「<del>」といったタグで表現されるようになりました。

特に「<del>」タグは、文書における変更履歴を表すために使われることが多く、ウェブ上での文書やコンテンツの透明性を高めるために重要な役割を果たしています。

まとめ

この記事では、HTMLで打ち消し線を使うための基本的な方法から応用テクニックまでを網羅的に解説しました。

初心者から上級者まで、誰でも理解しやすいように、具体的なサンプルコードを交えながら詳細に説明しました。

また、打ち消し線の使用がSEOに与える影響や、その歴史的背景についても触れました。

これにより、読者はウェブデザインにおける打ち消し線の効果的な使用方法を深く理解し、自分のウェブサイトやプロジェクトに応用できる知識を得ることができたでしょう。