概要
CSSのtext-decorationプロパティは、テキストに装飾を加えるためのプロパティです。リンクの下線や取り消し線、上線を付けるなど、文字の強調や視覚的な効果を追加する際に使用されます。特に、ユーザーの注意を引きたい場合やテキストの意味を強調するために有効です。本記事では、text-decorationプロパティの使い方、指定できるスタイル、そして実際の活用例について詳しく解説します。
text-decorationプロパティの基本
text-decorationプロパティは、テキストに下線、上線、取り消し線などを追加するために使用されます。これにより、通常のテキストを簡単に装飾でき、ページのデザインに動きを加えることができます。
基本構文
selector {
text-decoration: 値;
}
例えば、次のように指定すると、a要素に下線が引かれます。
a {
text-decoration: underline;
}
指定できる値
text-decorationプロパティには、さまざまな装飾スタイルを指定できます。それぞれの値とその用途を以下に説明します。
- none テキスト装飾を取り除きます。リンクなどのデフォルトの下線を消したい場合に使用されます。
a {
text-decoration: none;
}
- underline テキストに下線を追加します。リンクの強調や重要な情報のアピールに役立ちます。
h1 {
text-decoration: underline;
}
- overline テキストに上線を追加します。あまり一般的ではありませんが、特定のデザインや強調に使用されます。
p {
text-decoration: overline;
}
- line-through テキストに取り消し線を追加します。セール価格の表示や訂正箇所を示すときに役立ちます。
del {
text-decoration: line-through;
}
- blink（非推奨） テキストを点滅させますが、ユーザーの視認性や可読性を損なうため、現在ではほとんどのブラウザでサポートされていません。
複数の装飾を組み合わせる
text-decorationプロパティでは、複数の装飾を同時に適用することもできます。
h2 {
text-decoration: underline overline; /* 下線と上線を同時に追加 */
}
text-decorationの拡張プロパティ
CSS3以降では、text-decorationプロパティがさらに細かくカスタマイズできるようになりました。以下の拡張プロパティを使うことで、装飾のスタイルを詳細に設定できます。
- text-decoration-line どのライン（下線、上線、取り消し線）を適用するかを指定します。
p {
text-decoration-line: underline line-through; /* 下線と取り消し線を同時に */
}
- text-decoration-color 装飾の色を指定します。これにより、テキストの色とは異なる色で装飾を強調できます。
a {
text-decoration: underline;
text-decoration-color: red; /* 下線の色を赤に設定 */
}
- text-decoration-style 装飾のスタイル（実線、点線、波線など）を指定します。デザインの幅を広げ、より個性的な見た目を作れます。
.dashed {
text-decoration: underline;
text-decoration-style: dashed; /* 点線の下線 */
}
- text-decoration-thickness 装飾の太さを指定します。太めの下線を追加してテキストをさらに強調することができます。
.thick {
text-decoration: underline;
text-decoration-thickness: 2px; /* 太い下線 */
}
実用的な使い方
カスタムリンクスタイル
リンクの下線をデザインに合わせてカスタマイズすることで、ページ全体の統一感を保ちつつ、ユーザーの視線を誘導します。
a {
text-decoration: underline;
text-decoration-color: blue;
text-decoration-style: wavy; /* 波線で視覚的なアクセントを追加 */
}
価格表示に取り消し線を使用
セールや値引き価格の表示で、元の価格を取り消し線で表現し、新しい価格を際立たせます。
.old-price {
text-decoration: line-through;
color: gray;
}
.new-price {
color: red;
font-weight: bold;
}
特定の強調テキストに独自の装飾を追加
重要な情報や警告を目立たせるために、下線や上線、色を組み合わせてカスタマイズします。
.important {
text-decoration: underline;
text-decoration-color: orange;
text-decoration-style: double; /* 二重線で重要性を強調 */
}
まとめ
CSSのtext-decorationプロパティは、テキストに簡単な装飾を加えるための便利なプロパティです。リンクの下線や取り消し線など、視覚的な効果を追加することで、ユーザーの目を引くデザインを作り上げることができます。また、CSS3の拡張プロパティを活用することで、より細かいカスタマイズが可能になり、個性的なスタイルを演出できます。適切に使用することで、デザイン性と機能性を兼ね備えたウェブサイトを構築しましょう。