We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

HTML の <s> 要素は取り消し線を引いた文字列を表示します。 <s> 要素はすでに適切または正確ではなくなった事柄を表現します。しかし、文書の修正を示す場合、 <s> 要素は適切ではありません。この場合は <del><ins> の方が適しているので、こちらを使用してください。

コンテンツカテゴリ 記述コンテンツまたはフローコンテンツ
許可されている内容 記述コンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素
許可されている ARIA ロール すべて
DOM インターフェイス HTMLElement

属性

この要素には、グローバル属性のみがあります。

実装におけるメモ: Gecko 1.9.2 以前はこの要素に HTMLSpanElement インターフェイスを実装しています。

<s>本日のおすすめ: サーモンカルパッチョ</s> 売り切れ<br>
<span style="text-decoration:line-through;">本日のおすすめ:
  サーモンカルパッチョ</span> 売り切れ

結果

本日のおすすめ: サーモンカルパッチョ 売り切れ
本日のおすすめ: サーモンカルパッチョ 売り切れ

アクセシビリティへの配慮

s 要素が存在することは、多くの読み上げ技術の既定の設定ではアナウンスされません。 CSS の ::before 及び ::after 疑似要素と共に content プロパティを使うことでアナウンスさせることができます。

s::before, 
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: " [取り消しテキスト開始] ";
}

s::after {
  content: " [取り消しテキスト終了] ";
}

読み上げソフトを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが取り消しされていることを知らないと理解に影響するような場面でのみ使用するようにしてください。

仕様書

仕様書 策定状況 コメント
HTML Living Standard
s element の定義
現行の標準  
HTML5
s element の定義
勧告  

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり11 あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり

1. Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.

関連情報

  • <strike> 要素は、 <s> 要素の分身でしたが、廃止されており、もうウェブサイトで使用するべきではありません。
  • <del> 要素は、データが削除された場合に代わりに使用するべきものです。
  • CSS の text-decoration-line-through プロパティは、 <s> 要素の以前の視覚効果を実現します。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, ethertank
最終更新者: mfuji09,