CSSで打ち消し線を駆使する技術:取り消し線の完全ガイド

Webデザインにおいて、テキストの装飾はコンテンツの魅力を高める重要な要素です。特に、打ち消し線や取り消し線は、価格の変更、期限切れの情報、または修正されたテキストを示すために頻繁に使用されます。

CSS(Cascading Style Sheets)を用いて、このようなテキスト装飾を実現する方法は多岐にわたりますが、本記事では、CSSを使った打ち消し線の効果的な利用方法を詳細に説明します。そのため、このガイドを通じて、ウェブサイトのUI/UXを向上させるための知識を深めましょう。

打ち消し線とは?

打ち消し線(または取り消し線)は、テキスト上に水平線を引くことで、そのテキストを「無効化」する視覚的手法です。価格の割引、旧情報の更新、あるいは単純に視覚的な強調を目的として、ウェブサイトや文書で広く用いられます。

CSSによる打ち消し線の実装

まず、CSSを使用して打ち消し線を実装する基本は、text-decorationプロパティを使用することです。このプロパティは、テキストの装飾を指定するために用いられます。打ち消し線を適用するには、text-decoration-lineプロパティにline-through値を設定します。

基本的な使用法

CSS
.strikethrough {
  text-decoration: line-through;
}
CSS

このCSSクラスを下記HTMLの任意のテキスト要素(サンプル)に適用することで、そのテキストに打ち消し線が引かれます。

HTML
<p class="strikethrough">このテキストは打ち消されます。</p>
HTML

例1.基本的な使用法

上記の打ち消し線を適用したイメージが以下になります

このテキストは打ち消されます。

色とスタイルのカスタマイズ

次に、打ち消し線の色やスタイルをカスタマイズすることも可能です。text-decoration-colortext-decoration-styleプロパティを使用して、打ち消し線の色やスタイル(実線、点線など)を変更できます。

CSS
.custom-strikethrough {
  text-decoration: line-through;
  text-decoration-color: red; /* 色の指定 */
  text-decoration-style: dotted; /* スタイルの指定 */
}
CSS

HTML
<p class="custom-strikethrough">このテキストは打ち消されます。</p>
HTML

例2.色とスタイルのカスタマイズ

上記の打ち消し線の色やスタイルをカスタマイズしたイメージが以下になります

このテキストは打ち消されます。

複数の装飾の適用

に、CSS3では、複数の装飾を1つのtext-decorationプロパティで指定することが可能になりました。これにより、打ち消し線以外に下線や上線を同時に適用するなど、より複雑なテキスト装飾が実現できます。

CSS
.multiple-decorations {
  text-decoration: line-through underline;
}
CSS

HTML
<p class="multiple-decorations">このテキストは打ち消されます。</p>
HTML

例3.複数の装飾の適用

上記の複数の装飾を適用したイメージが以下になります。

このテキストは打ち消されます。

打ち消し線を利用したデザインの工夫

ウェブデザインにおいて、打ち消し線は単にテキストを「無効化」するだけではありません。クリエイティブな使い方をすることで、ユーザーの注意を引き、情報を効果的に伝えることができます。

たとえば、セール価格と通常価格を並べて表示する際に、通常価格に打ち消し線を適用することで、割引の価値を強調できます。また、時代遅れの情報や旧バージョンの製品名に打ち消し線を使用することで、最新情報への更新を促すことができます。

結論

CSSを用いた打ち消し線の効果的な使用は、ウェブデザインの視覚的な魅力を高めるだけでなく、情報の提示方法を改善する上で非常に有効です。

この記事で紹介したテクニックを駆使することで、ウェブサイトやアプリケーションのユーザー体験を向上させることができるでしょう。CSSによる打ち消し線の実装は、デザイナーや開発者が持つべき基本的なスキルの一つです。

それでは、クリエイティブな打ち消し線の使用で、あなたのウェブプロジェクトを一層引き立てましょう。

 


作業の手順がわからない、WEB関連の課題をひとまとめに解決したいという方へ

動画制作・ホームページ制作・広告運用代行など、WEBの課題を一本化しませんか?

弊社サービス「IPPONka(一本化)」を是非ご利用ください。

一本化(IPPONka)の詳細はこちら

一本化(IPPONka)すると、話が早い。WEBの課題を一本化。