HTML | テキストに打ち消し線を付ける

2022-07-11HTML テキスト,HTML

HTML | テキストに打ち消し線を付ける

HTMLだけでテキストに打ち消し線を付けるサンプルコードを紹介しています。

HTMLだけでテキストに打ち消し線を付ける

HTMLだけで「style属性」にて「text-decoration」プロパティに「line-through」を指定します。

<p><span style="text-decoration:line-through">text-decoration:line-through</span></p>

text-decoration:line-through

また、打ち消し線タグの<s>タグまたは<STRIKE>タグを利用する事ができます。

打ち消し線を付けたいテキストを<s>タグで括ります。
<s>タグはインライン要素です。

<p><s>テキストに打ち消し線</s></p>

テキストに打ち消し線

CSSでテキストに打ち消し線を付ける場合

同じようにCSSでテキストに打ち消し線を付ける場合は以下のようになります。

p {
	text-decoration: line-through;
}

関連:CSS | text-decorationのデザインサンプル集 | ONE NOTES