HTML の <s> 要素は取り消し線を引いた文字列を表示します。 <s> 要素はすでに適切または正確ではなくなった事柄を表現します。しかし、文書の修正を示す場合、 <s> 要素は適切ではありません。この場合は <del> と <ins> の方が適しているので、こちらを使用してください。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
| コンテンツカテゴリ | 記述コンテンツまたはフローコンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | HTMLElement |
属性
この要素にはグローバル属性のみがあります。
実装におけるメモ: Gecko 1.9.2 以前はこの要素に
HTMLSpanElement インターフェイスを実装しています。例
<s>本日のおすすめ: サーモンカルパッチョ</s> 売り切れ<br> <span style="text-decoration:line-through;">本日のおすすめ: サーモンカルパッチョ</span> 売り切れ
結果
本日のおすすめ: サーモンカルパッチョ 売り切れ
本日のおすすめ: サーモンカルパッチョ 売り切れ
アクセシビリティの考慮事項
s 要素が存在することは、多くの読み上げ技術の既定の設定ではアナウンスされません。 CSS の content プロパティを、 ::before および ::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: " [取り消しテキスト終了] ";
}
読み上げソフトを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが取り消しされていることを知らないと理解に影響するような場面でのみ使用するようにしてください。
- Short note on making your mark (more accessible) | The Paciello Group
- Tweaking Text Level Styles | Adrian Roselli
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| HTML Living Standard s element の定義 |
現行の標準 | |
| HTML5 s element の定義 |
勧告 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
s | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox
完全対応
1
| IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
関連情報
<strike>要素は、<s>要素の分身でしたが、廃止されており、もうウェブサイトで使用するべきではありません。<del>要素は、データが削除された場合に代わりに使用するべきものです。- CSS の
text-decoration-lineプロパティは、<s>要素の以前の視覚効果を実現します。