CSSのtext-decoration-colorプロパティでリンクやテキストの下線の色を変更する方法
text-decoration-colorプロパティとは
CSSのtext-decoration-colorプロパティは、text-decoration-lineで指定された装飾線（下線・上線・取り消し線など）の色を変更するために使用します。通常、下線は文字色と同じ色で表示されますが、このプロパティを使えば下線だけに別の色を指定でき、デザインの幅が大きく広がります。
構文
CSS text-decoration-colorプロパティの基本的な構文は以下のとおりです。
Selector {
text-decoration-color: /*値*/;
}値には、redやvioletなどのカラーキーワード、16進数カラーコード（例：#ff0000）、RGB値やHSL値など、任意のCSSカラー値を指定できます。
使用例1：段落の下線の色を変更する
以下の例では、p要素に下線を引き、その下線の色をバイオレット（violet）に変更しています。
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: gray;
margin: 4%;
font-size: 1.2em;
text-decoration: underline;
text-decoration-color: violet;
}
</style>
</head>
<body>
<p>
Y aserejé-ja-dejé De jebe tu de jebere seibiunouva majavi an de bugui an de güididípi
</p>
</body>
</html>上記コードを実行すると、次のような出力が得られます。
使用例2：リンクの下線の色を変更する
次の例では、div要素とa要素（ハイパーリンク）に対して下線を設定し、その下線の色を緑（green）に統一しています。
<!DOCTYPE html>
<html>
<head>
<style>
div, a {
margin: 4%;
font-size: 1.2em;
text-decoration: underline;
text-decoration-color: green;
}
</style>
</head>
<body>
<div>
Underlined demo text.
<a href=#>Hyperlink here!</a>
</div>
</body>
</html>上記コードを実行すると、次のような出力が得られます。
対応ブラウザについて
text-decoration-colorプロパティは、Chrome、Firefox、Safari、Edgeなどの主要なモダンブラウザでサポートされています。古いバージョンのFirefoxに対応する必要がある場合は、ベンダープレフィックス付きの-moz-text-decoration-colorを併用することを検討してください。
-
HTMLでリンクの色を変更するにはどうすればよいですか？
HTMLでリンクの色を変更する基本HTMLでリンクの色を変更するには、CSSの「color」プロパティを使用します。具体的には、style属性と組み合わせて指定します。style属性は、個々の要素に対してインラインスタイルを適用するための属性です。リンク（<a>タグ）にstyle属性を追加し、そこへcolorプロパティを記述することで、リンクの色を自由に変更できます。ただし、1点注意が必要です。style属性によるインラインスタイルは最も優先度が高いため、<style>タグや外部スタイルシートで設定されたスタイルは上書きされてしまいます。コード例以下のコードを実行すると
-
【HTML入門】相対URLを使ってページをリンクする方法をわかりやすく解説
HTMLでWebサイト内のページ同士をリンクさせるには、<a>タグのhref属性を使用します。特に相対URL（Relative URL）は、同じサイト内の別ページへリンクを貼る際に便利な記述方法で、たとえば /contact や /about_team のような形式で指定します。 aタグの主な属性一覧 <a>〜</a>タグで囲まれたテキストや画像はすべてハイパーリンクとして機能します。<a>タグでよく使われる主な属性は以下の通りです。 No.属性と説明 1 hrefリンク先のURLを指定します。相対パスでも絶対パスでも指定可能です