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

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

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

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

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

打ち消し線の CSS サンプル

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

del {
    text-decoration: line-through;
}

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

del {
    text-decoration: none;
}

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

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

Sample 01. 打ち消し線の色を変える

まずは色の変更です。

文字色を少し薄くして、打ち消し線を赤色にしてみました。太さは 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 を使っているのでグラデーションにもできますが、あまり派手にすると読みづらくなります。シンプルな実線が一番ですね。

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

Sample 02. 打ち消し線を二重にする

次は上の 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;
}

del はどう使う？

HTML で <del> は「あとから削除された部分」という意味をもちます。

<s> は「関連性がなくなった」という意味ですが、ブログで使う機会（意味）はほとんどないと思います。

古い情報をリライトして打ち消し線を入れるさいは <del> を使う、と覚えておけば間違いはありません。

※ WordPress エディターの打ち消し線は <s> が使われます

古い部分を残すか削除するかの判断

古い部分を残しておいてその横に新しい情報を入れるのか、文章を削除して単にリライトしてしまうのか、というのも難しいところですよね。

個人的には、リピート率の高い記事で情報が古くなったものに関してはいったん打ち消し線で訂正しておいて、新しい情報が常識となった時点で丸ごとリライトするようにしています。古い情報が検索に多数残っているようなら、補足で追記しておくこともあります。

あまりに打ち消し線だらけになるようだと読みづらくなるので、そうした場合には打ち消し線を使わず全部書き換えてしまうのもありでしょう。

読者が求めている情報を提供できているなら、どちらでもよいかなと思いますが…

  ブログの過去記事をリライト・修正する 18 のポイント

まとめ

以上、打ち消し線カスタマイズのご紹介でした。

なんとなく味気ない <del> のデザインを変更したくなったら使ってみてください。

細かい部分ですけど、デザインを少し変えるだけで気分転換になって執筆が楽しくなるかもしれません。