HTMLのdel要素で、取り消し線を文字と異なる色にする方法を紹介します。
変更前
削除したコンテンツ変更後
削除したコンテンツ１．del要素とは
del要素は、コンテンツの修正箇所を残す場合に利用するもので、指定した範囲が削除されたことを示します。
HTMLマークアップ
<del>削除したコンテンツ</del>del要素で括ったコンテンツは、次のように取り消し線が表示されます。
削除したコンテンツdel要素にはcite属性とdatetime属性を指定できます。
- cite属性：削除理由となる情報のURLを設定
- datetime属性：削除した日付と時刻を設定
設定例
<del datetime="2012-06-24T08:15:30-05:00"
cite="http://www.foo.org/mydoc/comments.html">
削除したコンテンツ
</del>取り消し線はCSSで非表示にすることもできます。
del {
text-decoration: none;
}また、取り消し線を表示することで文書が読みにくくなる場合は、非表示にするという手もあります。
del {
display: none;
}２．del要素の取り消し線文字と異なる色にする
本題です。
del要素の取り消し線文字と異なる色にする場合、次のようにdel要素に中にspan要素を記述します。
<del><span>削除したコンテンツ</span></del>そしてCSSを次のように指定します。
del {
color: #f00;
}
span {
color: #000;
}これで取り消し線を文字と異なる色にできます。
削除したコンテンツdel要素に指定したcolorプロパティはdel要素内の文字にも反映されるので、del要素の中のspan要素でさらにcolorプロパティを設定することで、取り消し線の色と文字の色を変更することができます。
「CSSを使えばこういうこともできます」という実験なので、HTMLマークアップ上、意味的に問題があるということであればご利用はお控えください。