本記事では、HTMLとCSSで打消し線を付ける方法について解説しています。打消し線は古い情報をページから削除せず修正記録として残しておきたい時に使用されるテクニックです。
HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!
HTMLで打消し線を付ける方法
HTMLで打消し線を付けるには、<del>タグを使用します。
<del>
<p>delタグで打消し線</p>
</del>
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>
先輩くん
もし、自分のブログや現場で使用していたら上記で紹介した方法に変更することをオススメします。