CSSで取り消し線を入れる方法

CSS SCSS

CSSで取り消し線を入れる方法

CSSで取り消し線を入れる方法は簡単です。
主に text-decoration プロパティを使います。
このプロパティを用いて、テキストに取り消し線（または打ち消し線）を追加することができます。

CSSコードの例

以下は、取り消し線を適用するための基本的なCSSの例です。
クラス名やIDは test- プレフィックスを使って命名します。

HTMLファイル
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>取り消し線の例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="test-strikethrough">このテキストは取り消し線が引かれています。</p>
</body>
</html>
CSSファイル (styles.css)
.test-strikethrough {
  text-decoration: line-through;
}

説明

1. HTMLファイル:

  • p 要素に test-strikethrough というクラスを付けています。

このクラスを用いることで、CSSでスタイルを適用します。

2. CSSファイル:

  • .test-strikethrough クラスに text-decoration プロパティを設定し、その値に line-through を指定しています。

この設定により、テキストに取り消し線が引かれます。

補足

  • text-decoration プロパティは、取り消し線だけでなく、下線や上線なども設定できます。

以下の値を使用して、異なる装飾を適用できます：
- underline - 下線
- overline - 上線
- line-through - 取り消し線

  • 複数の装飾を同時に指定したい場合、複数の値をスペースで区切って指定します。

例えば、取り消し線と下線を同時に適用するには、text-decoration: line-through underline; と指定します。

このように、CSSを用いて取り消し線を簡単に追加でき、デザインの一環としてテキストに視覚的な効果を加えることができます。