<s>: 取り消し要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

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

属性

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

css
.sold-out {
  text-decoration: line-through;
}
html
<s>本日のおすすめ: サーモン</s> 売り切れ<br />
<span class="sold-out">本日のおすすめ: サーモン</span> 売り切れ

結果

アクセシビリティの考慮

s 要素が存在することは、多くのスクリーンリーダー技術の既定の設定ではアナウンスされません。 CSS の content プロパティを、 ::before および ::after 擬似要素と共に使うことでアナウンスさせることができます。

css
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: " [取り消しテキスト終了] ";
}

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

仕様書

Specification
HTML
# the-s-element

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
s

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報

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