CSSで打ち消し線を駆使する技術：取り消し線の完全ガイド
ippon
Webデザインにおいて、テキストの装飾はコンテンツの魅力を高める重要な要素です。特に、打ち消し線や取り消し線は、価格の変更、期限切れの情報、または修正されたテキストを示すために頻繁に使用されます。
CSS（Cascading Style Sheets）を用いて、このようなテキスト装飾を実現する方法は多岐にわたりますが、本記事では、CSSを使った打ち消し線の効果的な利用方法を詳細に説明します。そのため、このガイドを通じて、ウェブサイトのUI/UXを向上させるための知識を深めましょう。
打ち消し線とは？
打ち消し線（または取り消し線）は、テキスト上に水平線を引くことで、そのテキストを「無効化」する視覚的手法です。価格の割引、旧情報の更新、あるいは単純に視覚的な強調を目的として、ウェブサイトや文書で広く用いられます。
CSSによる打ち消し線の実装
まず、CSSを使用して打ち消し線を実装する基本は、text-decorationプロパティを使用することです。このプロパティは、テキストの装飾を指定するために用いられます。打ち消し線を適用するには、text-decoration-lineプロパティにline-through値を設定します。
基本的な使用法
.strikethrough {
text-decoration: line-through;
}このCSSクラスを下記HTMLの任意のテキスト要素（サンプル）に適用することで、そのテキストに打ち消し線が引かれます。
<p class="strikethrough">このテキストは打ち消されます。</p>例1.基本的な使用法
上記の打ち消し線を適用したイメージが以下になります
このテキストは打ち消されます。
色とスタイルのカスタマイズ
次に、打ち消し線の色やスタイルをカスタマイズすることも可能です。text-decoration-colorとtext-decoration-styleプロパティを使用して、打ち消し線の色やスタイル（実線、点線など）を変更できます。
.custom-strikethrough {
text-decoration: line-through;
text-decoration-color: red; /* 色の指定 */
text-decoration-style: dotted; /* スタイルの指定 */
}<p class="custom-strikethrough">このテキストは打ち消されます。</p>例2.色とスタイルのカスタマイズ
上記の打ち消し線の色やスタイルをカスタマイズしたイメージが以下になります
このテキストは打ち消されます。
複数の装飾の適用
に、CSS3では、複数の装飾を1つのtext-decorationプロパティで指定することが可能になりました。これにより、打ち消し線以外に下線や上線を同時に適用するなど、より複雑なテキスト装飾が実現できます。
.multiple-decorations {
text-decoration: line-through underline;
}<p class="multiple-decorations">このテキストは打ち消されます。</p>例3.複数の装飾の適用
上記の複数の装飾を適用したイメージが以下になります。
このテキストは打ち消されます。
打ち消し線を利用したデザインの工夫
ウェブデザインにおいて、打ち消し線は単にテキストを「無効化」するだけではありません。クリエイティブな使い方をすることで、ユーザーの注意を引き、情報を効果的に伝えることができます。
たとえば、セール価格と通常価格を並べて表示する際に、通常価格に打ち消し線を適用することで、割引の価値を強調できます。また、時代遅れの情報や旧バージョンの製品名に打ち消し線を使用することで、最新情報への更新を促すことができます。
結論
CSSを用いた打ち消し線の効果的な使用は、ウェブデザインの視覚的な魅力を高めるだけでなく、情報の提示方法を改善する上で非常に有効です。
この記事で紹介したテクニックを駆使することで、ウェブサイトやアプリケーションのユーザー体験を向上させることができるでしょう。CSSによる打ち消し線の実装は、デザイナーや開発者が持つべき基本的なスキルの一つです。
それでは、クリエイティブな打ち消し線の使用で、あなたのウェブプロジェクトを一層引き立てましょう。
CSS関連記事
作業の手順がわからない、WEB関連の課題をひとまとめに解決したいという方へ
動画制作・ホームページ制作・広告運用代行など、WEBの課題を一本化しませんか？
弊社サービス「IPPONka（一本化）」を是非ご利用ください。
