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

text-decoration-lineプロパティは、テキストに表示する装飾線の種類に関する情報を保持するプロパティです。具体的には、テキストの下に引く下線、テキストの上に引く上線、テキストの中央を横切る打ち消し線など、様々な装飾線の表示方法をこのプロパティで指定します。

このプロパティに設定できる主な値には、「underline」があり、これはテキストの下に下線を表示する設定を保持します。「overline」はテキストの上に上線を表示する設定を、「line-through」はテキストの中央に打ち消し線を表示する設定を保持します。また、これらの装飾線を全く表示しないようにするには、「none」という値を指定します。複数の種類の線を同時に表示したい場合は、「underline line-through」のように、値を半角スペースで区切って複数指定することが可能です。例えば、テキストを強調しつつ同時に削除済みであることを示すために、下線と打ち消し線を同時に適用するといった使い方ができます。

このプロパティは、Webページのテキスト装飾の視覚的な表現を細かく制御する際に非常に重要です。装飾線の色やスタイル、太さなどを設定したい場合は、text-decoration-color、text-decoration-style、text-decoration-thicknessといった関連プロパティと組み合わせて使用します。これらの装飾に関するプロパティ群をまとめて記述するためのショートハンドプロパティとしてtext-decorationも存在しますので、用途に応じて使い分けることが推奨されます。特に、Webサイトのリンクにデフォルトで表示される下線を消す場合などには、「text-decoration-line: none;」または「text-decoration: none;」が広く利用されます。

Copy
1text-decoration-line: underline;

引数なし

引数はありません

戻り値なし

戻り値はありません