【HTML】s要素の使い方【無効になったテキストに取り消し線を付けます】

Program

テキスト内容が無効になった場合、s要素でマークアップしましょう。

s要素の基本的な使い方

まずは、以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>s要素</title>
</head>
<body>
    <p><s>販売価格:2,000円(税込み)</s>⇒タイムセール価格:1,400円(税込み)</p>
</body>
</html>

body要素の中に、「文のかたまり(段落)」を示すp要素があります。

p要素の中には、「販売価格:2,000円(税込み)⇒タイムセール価格:1,400円(税込み)」と書かれた文章があります。

そして、「販売価格:2,000円(税込み)」と書かれたフレーズは、s要素でマークアップされています。

このため、ブラウザでの表示結果の通り、「販売価格:2,000円(税込み)」には、取り消し線が付けられて表示されています。

英語(英文)ではどうなる?

では、英語(英文)について、s要素でマークアップしてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>s要素</title>
</head>
<body>
    <p><s>販売価格:2,000円(税込み)</s>⇒タイムセール価格:1,400円(税込み)</p>
    <p><s>Retail price: 2,000 yen (including tax)</s> => Time sale price: 1,400 yen (including tax)</p>
</body>
</html>

先ほどのプログラムに、更にもう一行、英文を追加しました。

追加した英文では、「Retail price: 2,000 yen (including tax)」について、s要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、「Retail price: 2,000 yen (including tax)」には、取り消し線が付けられて表示されています。

s要素は、カタカナにマークアップできるか?

さらに、カタカナ(全角、半角)について、s要素でマークアップを行いました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>s要素</title>
</head>
<body>
    <p><s>販売価格:2,000円(税込み)</s>⇒タイムセール価格:1,400円(税込み)</p>
    <p><s>Retail price: 2,000 yen (including tax)</s> => Time sale price: 1,400 yen (including tax)</p>
    <p>購入パソコン:<s>ウィンドウズPC</s>⇒Mac Book Airへ変更</p>
    <p>購入パソコン:<s>ウィンドウズPC</s>⇒Mac Book Airへ変更</p>
</body>
</html>

先ほどのプログラムに、カタカナのテキストを含む文を追加しました。

追加した文章では、「ウィンドウズPC」、「ウィンドウズPC」について、s要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、カタカナ(全角および半角)についても、取り消し線を付けて表示できました。

以上から、s要素は、「全角文字」、「半角数字」、「英文字」、「カタカナ(全角及び半角)」に対して、マークアップできることが確認できました。

各種ブラウザでの表示結果

また、s要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
s要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、s要素の使い方について、ご参考になさってください!

タイトルとURLをコピーしました