情報が正しく無くなったときに使う?sタグについて紹介!

HTMLで使われるタグの一つ、sタグ

sタグは、誤った情報がない限り必要としないので、サイトに使われないこともあります。

HTMLの初心者の中には、使うとき

sタグの意味やどのような場面に使うか分からない

と悩む方がいるでしょう。

そこで今回、

・sタグの基本
・sタグを使う場面

について説明していきます。

sタグ

sタグの読み方

sタグは、「エス」と読みます。

「Strike-through」を略したタグで、削除という意味があります。

しかし、略したsタグは削除と違った意味を持っています。

sタグは打ち消し線を引く

sタグは、

打ち消し線を引く

効果を持っています。

<s>〜</s>で囲うことで打ち消し線が引かれます。この打ち消し線は、正しく無くなった情報という意味です。

sタグの他にも、打ち消し線を引けるタグがあります。他の打ち消し線は意味が違うので、どのような場面でsタグを使うのか、この記事内で詳しく説明をしていきます。

sタグで利用できる属性

sタグでは以下の属性を使うことができます。

属性 説明
title  補助説明できる属性です。画像やリンクなどに付与すると意味が分かりやすくなります。
style  タグに付与できる属性です。見た目などを調整するCSSを直接HTMLにコーディングできます。
id id属性は、要素に対して固有の識別子を与えられます。 しかし、文書内で重複できない属性です。
class  class属性は、id属性と同じく固有の識別子を与えらますが、文書内で複数の要素に対して指定ができます。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
nternet Explorer  完全対応
Opera  完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

sタグの基本的な使い方

sタグが使われる場面

sタグが使う場面が分かるコードを見ていきましょう。

See the Pen
sタグ
by 吉井大輝 (@DaiW)
on CodePen.

sタグは、正しく無くなった情報に対して、修正内容を加える場合に使われます。

上記のコードの場合、セールによりPCの価格が「¥100,000」から「¥90,000」になっていることを表しています。

sタグとdelタグとの違い

sタグの他に、打ち消し線を引く「delタグ」があります。

2つの打ち消し線は、

・sタグ:正しく無くなった情報
・delタグ:削除された部分

 

タグの意味が違ってきます。

delタグの使い方が分かるように、コードを以下に記載します。

See the Pen
delタグ
by 吉井大輝 (@DaiW)
on CodePen.

sタグとは違い、修正内容を加えずに、削除したいテキストに対して<del>〜</del>で囲います。

同じ打ち消し線を引くタグであっても意味が違うので、用途に応じて2つのタグを上手く使い分けましょう。

注意
もう一つ打ち消し線を付けるstrikeタグがあります。HTML5の仕様で廃止されているため、打ち消し線を付ける際、違う方法を使いましょう。

sタグの応用的な使い方

CSSで打ち消し線を付ける

打ち消し線を付けたい部分に、cssで「text-decoration: line-through;」のプロパティを書くことで、sタグと同様の打ち消し線が引けます。

See the Pen
cssを使った打ち消し線
by 吉井大輝 (@DaiW)
on CodePen.

cssで打ち消し線の色を変える

cssで打ち消し線の色を変えるには、

See the Pen
打ち消し線の色を変える
by 吉井大輝 (@DaiW)
on CodePen.

上記のように書きます。

詳しく理解するために、色を変えるポイントを細かく見ていきましょう。

まず、打ち消し線を引き、色を付けるには以下のプロパティをcssに書きます。

しかし、上記のプロパティのみでは打ち消し線に加え、テキストの色も変わってしまいます。

次にテキストの色が変わらないように、HTMLで新たに<span>〜</span>で囲います。

最後にsapnに対して、cssでテキストを黒色にするプロパティを書きます。

結果、打ち消し線のみ色が変わった状態で表示できます。

まとめ

いかがでしたか?

今回、

sタグの使い方

についてご紹介していきました。

HTMLを学び始めた方も、この記事からsタグの使い方が分かるでしょう。

ぜひ参考にしてみてください。

参考文献:MDN web docs|<s>: 取り消し線を引いた文字列を表示する要素