【CSS】打ち消し線（delタグ）をカスタマイズする
- 更新
- デザインのメモ
いろんなパターンを実装してみる
簡単に<del>タグで囲っちゃえば打ち消し線はできるのですが、文字サイズが違うテキストに打ち消し線をつけると線が切れちゃいます。
そんな時は<del>タグをカスタマイズしちゃいましょう。
まとめてみました。
打ち消し線の色を変える
text-decorationをナシ（none）にしてbackgroundで装飾するだけなので簡単です。
グラデーション（linear-gradient）で色を変えています。
コードを見る（HTML・CSS）
HTML
<del class="c_del_1">4,000<span class="yen">円</span><span class="tax">（税込4,400円）</span></del>
CSS
del.c_del_1 {
background-image: linear-gradient(#2b2a27, #2b2a27);
background-position: 0 50%;
background-size: 100% 1px;
background-repeat: repeat-x;
text-decoration: none;
padding: 0 2px;
}
打ち消し線を二重にする
text-decorationをナシ（none）にしてbackgroundで装飾するだけなので簡単です。
二重線も、グラデーション（linear-gradient）の応用で作っています。
なんだかややこしそうですが数値と色をいろいろ変えてみると新たな発見があるかもしれません。
コードを見る（HTML・CSS）
HTML
<del class="c_del_2">4,000<span class="yen">円</span><span class="tax">（税込4,400円）</span></del>
CSS
del.c_del_2 {
background-image: linear-gradient(transparent 0.5em, #2b2a27 0, #2b2a27 calc(0.5em + 1px), transparent 0, transparent calc(0.5em + 3px), #2b2a27 0, #2b2a27 calc(0.5em + 4px), transparent 0);
text-decoration: none;
padding: 0 2px;
}
打ち消し線を太くする
text-decorationをナシ（none）にしてbackgroundで装飾するだけなので簡単です。
太くするには、background-sizeを調整してあげればオッケーです。
コードを見る（HTML・CSS）
HTML
<del class="c_del_3">4,000<span class="yen">円</span><span class="tax">（税込4,400円）</span></del>
CSS
del.c_del_3 {
background-image: linear-gradient(#2b2a27, #2b2a27);
background-position: 0 50%;
background-size: 100% 6px;
background-repeat: repeat-x;
text-decoration: none;
padding: 0 2px;
}
いまの書き方
この記事を書いたあと、CSS の text-decoration でできることが増えました。文字の大きさがそろっている文なら、background を使わなくても、色・二重・太さを 1 行で変えられます。
線の色を変える（text-decoration-color）
コードを見る（HTML・CSS）
HTML
<del class="c_del_4">4,000円（税込4,400円）</del>
CSS
del.c_del_4 {
text-decoration-color: #2b2a27;
}
二重にする（text-decoration-style: double）
コードを見る（HTML・CSS）
HTML
<del class="c_del_5">4,000円（税込4,400円）</del>
CSS
del.c_del_5 {
text-decoration-style: double;
text-decoration-color: #2b2a27;
}
太くする（text-decoration-thickness）
コードを見る（HTML・CSS）
HTML
<del class="c_del_6">4,000円（税込4,400円）</del>
CSS
del.c_del_6 {
text-decoration-thickness: 6px;
text-decoration-color: #2b2a27;
}
どれを使う？
- ふつうの文の打ち消し線 →
text-decoration（1 行で書けて、文字の大きさに合わせて線も変わる） - 値段のように、1 つの del の中で文字の大きさがまざる → 上の background の方法（線の高さと太さがそろう）
text-decoration-color・text-decoration-style・text-decoration-thickness は、いまのブラウザ（Chrome・Edge・Safari・Firefox）で使えます。
制作メモ
linear-gradient も、下の「いまの書き方」の text-decoration-color・text-decoration-thickness も、いまのブラウザならどれでも使えます。
さいごに
関連記事
デザコトauthor
あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。
