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

text-decorationプロパティは、テキストの装飾に関する設定を保持するプロパティです。このプロパティは、ウェブページ上のテキストに視覚的な装飾線（下線、上線、打ち消し線、または点滅など）を設定するために使用されます。

CSSにおいて、text-decorationは複数の関連する詳細プロパティの値を一度に設定できる「短縮形プロパティ」に分類されます。具体的には、以下の四つのプロパティをまとめて制御できます。

1. text-decoration-line: 装飾線の種類と位置（例: underlineで下線、overlineで上線、line-throughで打ち消し線）を指定します。
2. text-decoration-style: 装飾線のスタイル（例: solidで実線、dottedで点線、wavyで波線）を指定します。
3. text-decoration-color: 装飾線の色を指定します。
4. text-decoration-thickness: 装飾線の太さを指定します。

例えば、「text-decoration: underline wavy red 2px;」と記述することで、テキストに赤色の波線の下線を、太さ2ピクセルで一度に適用できます。このように、個々のプロパティを別々に記述する手間を省き、CSSコードをより簡潔に保つことができます。

特に、HTMLのリンク要素（<a>タグなど）にはデフォルトで下線が表示されますが、このプロパティを用いて「text-decoration: none;」と設定することで、そのデフォルトの下線を非表示にすることが可能です。

text-decorationプロパティは、テキストの見栄えを柔軟に調整し、ユーザーインターフェースのデザイン要件に応じてテキストを装飾するための、非常に汎用性の高いツールです。ウェブサイトの視覚的な魅力を高める上で重要な役割を果たします。

Copy
1.selector {
2  text-decoration: underline red wavy 2px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません