HTMLで使われるタグの一つ、sタグ。
sタグは、誤った情報がない限り必要としないので、サイトに使われないこともあります。
HTMLの初心者の中には、使うとき
と悩む方がいるでしょう。
そこで今回、
・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つの打ち消し線は、
・delタグ：削除された部分
タグの意味が違ってきます。
delタグの使い方が分かるように、コードを以下に記載します。
See the Pen
delタグ by 吉井大輝 (@DaiW)
on CodePen.
sタグとは違い、修正内容を加えずに、削除したいテキストに対して<del>〜</del>で囲います。
同じ打ち消し線を引くタグであっても意味が違うので、用途に応じて2つのタグを上手く使い分けましょう。
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に書きます。
|
1 2 3 4 |
p{ text-decoration: line-through; color: #FF0000; } |
しかし、上記のプロパティのみでは打ち消し線に加え、テキストの色も変わってしまいます。
次にテキストの色が変わらないように、HTMLで新たに<span>〜</span>で囲います。
|
1 |
<p><span>cssでは色を変えられない</span></p> |
最後にsapnに対して、cssでテキストを黒色にするプロパティを書きます。
|
1 2 3 |
span{ color:#000000; } |
結果、打ち消し線のみ色が変わった状態で表示できます。
まとめ
いかがでしたか？
今回、
についてご紹介していきました。
HTMLを学び始めた方も、この記事からsタグの使い方が分かるでしょう。
ぜひ参考にしてみてください。
参考文献：MDN web docs｜<s>: 取り消し線を引いた文字列を表示する要素
