[html,css]文字の上に打ち消し線を入れる方法

ホームページで、文字の上に線が入ってその文字を打ち消しているものを見たことはないでしょうか？今回はその文字の上に打ち消し線をどうやって入れるのかという方法をご紹介したいと思います。

文字の上の打ち消し線の実装の仕方は、htmlを使って打ち消し線を実装する方法とcssを使って打ち消し線を実装する方法の２パターンがあります。今回はその両方の方法についてご紹介したいと思います。

HTMLを使って打ち消し線を実装する方法

HTMLを使って打ち消し線を実装するためには、 delタグを使用します。delタグで囲むだけで、簡単に打ち消し線が実装できますのでHTMLだけでできるのは非常に楽ですね。実際にHTMLを使って打ち消し線を実装したサンプルのコードと実装例は次の通りです。

<del>HTMLを使って打ち消し線を実装して見た。</del>

HTMLを使って打ち消し線をつけて見たサンプル実装例

上記のようにdelタグを使用すると、HTMLだけで打ち消し線が文字の上につきましたね。

CSSを使って打ち消し線を実装する方法

上述では、HTMLのdelタグを使って、打ち消し線を実装する方法をご紹介させていただきました。今度はcssを使って打ち消し線を作ってみようと思います。cssで打ち消し線を作るためには、text-decorationを使用します。サンプルコードと実装例は次の通りになります。

<style>
 .del{
  text-decoration:line-through;
 }
</style>
<div class="del">削除文字</div>

cssを使って打ち消し線を実装したサンプル

上記のように、cssでもHTMLのdelタグのようなことが実装できましたね。

まとめ

今回は、文字の上に打ち消し線を入れる方法をご紹介させていただきました。htmlを使った場合は delタグを使って実装できます。またcssを使った場合は、text-decoration:line-throughを使うと同様の見た目にすることが可能です。