sタグの使い方 [HTMLリファレンス]

HTMLの<s>タグは、テキストに取り消し線を引くために使用されます。これは、情報がもはや正しくない、または関連性がないことを示すために用いられます。

例えば、価格の変更やキャンペーンの終了を示す際に、旧価格や終了した情報に<s>タグを使用することがあります。

ただし、スタイルの観点からは、CSSのtext-decorationプロパティを使用して取り消し線を引くことも一般的です。

sタグとは

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

このタグを使用することで、元のテキストが無効であることや、変更されたことを視覚的に示すことができます。

例えば、価格の変更や修正履歴を示す際に利用されることが多いです。

sタグは、HTML4.01では非推奨とされていましたが、HTML5で再び有効な要素として復活しました。

これにより、現代のウェブ開発においても、適切に使用することが可能です。

sタグの使い方

基本的な使用例

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

以下は基本的な使用例です。

<p>この商品は<s>500円</s>、今なら300円です。</p>

この例では、元の価格「500円」に取り消し線を引き、現在の価格「300円」を強調しています。

sタグの属性

sタグ自体には特定の属性はありませんが、HTMLのグローバル属性を使用することができます。

グローバル属性の利用

sタグは、他のHTML要素と同様にグローバル属性を利用できます。

以下は、class属性を使用した例です。

<p>この商品は<s class="old-price">500円</s>、今なら300円です。</p>

この例では、class属性を使用して、取り消し線を引いたテキストにスタイルを適用するためのクラスを指定しています。

sタグを使ったスタイリング

sタグを使用する際、CSSを用いてスタイリングをカスタマイズすることが可能です。

CSSでのカスタマイズ方法

CSSを使用して、sタグのスタイルを変更することができます。

以下は、取り消し線の色を変更する例です。

.old-price {
  text-decoration: line-through;
  color: red;
}

このCSSは、class="old-price"が指定された要素に対して、取り消し線の色を赤に変更します。

これにより、取り消し線がより目立つようになります。

sタグの実用例

価格の変更を示す

sタグは、商品の価格変更を示す際に非常に便利です。

例えば、セールや割引を行う際に、元の価格に取り消し線を引くことで、値引き後の価格を強調することができます。

<p>通常価格は<s>1000円</s>、今なら700円です！</p>

この例では、元の価格「1000円」に取り消し線を引くことで、値引き後の価格「700円」を際立たせています。

修正履歴の表示

文書や記事の修正履歴を示す際にも、sタグは役立ちます。

変更前のテキストに取り消し線を引くことで、どの部分が修正されたのかを明確に示すことができます。

<p>このプロジェクトは<s>2023年12月</s>、2024年1月に完了予定です。</p>

この例では、元の完了予定日「2023年12月」に取り消し線を引き、修正後の予定日「2024年1月」を示しています。

テキストの強調と取り消し

sタグは、テキストの一部を強調しつつ、取り消しを示す場合にも使用されます。

例えば、重要な情報が変更されたことを示す際に利用できます。

<p>会議は<s>金曜日</s>、月曜日に変更されました。</p>

この例では、元の会議日「金曜日」に取り消し線を引き、新しい会議日「月曜日」を強調しています。

これにより、変更点が視覚的にわかりやすくなります。

sタグのアクセシビリティ

スクリーンリーダーへの影響

sタグは、視覚的には取り消し線を引く効果がありますが、スクリーンリーダーでは特別な読み上げが行われないことが一般的です。

つまり、スクリーンリーダーを使用するユーザーには、取り消し線が引かれていることが伝わらない可能性があります。

そのため、sタグを使用する際には、視覚的な情報だけでなく、テキストの意味や変更点を明確に伝える工夫が必要です。

アクセシビリティを考慮した使用方法

アクセシビリティを考慮する場合、sタグの使用に加えて、変更点を明確に伝えるための補足情報を提供することが重要です。

以下は、aria-label属性を使用して、スクリーンリーダーに情報を伝える例です。

<p>この商品は<s aria-label="元の価格">500円</s>、今なら300円です。</p>

この例では、aria-label属性を使用して、スクリーンリーダーに「元の価格」という情報を伝えています。

これにより、視覚的に取り消し線が引かれていることが伝わらない場合でも、ユーザーに元の価格であることを知らせることができます。

また、変更点を説明するために、追加のテキストを用意することも有効です。

例えば、変更理由や背景を説明する段落を追加することで、すべてのユーザーに対して情報を明確に伝えることができます。

sタグの応用例

JavaScriptと組み合わせた動的な取り消し線

sタグは、JavaScriptと組み合わせることで、動的に取り消し線を追加したり削除したりすることができます。

例えば、ユーザーの操作に応じて、特定のテキストに取り消し線を引くことが可能です。

<p id="price">この商品は<span id="oldPrice">500円</span>、今なら300円です。</p>
<button onclick="toggleStrikethrough()">取り消し線を切り替え</button>
<script>
  function toggleStrikethrough() {
    const oldPrice = document.getElementById('oldPrice');
    oldPrice.classList.toggle('strikethrough');
  }
</script>
<style>
  .strikethrough {
    text-decoration: line-through;
  }
</style>

この例では、ボタンをクリックすることで、oldPriceに取り消し線を動的に追加または削除します。

sタグを使ったアニメーション効果

CSSアニメーションを使用して、sタグの取り消し線に動きを加えることができます。

これにより、視覚的に魅力的な効果を演出することが可能です。

<p class="animated-strike">この商品は<s>500円</s>、今なら300円です。</p>
<style>
  .animated-strike s {
    position: relative;
    display: inline-block;
    overflow: hidden;
  }
  .animated-strike s::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background: red;
    animation: strike 1s forwards;
  }
  @keyframes strike {
    from { width: 0; }
    to { width: 100%; }
  }
</style>

この例では、取り消し線が左から右にアニメーションしながら表示されます。

sタグと他のHTML要素の組み合わせ

sタグは、他のHTML要素と組み合わせて使用することで、より複雑なレイアウトやスタイルを実現できます。

例えば、spanタグやdivタグと組み合わせて、特定の部分にのみ取り消し線を引くことができます。

<div>
  <p>この商品は<span class="highlight"><s>500円</s></span>、今なら300円です。</p>
</div>
<style>
  .highlight s {
    color: gray;
    text-decoration: line-through;
  }
</style>

この例では、spanタグを使用して、取り消し線を引いた部分に特定のスタイルを適用しています。

これにより、取り消し線を引いたテキストが他の部分と区別され、視覚的に強調されます。

よくある質問

まとめ

この記事では、HTMLのsタグについて、その基本的な使い方や実用例、アクセシビリティの考慮点、応用例などを詳しく解説しました。

sタグは、視覚的な取り消し線を引くための便利な要素であり、適切に使用することで、ユーザーに対して明確な情報を提供することができます。

これを機に、sタグを活用して、より効果的なウェブコンテンツを作成してみてはいかがでしょうか。