Skip to content

Latest commit

 

History

History
143 lines (116 loc) · 4.65 KB

index.md

File metadata and controls

143 lines (116 loc) · 4.65 KB
title slug l10n
<s>: 取り消し要素
Web/HTML/Element/s
sourceCommit
fb6eaff788d19ad4013d57db0084f7c4f8e15a91

{{HTMLSidebar}}

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

{{InteractiveExample("HTML Demo: <s>", "tabbed-shorter")}}

<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 インターフェイス {{domxref("HTMLElement")}}

属性

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

例

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

結果

{{EmbedLiveSample("Examples")}}

アクセシビリティの考慮

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

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

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

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報

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