<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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

試してみましょう

<p><s>There will be a few tickets available at the box office tonight.</s></p>

<p>SOLD OUT!</p>

/* stylelint-disable-next-line block-no-empty */
s {
}
コンテンツカテゴリー 記述コンテンツ, フローコンテンツ
許可されている内容 記述コンテンツ
タグの省略 なし。開始タグと終了タグの両方が必須です。
許可されている親要素 記述コンテンツを受け入れるすべての要素
暗黙の 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

ブラウザーの互換性

関連情報

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