2012年6月25日
del要素の取り消し線を文字と異なる色にする方法
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
- CSSでoption要素を非表示にするときの不具合について
- レスポンシブWebデザインで3カラムと2カラムを切り替えるためのCSS
- CSS拡張メタ言語「LESS」の使い方
- Google検索結果の横に表示されるスクリーンショットのギザギザをCSSで表示する
- CSS「ボックスモデル」の意味
- CSSでtable幅を設定するためのまとめ
- いまさら聞けないCSS font-familyのまとめ
- ol要素のstart属性を使わずにCSSで番号を途中から振る方法
- Google推奨のブラウザレンダリングに関する4つのベストプラクティス
- img要素でCSS Spriteする方法
- 「a:visited」のプロパティが配色系のものだけに限定された件について
- CSSでリンクの文字と下線の間隔(スペース)を空ける方法
- Google Chromeでテーブルのtd要素の高さが2倍になるCSSの不具合について
- Google ChromeとSafariのCSSハック
- CSSの整形・圧縮が一瞬で行えるツール「csCSSc」
- ブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法
- CSSで3D画像を実現するサンプルいろいろ
- CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか
- CSSでクラスセレクタをくっつけて並べる方法
- pre要素で折り返しをするためのCSS
この記事を読んだ人はこんな記事も読んでいます
人気エントリー
トラックバックURL
コメントする
greeting