【CSS Modules】text-decoration-colorプロパティの使い方

text-decoration-colorプロパティは、テキストに適用される装飾線の色を保持するプロパティです。このプロパティは、主にHTML要素のテキストコンテンツに引かれる下線（underline）、上線（overline）、打ち消し線（line-through）などの装飾線の色を指定するために使用されます。

設定可能な値としては、redやblueといった色のキーワード、#RRGGBB形式の16進数表記、rgb(R, G, B)形式のRGB関数、hsl(H, S, L)形式のHSL関数など、CSSで定義されている様々な色表現を利用できます。これにより、ウェブページのデザインやブランドイメージに合わせて、装飾線の色を細かくカスタマイズすることが可能です。

例えば、ウェブサイトのナビゲーションリンクにマウスカーソルを合わせた際に表示される下線の色を変更したり、特定の注意書きテキストに引かれた打ち消し線の色を目立たせたりする用途で非常に有効です。

このプロパティは、装飾線の種類を指定するtext-decoration-lineプロパティや、線のスタイル（実線、点線など）を指定するtext-decoration-styleプロパティと組み合わせて使用することで、より豊かなテキスト装飾を実現します。また、これらtext-decoration-line、text-decoration-style、text-decoration-color、そしてtext-decoration-thicknessの各プロパティをまとめて設定できるショートハンドプロパティであるtext-decorationの一部としても機能します。

text-decoration-colorプロパティは、テキストの視覚的な階層を明確にし、情報の重要度を示すなど、ユーザーエクスペリエンス向上に貢献する重要なCSSプロパティの一つです。

Copy
1text-decoration-color: red;

引数なし

引数はありません

戻り値なし

戻り値はありません