「sタグってなんだろう」や「取り消し線のデザインはどうやって変更するの」と悩んでいませんか？
ここでは、sタグの使い方と取り消し線のデザインの変更方法を、初心者向けに分かりやすく解説します。
ホームページを作っていると、文章に取り消し線を入れたいときもあると思います。
ここでは、sタグの使い方と活用方法を分かりやすく解説するので、ぜひ最後までご覧ください。
■ 【目次】このページを読んで分かること
- sタグの基礎知識
- sタグの使い方
- 他のタグとの比較
- デザインの変更方法
- 【まとめ】sタグとは
|
sタグの基礎知識
まずは、sタグの基礎知識からお伝えします。
sタグとは
sタグは、HTMLで文章に取り消し線を引くためのタグです。
取り消し線を引くと、文章が線で消されたように見えます。
取り消し線の役割
取り消し線は、文章に線を引いて、読んだ人に「この文章はもう使わないよ」と知らせるために使います。
たとえば、価格が変更された商品や、取り消されたイベントの情報を示すときに便利です。
sタグの歴史
sタグは、もともと「strike」というタグとして使われていました。
しかし、よりわかりやすい名前にするために「s」に変更されました。
今では、sタグは取り消し線を引くために使われています。
sタグの使い方
ここでは、sタグの使い方をお伝えします。
sタグの基本的な使い方
まず、HTMLの中で使いたい文章を、sタグで囲みます。
具体的には、次のような形です。
■ <s> タグの記述例
■ ホームページ上の表示
sタグの使用例
sタグは、次のようなときに便利なタグです。
■ 価格が変更されたとき
■ イベントが中止になったとき
|
夏祭りは8月20日に開催されます ⇒ 夏祭りは中止になりました
|
■ 古い情報を示すとき
他のタグとの比較
ここでは、他のタグとの比較について、お伝えします。
delタグとの違い
delタグも、文章に取り消し線を引くために使われますが、sタグとは少し違います。
delタグは、主に文章が削除されたことを示すために使われます。
一方、sタグは、文章が無効になったり、変更されたことを示します。
■ delタグの使い方
|
<del>このテキストは削除されました</del>
|
■ sタグとの違い
delタグは削除された情報を示すのに対し、sタグは変更や無効を示します。
strikeタグとの違い
strikeタグは、昔使われていた取り消し線を引くタグです。
今は、sタグに置き換えられています。
つまり、strikeタグの代わりに、sタグを使うのが一般的です。
■ strikeタグの使い方
|
<strike>このタグは古いです</strike>
|
■ sタグとの違い
現在では、strikeタグはあまり使われず、代わりにsタグが使われます。
まとめ
delタグとstrikeタグは、それぞれ違う目的で使われます。
delタグは削除されたテキスト、sタグは無効や変更されたテキストを示します。
strikeタグは古いタグで、今はsタグを使うのが普通です。
デザインの変更方法
CSSを使うと、sタグを使ったときの色や線のスタイルを変えることができます。
ここでは、デザインの変更方法について、お伝えします。
CSSを使った sタグのデザイン変更
■ 色を変える
取り消し線が赤色になります。
|
<s style="color: red; text-decoration: line-through;">赤色になった取り消し線</s>
|
■ 線のスタイルを変える
取り消し線が点線になります。
|
<s style="text-decoration: line-through dashed;">点線になった取り消し線</s>
|
■ 太さを変える
取り消し線が太くなります。
|
<s style="text-decoration-thickness: 2px;">太くなった取り消し線</s>
|
見やすくするためのコツ
1. テキストと取り消し線の色をはっきりさせると、見やすくなります。
2. 点線や太さを変えることで、より目立たせることができます。
3. 取り消し線を引いたテキストに、なぜ取り消されたのかを説明すると、読者にとってわかりやすくなります。
【まとめ】sタグとは
sタグとは？HTMLで取り消し線を引く方法と使い方を徹底解説の内容は、いかがでしたでしょうか？
sタグは、HTMLで文章に取り消し線を引くためのタグです。
取り消し線を引くと、文章が線で消されたように見えます。
sタグは、商品の値段を変更したときなどに、よく使います。
たとえば、定価： 20,000円 → 今なら大特価： 200円！！
という感じですね。
使う場面もあると思いますので、知っておくと損をしないタグの1つだと思います。
