打ち消し線もおしゃれにカスタマイズ！del タグの CSS デザインサンプル

2024/09/19

HTML で打ち消し線を引くときは <del> または <s> を使いますが、どちらも文字と同じ色の線が行の中央に 1 本引かれるだけです。

例：~~打ち消し線打ち消し線打ち消し線~~

わかりやすいですけど、なんとも味気ないですよね。

そこで、この打ち消し線の色を変えたり、二重線にしたり、日本人ぽく訂正印をつけたようなカスタマイズ方法をご紹介します。

打ち消し線の CSS サンプル

打ち消し線には標準で text-decoration:line-through が指定されています。

del {
    text-decoration: line-through;
}

カスタマイズするさいはこれが邪魔になるので、none を指定しておきましょう。

del {
    text-decoration: none;
}

ここから、linear-gradient を使って打ち消し線のスタイルを変えていきます。

サンプルは要素名 <del> で指定していますが、class 名をつけたほうが使いやすいと思います。

打ち消し線の色を変える

まずは色の変更です。

文字色を少し薄くして、打ち消し線を赤色にしてみました。太さは 2px です。

通常のテキスト通常のテキスト~~打ち消し線打ち消し線打ち消し線~~通常のテキスト通常のテキスト

del {
    background-image: linear-gradient(#fe3464, #fe3464);
    background-position: 0 50%;
    background-size: 100% 2px;
    background-repeat: repeat-x;
    color: #888;
    margin: 0 0.4em;
    text-decoration: none;
}

linear-gradient を使っているのでグラデーションにもできますが、あまり派手にすると読みづらくなります。シンプルな実線が一番ですね。

左右に少し余白を入れてあります。

打ち消し線を二重にする

次は上の Sample1 と同じ配色で、打ち消し線を二重にしてみます。

linear-gradient の中身が少し複雑になりますが、「赤色の線＋透明な線＋赤色の線」の位置を calc で指定しています。

通常のテキスト通常のテキスト~~打ち消し線打ち消し線打ち消し線~~通常のテキスト通常のテキスト

del {
    background-image: linear-gradient(transparent 0.5em, #fe3464 0, #fe3464 calc(0.5em + 1px), transparent 0, transparent calc(0.5em + 3px), #fe3464 0, #fe3464 calc(0.5em + 4px), transparent 0);
    color: #888;
    text-decoration: none;
}

色と位置はお好みで変更してください。

打ち消し線＋訂正印にする

お堅い書類で使われる、打ち消し線＋訂正印っぽい形にもできます。

がんばれば全部 CSS だけで実装できると思いますが、ここでは画像を使った簡単なものにしてあります。

用意した画像はこちら。

HTML はこんな感じになります。

<del>打ち消し線打ち消し線打ち消し線打ち消し線打ち消し線</del><img src="https://example.com/img/stamp.png" alt="訂正印" />

CSS は Sample2 を使って、del + img で隣接する画像の指定を加えます。印影ぽくするのに、ちょっと傾けてみました。

通常のテキスト通常のテキスト~~打ち消し線打ち消し線打ち消し線~~通常のテキスト通常のテキスト通常のテキスト通常のテキスト通常のテキスト通常のテキスト

del {
    background-image: linear-gradient(transparent 0.5em, #111 0, #111 calc(0.5em + 1px), transparent 0, transparent calc(0.5em + 3px), #111 0, #111 calc(0.5em + 4px), transparent 0);
    color: #888;
    margin-left: 0.4em;
    text-decoration: none;
}

del + img {
    transform: rotate(-18deg);
    margin: 0 10px 0 -45px;
}