TopCSS > del要素の取り消し線を文字と異なる色にする方法
IT/WEB業界への転職なら求人サイトGreen
2012年6月25日

del要素の取り消し線を文字と異なる色にする方法

Posted at June 25,2012 12:03 AM
Category:[CSS]
Tag:[, ]

HTMLのdel要素で、取り消し線を文字と異なる色にする方法を紹介します。

変更前

削除したコンテンツ

変更後

削除したコンテンツ

1.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;
}

2.del要素の取り消し線文字と異なる色にする

本題です。

del要素の取り消し線文字と異なる色にする場合、次のようにdel要素に中にspan要素を記述します。

<del><span>削除したコンテンツ</span></del>

そしてCSSを次のように指定します。

del {
    color: #f00;
}
span {
    color: #000;
}

これで取り消し線を文字と異なる色にできます。

削除したコンテンツ

del要素に指定したcolorプロパティはdel要素内の文字にも反映されるので、del要素の中のspan要素でさらにcolorプロパティを設定することで、取り消し線の色と文字の色を変更することができます。

「CSSを使えばこういうこともできます」という実験なので、HTMLマークアップ上、意味的に問題があるということであればご利用はお控えください。

Posted by yujiro   このページの先頭に戻る
likebox
関連記事
この記事を読んだ人はこんな記事も読んでいます
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字 イタリック アンダーライン ハイパーリンク 引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)

Now loading...
Entries of this Category
ギターに入った猫
IT転職は【Green】Web/インターネット業界の求人に強い転職サイト グリーン
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

Categories
Monthly Archives
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 5.12