<s>: 取り消し要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

<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>本日のおすすめ: サーモン</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: " [取り消しテキスト終了] ";}

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