sタグの使い方【HTMLリファレンス】

2024-06-012024-06-04

この記事では、HTMLのsタグについて詳しく解説します。

sタグは、テキストに取り消し線を引くためのタグで、価格の変更や文章の修正を示す際に便利です。

この記事を読むことで、sタグの基本的な使い方や実践例、他のタグとの違い、スタイリング方法、そしてベストプラクティスについて学ぶことができます。

目次から探す

sタグとは

sタグの定義

sタグは、HTMLでテキストに取り消し線を引くためのタグです。

取り消し線は、通常、テキストが削除されたり、変更されたりしたことを示すために使用されます。

sタグは、HTML5で導入され、以前のHTMLバージョンではstrikeタグが同様の機能を果たしていました。

sタグの用途

sタグは、主に以下のような用途で使用されます。

取り消し線の表示

sタグの最も基本的な用途は、テキストに取り消し線を表示することです。

例えば、価格の変更や、誤った情報を訂正する際に使用されます。

<p>この商品は <s>5000円</s> 4500円です。</p>

上記の例では、「5000円」というテキストに取り消し線が引かれ、新しい価格「4500円」が表示されます。

文章の修正や変更の表示

文章の修正や変更を示すためにもsタグは有効です。

例えば、ブログ記事やニュース記事で、後から情報が更新された場合に、元の情報に取り消し線を引いて新しい情報を追加することができます。

<p>イベントは <s>3月15日</s> 3月20日に開催されます。</p>

この例では、元々「3月15日」に開催予定だったイベントが「3月20日」に変更されたことがわかります。

SEOへの影響

sタグを使用すること自体はSEOに直接的な影響を与えることは少ないですが、適切に使用することでユーザーにとっての情報の明確さが向上し、結果的にユーザーエクスペリエンスが向上する可能性があります。

例えば、価格の変更や重要な情報の修正を明示することで、ユーザーが正確な情報を得やすくなります。

ただし、sタグを乱用すると、ページの可読性が低下し、ユーザーにとって混乱を招く可能性があるため、適切な場面でのみ使用することが重要です。

以上が、sタグの定義と主な用途です。

次のセクションでは、sタグの基本的な使い方について詳しく見ていきます。

sタグの基本的な使い方

sタグの基本構文

sタグは、取り消し線を表示するために使用されるHTMLタグです。

基本的な構文は以下の通りです。

<s>取り消し線を表示するテキスト</s>

この構文を使用すると、<s>タグで囲まれたテキストに取り消し線が表示されます。

以下に具体的な例を示します。

<p>この商品は <s>500円</s> から 400円に値下げされました。</p>

上記のコードをブラウザで表示すると、次のようになります。

この商品は ~~500円~~ から 400円に値下げされました。

sタグの属性

sタグは、他のHTMLタグと同様に属性を持つことができます。

ここでは、グローバル属性とカスタムデータ属性について説明します。

グローバル属性の使用

グローバル属性は、すべてのHTMLタグで使用できる共通の属性です。

代表的なグローバル属性には、class、id、style、titleなどがあります。

以下に、sタグでグローバル属性を使用する例を示します。

<p>この商品は <s class="old-price" id="price1" style="color: red;" title="旧価格">500円</s> から 400円に値下げされました。</p>

上記のコードでは、class属性でCSSクラスを指定し、id属性で一意の識別子を付与し、style属性でインラインスタイルを適用し、title属性でツールチップを表示するテキストを設定しています。

カスタムデータ属性の使用

カスタムデータ属性は、data-で始まる属性で、開発者が独自のデータをHTML要素に追加するために使用されます。

以下に、sタグでカスタムデータ属性を使用する例を示します。

<p>この商品は <s data-old-price="500" data-currency="JPY">500円</s> から 400円に値下げされました。</p>

上記のコードでは、data-old-price属性で旧価格を、data-currency属性で通貨を指定しています。

これらのカスタムデータ属性は、JavaScriptを使用して動的にアクセスおよび操作することができます。

以上が、sタグの基本的な使い方と属性の使用方法です。

次に、sタグの実践例について詳しく見ていきましょう。

sタグの実践例

ここでは、実際にsタグを使った具体的な例をいくつか紹介します。

sタグは取り消し線を表示するために使われることが多いですが、他にもさまざまな用途があります。

テキストの取り消し線

最も基本的な使い方として、テキストに取り消し線を引く方法があります。

例えば、以下のように使います。

<p>この文は<s>取り消し線が引かれています</s>。</p>

このコードをブラウザで表示すると、以下のようになります。

取り消し線を使うことで、元のテキストが何であったかを視覚的に示すことができます。

価格の変更表示

オンラインショップなどで、商品の価格が変更された場合に、旧価格に取り消し線を引いて新価格を表示することがあります。

以下はその例です。

<p>旧価格: <s>¥5000</s></p>
<p>新価格: ¥4500</p>

このコードをブラウザで表示すると、以下のようになります。

このように、旧価格に取り消し線を引くことで、ユーザーに価格が変更されたことを明確に伝えることができます。

文章の修正履歴の表示

文章の修正履歴を示すために、sタグを使うこともあります。

例えば、ブログ記事やドキュメントの修正箇所を示す場合に使います。

<p>この文は<s>古い内容</s>新しい内容に修正されました。</p>

このコードをブラウザで表示すると、以下のようになります。

このように、修正前の内容に取り消し線を引くことで、どの部分が修正されたのかを視覚的に示すことができます。

以上のように、sタグは取り消し線を表示するための便利なタグです。

適切に使うことで、ユーザーに対して情報をわかりやすく伝えることができます。

sタグと他のタグの比較

HTMLには、テキストの修正や変更を示すためのいくつかのタグがあります。

ここでは、sタグとよく似た用途で使われるdelタグ、insタグ、uタグとの違いについて詳しく解説します。

delタグとの違い

delタグは、削除されたテキストを示すために使用されます。

sタグと同様に取り消し線が表示されますが、意味的には異なります。

delタグは、文書の履歴や変更履歴を示すために使われることが多いです。

サンプルコード

<p>この文には<del>削除されたテキスト</del>が含まれています。</p>
<p>この文には<s>取り消されたテキスト</s>が含まれています。</p>

実行結果

insタグとの違い

insタグは、新しく追加されたテキストを示すために使用されます。

通常、insタグで囲まれたテキストは下線が引かれます。

sタグとは異なり、insタグは追加された情報を強調するために使われます。

サンプルコード

<p>この文には<ins>追加されたテキスト</ins>が含まれています。</p>
<p>この文には<s>取り消されたテキスト</s>が含まれています。</p>

実行結果

uタグとの違い

uタグは、テキストに下線を引くために使用されます。

sタグとは異なり、uタグは取り消し線ではなく下線を引くために使われます。

uタグは、特定のテキストを強調するために使われることが多いです。

サンプルコード

<p>この文には<u>下線が引かれたテキスト</u>が含まれています。</p>
<p>この文には<s>取り消されたテキスト</s>が含まれています。</p>

実行結果

以上のように、sタグ、delタグ、insタグ、uタグはそれぞれ異なる用途と意味を持っています。

適切なタグを選んで使用することで、文書の意味を正確に伝えることができます。

sタグのスタイリング

sタグはデフォルトで取り消し線を表示しますが、CSSを使用してスタイルをカスタマイズすることができます。

ここでは、基本的なスタイルの適用方法から、カスタムスタイルの作成方法、さらにJavaScriptを使った動的なスタイル変更やイベントリスナーの活用方法について解説します。

CSSでのスタイリング

基本的なスタイルの適用

まずは、sタグに対して基本的なCSSスタイルを適用する方法を見てみましょう。

以下の例では、sタグの取り消し線の色を赤に変更しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sタグの基本スタイリング</title>
    <style>
        s {
            color: red; /* 取り消し線の色を赤に変更 */
        }
    </style>
</head>
<body>
    <p>この文章には<s>取り消し線</s>が含まれています。</p>
</body>
</html>

このコードをブラウザで表示すると、sタグで囲まれたテキストに赤い取り消し線が表示されます。

カスタムスタイルの作成

次に、sタグに対してカスタムスタイルを適用する方法を見てみましょう。

以下の例では、取り消し線のスタイルを変更し、さらに背景色を追加しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sタグのカスタムスタイリング</title>
    <style>
        s {
            text-decoration: line-through; /* 取り消し線を表示 */
            text-decoration-color: blue; /* 取り消し線の色を青に変更 */
            text-decoration-style: dashed; /* 取り消し線を破線に変更 */
            background-color: yellow; /* 背景色を黄色に変更 */
        }
    </style>
</head>
<body>
    <p>この文章には<s>カスタム取り消し線</s>が含まれています。</p>
</body>
</html>

このコードをブラウザで表示すると、sタグで囲まれたテキストに青い破線の取り消し線と黄色い背景色が表示されます。

JavaScriptとの連携

動的なスタイル変更

JavaScriptを使用して、sタグのスタイルを動的に変更することも可能です。

以下の例では、ボタンをクリックするとsタグの取り消し線の色が変更されるようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sタグの動的スタイリング</title>
    <style>
        s {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p>この文章には<s id="dynamic-strike">動的取り消し線</s>が含まれています。</p>
    <button onclick="changeColor()">取り消し線の色を変更</button>
    <script>
        function changeColor() {
            document.getElementById('dynamic-strike').style.textDecorationColor = 'green';
        }
    </script>
</body>
</html>

このコードをブラウザで表示し、ボタンをクリックすると、sタグで囲まれたテキストの取り消し線の色が緑に変更されます。

イベントリスナーの活用

さらに、イベントリスナーを使用して、特定のイベントが発生したときにsタグのスタイルを変更することもできます。

以下の例では、マウスオーバー時に取り消し線のスタイルが変更されるようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sタグのイベントリスナー</title>
    <style>
        s {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p>この文章には<s id="hover-strike">イベントリスナー取り消し線</s>が含まれています。</p>
    <script>
        const strikeElement = document.getElementById('hover-strike');
        strikeElement.addEventListener('mouseover', function() {
            strikeElement.style.textDecorationColor = 'purple';
            strikeElement.style.textDecorationStyle = 'wavy';
        });
        strikeElement.addEventListener('mouseout', function() {
            strikeElement.style.textDecorationColor = '';
            strikeElement.style.textDecorationStyle = '';
        });
    </script>
</body>
</html>

このコードをブラウザで表示し、sタグで囲まれたテキストにマウスを乗せると、取り消し線の色が紫に、スタイルが波線に変更されます。

マウスを外すと元のスタイルに戻ります。

以上が、sタグのスタイリングに関する基本的な方法と応用例です。

CSSとJavaScriptを組み合わせることで、より柔軟で動的なスタイルを実現することができます。

sタグのベストプラクティス

適切な使用シーン

sタグは、取り消し線を表示するためのタグですが、具体的にどのようなシーンで使用するのが適切でしょうか。

以下にいくつかの例を挙げます。

価格の変更表示:

商品の価格が変更された場合、旧価格を取り消し線で表示し、新価格をその横に表示することで、ユーザーに価格の変動を明確に伝えることができます。

<p>旧価格: <s>¥5000</s> 新価格: ¥4500</p>

文章の修正履歴:

ドキュメントや記事の修正履歴を示す際に、元のテキストに取り消し線を引き、新しいテキストをその後に追加することで、変更点を視覚的に示すことができます。

<p>この商品は<s>非常に高価です</s>手頃な価格です。</p>

キャンペーンやセール情報:

キャンペーンやセール情報を表示する際に、通常価格に取り消し線を引き、セール価格を強調することで、ユーザーにお得感を伝えることができます。

<p>通常価格: <s>¥3000</s> セール価格: ¥2000</p>

避けるべき使用シーン

sタグは便利ですが、適切でないシーンで使用すると混乱を招く可能性があります。

以下のような場合には、sタグの使用を避けるべきです。

重要な情報の取り消し:

重要な情報や警告メッセージに取り消し線を引くと、ユーザーがその情報を無視してしまう可能性があります。

重要な情報は明確に表示するようにしましょう。

<!-- 避けるべき例 -->
<p><s>この薬は副作用があります。</s></p>

装飾目的での使用:

取り消し線を単なる装飾目的で使用するのは避けましょう。

取り消し線は意味を持つものであり、装飾目的で使用するとユーザーに誤解を与える可能性があります。

<!-- 避けるべき例 -->
<p>このテキストは<s>装飾</s>です。</p>

SEOに悪影響を与える可能性:

sタグを多用すると、検索エンジンがページの内容を正確に理解できなくなる可能性があります。

特に重要なキーワードやフレーズに取り消し線を引くのは避けましょう。

コードの可読性とメンテナンス性

sタグを使用する際には、コードの可読性とメンテナンス性を考慮することが重要です。

以下のポイントに注意しましょう。

コメントを追加する:

sタグを使用する理由や意図をコメントとしてコードに追加することで、他の開発者がコードを理解しやすくなります。

<!-- 旧価格を取り消し線で表示 -->
<p>旧価格: <s>¥5000</s> 新価格: ¥4500</p>

適切なクラス名を使用する:

sタグにスタイルを適用する際には、適切なクラス名を使用して、スタイルの意図を明確にしましょう。

<p class="old-price"><s>¥5000</s></p> <p class="new-price">¥4500</p>

一貫性を保つ:

sタグの使用方法やスタイルは、プロジェクト全体で一貫性を保つようにしましょう。

一貫性があることで、コードのメンテナンスが容易になります。

<style>
    .old-price {
      text-decoration: line-through;
      color: red;
    }
    .new-price {
      font-weight: bold;
      color: green;
    }
</style>
<p class="old-price"><s>¥5000</s></p>
<p class="new-price">¥4500</p>

以上のベストプラクティスを守ることで、sタグを効果的に使用し、ユーザーにとってわかりやすいコンテンツを提供することができます。

よくある質問(FAQ)

sタグはどのような場合に使うべきですか？

sタグは、テキストに取り消し線を引くために使用されます。

具体的には、以下のような場合に使うと効果的です。

価格の変更: 商品の価格が変更された場合、旧価格に取り消し線を引いて新価格を表示することで、ユーザーに価格の変動を明示できます。
文章の修正: 文章の一部を修正した際に、元のテキストに取り消し線を引いて新しいテキストを追加することで、変更点を明確に示すことができます。
キャンペーンやセール情報: キャンペーンやセールの終了を示すために、終了した情報に取り消し線を引くことができます。

sタグとdelタグの使い分けは？

sタグとdelタグはどちらも取り消し線を表示するために使用されますが、用途や意味合いが異なります。

sタグ: 取り消し線を表示するためのタグで、特に意味を持たない装飾的な要素として使用されます。

例えば、価格の変更や文章の修正を視覚的に示すために使います。

<p>旧価格: <s>¥5000</s> 新価格: ¥4500</p>

delタグ: 削除されたテキストを示すためのタグで、意味的な変更を伴います。

SEOにも影響を与える可能性があり、削除された内容を明示的に示す場合に使用します。

<p>この文章は<del>削除されました</del>。</p>

sタグのスタイルを変更する方法は？

sタグのスタイルはCSSを使用してカスタマイズすることができます。

以下にいくつかの例を示します。

基本的なスタイルの適用

取り消し線の色や太さを変更することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sタグのスタイル変更</title>
    <style>
        s {
            color: red; /* 取り消し線の色を赤に変更 */
            text-decoration: line-through;
            text-decoration-thickness: 2px; /* 取り消し線の太さを変更 */
        }
    </style>
</head>
<body>
    <p>旧価格: <s>¥5000</s> 新価格: ¥4500</p>
</body>
</html>

カスタムスタイルの作成

取り消し線のスタイルをさらにカスタマイズすることも可能です。

例えば、波線に変更することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sタグのカスタムスタイル</title>
    <style>
        s {
            text-decoration: line-through;
            text-decoration-style: wavy; /* 取り消し線を波線に変更 */
            text-decoration-color: blue; /* 取り消し線の色を青に変更 */
        }
    </style>
</head>
<body>
    <p>旧価格: <s>¥5000</s> 新価格: ¥4500</p>
</body>
</html>