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

text-decoration-styleプロパティは、テキストに適用される装飾線、例えば下線や打ち消し線などの見た目のスタイルを定義するプロパティです。このプロパティを使用することで、テキスト装飾の視覚的な多様性を高めることができます。指定できるキーワード値には、実線を表すsolid、二重線を表すdouble、点線を表すdotted、破線を表すdashed、そして波線を表すwavyがあります。これらの値を適用することで、単一のシンプルな線だけでなく、より特徴的な装飾線をテキストに加えることが可能です。例えば、text-decoration-style: wavy;と設定すると、テキストに波線の下線が引かれます。

このプロパティは、text-decorationという一括指定プロパティの一部を構成しており、装飾線の種類を指定するtext-decoration-line、装飾線の色を指定するtext-decoration-color、そして装飾線の太さを指定するtext-decoration-thicknessといった他の関連プロパティと組み合わせて使用することが一般的です。これらのプロパティを個別に設定することで、テキスト装飾の各要素を詳細に制御し、ウェブページのデザイン要求に応じて柔軟な表現を実現できます。テキストの重要度を視覚的に強調したり、特定の意味を持つテキストに独自の装飾を施したりする際に、text-decoration-styleプロパティは非常に有効な手段となります。これにより、ユーザーインターフェースの使いやすさや情報の伝達効率を高めることに貢献します。

Copy
1div {
2  text-decoration-style: solid;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません