SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】s要素の使い方、無効になった内容に取り消し線を引こう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!

サーバーとドメインの同時取得で.jpが無料

シュウ
シュウ
今回は【HTML】s要素の使い方、無効になった内容に取り消し線を引こう!
の解説になります!

こんな方に読んでほしい

  • HTMLを学び始めた方へ
  • HTMLについて学びたい方へ
  • 今回はs要素について解説しております。

左の図が、s要素を指定なしの場合は、通常通りのテキスト表示になります。
右の図が、s要素を指定することにより、無効になった内容や、正確ではなくなった内容に取り消し線を引いてくれます。

ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge

s要素について

s要素について

s要素とは、無効になった内容や、正確ではなくなった内容に取り消し線を引いてくれます。

例として、「在庫がなくなり」、無効になっていることをsを指定し、表します。
その他にも「古い価格の変更」などにも使われます。
書き方は以下のようになります。

s要素について

例1、※現在、Mサイズは在庫がありません。

  1. Sサイズ
  2. Mサイズ
  3. Lサイズ

例2、通常価格:5,000円

今なら!!特別価格:1,000円で!

<p>例1、※現在、Mサイズは在庫がありません。</p>
<ol class="s-list">
	<li>Sサイズ</li>
	<li><s>Mサイズ</s></li>
	<li>Lサイズ</li>
</ol>

<hr>

<p>例2、<s>通常価格:5,000円</s></p>
<p><strong>今なら!!特別価格:1,000円で!</strong></p>

ポイント!
今回は、s要素について解説してきました。
s要素はあくまで、無効になった内容や、正確ではなくなった内容に対して、適用されます。
「削除する」という意味ではありません。
内容を削除することを表す内容でしたら、del要素を使いましょう。

まとめ

今回はこれで以上です。
次回も「del要素(削除された箇所を示す)」について解説していきます。

POINT
  • s要素は、 無効になった内容や、正確ではなくなった内容に取り消し線を引いてくれます。
  • s要素は、 「削除する」という意味ではありません。内容を削除することを表す内容でしたら、del要素を使いましょう。
ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top