狼読

 
2020/05/27

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

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

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

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

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

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

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

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を使うと同様の見た目にすることが可能です。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/06/05

[jquery]クリック時に矢印を動かして展開したことがわかるアコーディオンの作り方

投稿カレンダー

2020年10月
 1234
567891011
12131415161718
19202122232425
262728293031  

Technology

category

©狼読