【HTML/CSS】打消し線を付ける方法

本記事では、HTMLとCSSで打消し線を付ける方法について解説しています。打消し線は古い情報をページから削除せず修正記録として残しておきたい時に使用されるテクニックです。

HTML/CSSの学習におすすめ書籍

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

総合評価

( 5 )

メリット

• HTMLとCSSの基本が体系的に学べる
• Webデザインの基本が学べる
• 1つのWebサイトを作りながら学べる

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]

楽天ブックス

¥2,486 （2024/11/18 14:59時点 | 楽天市場調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

• 美しいコードが書けるが自然と書けるようになる
• 他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

HTMLで打消し線を付ける方法

HTMLで打消し線を付けるには、<del>タグを使用します。

<del>
  <p>delタグで打消し線</p>
</del>

CSSで打消し線を付ける方法

CSSで打消し線を付けるには、text-decorationプロパティにline-throughの値を指定します。

<p class="sample">text-decoration:line-throughで打消し線</p>

.sample{
  text-decoration: line-through;
}

text-decoration:line-throughで打消し線

非推奨の書き方

最後に非推奨になった書き方を紹介します。非推奨の書き方とは、<strike>タグと<s>タグを使った方法です。書き方は<del>タグと同様に、打消し線を付けたいテキストをタグで囲みます。

<strike>
  <p>strikeタグで打消し線</p>
</strike>
<s>
  <p>sタグで打消し線</p>
</s>

先輩くん

もし、自分のブログや現場で使用していたら上記で紹介した方法に変更することをオススメします。