CSS3: text-decoration-color プロパティ - テキストの下線・上線・打消し線・点滅部分の色

■ 概要

項  目説  明
記述形式 セレクタ {text-decoration-color: }
値 の形式 #rrggbb (RGB16進) | 色の名前
初 期 値 現在の色
対応ブラウザー C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 すべての要素
継  承 しない

■ 解説

text-decoration-colorプロパティ は,テキストの下線・上線・打消し線・点滅に関して,この部分の色を指定します。

以下に代表的な16色の #rrggbb と色の名前を示します。

#rrggbb 色の名前表 示
#ffffffwhite
#c0c0c0silver
#0000ffblue
#00ffffaqua
#00ff00lime
#ffff00yellow
#ff0000red
#ff00fffuchsia
#808080gray
#008080teal
#000000black
#000080navy
#008000green
#808000blue
#800000maroon
#800080purple

なお、色の名前の一覧原色大辞典ブラウザで名前が定義されている140色の色名,RGB の 16進数による色の一覧は、同じくカラーコード順のカラーチャートなどを参照してください。

■ 使用例( text-decoration-colorプロパティの利用)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!-- 
   p.decr1 { text-decoration-line: underline; text-decoration-style: solid; }
   p.decr2 { text-decoration-line: underline; text-decoration-style: solid;
                                         text-decoration-color: red; }
   p.decr3 { text-decoration-line: underline; text-decoration-style: solid;
                                         text-decoration-color: green; }
   p.decr4 { text-decoration-line: underline; text-decoration-style: solid;
                                         text-decoration-color: blue; }
-->
</style>
HTML
<body> ~ </body>
 <p class="decr1"><b>underline solid:</b> 実線で下線が付きます。</p>
 <p class="decr2"><b>underline solid red:</b> 実線で赤の下線が付きます。</p>
 <p class="decr3"><b>underline solid green:</b> 実線で緑の下線が付きます。</p>
 <p class="decr4"><b>underline solid blue:</b> 実線で青の下線が付きます。</p>

ブラウザー 表示例 (未対応のブラウザーでは正しく表示できません)

underline solid: 実線で下線が付きます。

underline solid red: 実線で赤の下線が付きます。

underline solid green: 実線で緑の下線が付きます。

underline solid blue: 実線で青の下線が付きます。

■ 備考