sタグの使い方と取り消し線を適切に表示する方法をわかりやすく解説

スポンサーリンク
スポンサーリンク

sの概要

取り消し線を表示する HTMLタグ

<s>取り消されたテキスト</s>

概要 sタグは、文書内の取り消されたテキストを表すために使用されるHTMLタグです。通常、取り消し線(打ち消し線)が適用され、削除された情報や無効になった内容を示すのに使用されます。

  • 取り消された、または有効でなくなったテキストを示す。
  • ブラウザはデフォルトで取り消し線を適用する。
  • 意味的に正しく使用するには、価格の変更や修正履歴を示す用途に適している。

sタグの基本的な使い方

以下の例では、sタグを使用して削除されたテキストを示しています。

<p>この商品は <s>5,000円</s> 3,500円で販売中です。</p>

実行例:

この商品は 5,000円 3,500円で販売中です。

注意事項

  • sタグは視覚的に取り消し線を表示するが、意味的には削除を示すものではない。
  • 正式な削除を意味する場合は、delタグを使用する方が適切。
  • 取り消し線のデザインはCSSでカスタマイズ可能。
  • 価格変更や修正履歴など、視覚的な取り消しを示す用途で使用すると分かりやすい。

よくある質問

Q: sタグとdelタグの違いは?
A: sタグは視覚的に取り消し線を適用するだけで、意味的な削除は示しません。delタグは文書上の削除を意味します。
Q: sタグの取り消し線のスタイルを変更できますか?
A: はい、CSSのtext-decorationプロパティを使うと線の種類を変更できます。
Q: 取り消したテキストを画面リーダーで読み上げますか?
A: 画面リーダーによってはsタグのテキストをそのまま読み上げる場合があります。意味的な削除を示す場合はdelタグを使用しましょう。
Q: sタグはSEOに影響しますか?
A: 直接的な影響は少ないですが、ユーザーにとって有益な情報の提供には適切に使用することが重要です。
Q: sタグを使わずに取り消し線をつける方法はありますか?
A: はい、CSSのtext-decoration: line-through;を使うと、任意の要素に取り消し線を適用できます。

まとめ

  • sタグは、視覚的に取り消し線を適用するタグ。
  • 価格の変更や修正履歴を示す用途に適している。
  • 意味的な削除を示す場合はdelタグを使用する。
  • CSSを使って取り消し線のスタイルを変更できる。
  • 適切に使用すると、情報の更新や修正を分かりやすく伝えられる。