CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtext-decoration-colorプロパティでテキスト装飾の色を設定する方法

CSSでテキスト装飾（下線・上線・取り消し線など）の色を変更したい場合は、text-decoration-colorプロパティを使用します。このプロパティを使うことで、テキストそのものの色は変えずに、装飾線だけを好きな色に設定できます。

text-decoration-colorプロパティには、カラーネーム（yellow、orangeなど）、16進数カラーコード、RGB値など、CSSで有効な任意の色の値を指定できます。

例1：上線（overline）の色を設定する

以下の例では、text-decorationプロパティで「overline」を指定し、text-decoration-colorプロパティで黄色（yellow）を設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline;
   text-decoration-color: yellow;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力結果

CSSのtext-decoration-colorプロパティでテキスト装飾の色を設定する方法

例2：下線（underline）の色を設定する

次に、下線（underline）に対してオレンジ色（orange）を設定する別の例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: underline;
   text-decoration-color: orange;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力結果

CSSのtext-decoration-colorプロパティでテキスト装飾の色を設定する方法

ポイントまとめ

  • text-decoration-colorは、text-decoration-line（overline、underline、line-through）と組み合わせて使用します。
  • text-decorationショートハンドプロパティを使えば、「text-decoration: underline orange;」のように装飾の種類と色を一度に指定することも可能です。
  • 主要なモダンブラウザ（Chrome、Firefox、Safari、Edge）でサポートされています。
  1. CSSの@mediaルールとは？メディアクエリの基本と使い方を実例付きで解説

    CSSの@mediaルールは、1つのスタイルシート内で、印刷・画面・すべてなど、異なるメディアタイプに応じて異なるスタイルを指定するために使用されます。通常はカンマ区切りのメディアタイプのリストと、対象メディア用のスタイルルールを含むCSS宣言ブロックが続きます。構文（Syntax）@mediaルールの基本的な構文は以下の通りです。@media not | only mediatype and (expressions) { CSS-Code; }「not」や「only」は省略可能なキーワードで、「expressions」には画面幅などの条件（メディア特性）を指定します。これにより、デ

  2. CSSのcolorプロパティを使って要素の文字色を設定する方法

    CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector {     color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用