text-decoration-color

テキストデコレーションカラー（テキストとフォント）

意味テキストの装飾線の色

text-decoration-colorとは？

text-decoration-colorプロパティは、テキストの下線、上線、打ち消し線などの装飾線の色を指定するために使用します。これにより、テキストの装飾線をテキスト自体とは異なる色で表示することができます。

text-decoration-colorの具体的な使い方

下線の色を変更する例

<style>
    p {
        text-decoration: underline;
        text-decoration-color: red;
    }
</style>

<p>このテキストの下線は赤色です。</p>

p（段落）要素のテキストに下線を引き、その下線の色を赤に設定しています。

リンクの下線色を変更する例

<style>
    a {
        text-decoration: underline;
        text-decoration-color: #00ff00;
    }
</style>
<a href="#">緑色の下線付きリンク</a>

リンク（a要素）の下線の色を緑色に設定しています。

text-decoration-colorに関するよくある質問

Q. テキストと線の色を別々に？

A. はい、text-decoration-colorを使うと、テキストの色と装飾線の色を別々に設定できます。これにより、テキストの可読性を保ちながら、装飾線で強調することが可能です。

Q. 透明度のある色は使える？

A. はい、rgba()やhsla()を使用して、透明度のある色を指定できます。例えば、'text-decoration-color: rgba(255, 0, 0, 0.5);'とすると、半透明の赤色の装飾線を作成できます。

text-decoration-colorが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのtext-decoration-colorやfont、font-weight、font-family、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。