項 目 | 説 明 |
---|---|
記述形式 | セレクタ {text-decoration-color: 色 } |
値 の形式 | #rrggbb (RGB16進) | 色の名前 |
初 期 値 | 現在の色 |
対応ブラウザー | C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
適用可能な要素 | すべての要素 |
継 承 | しない |
text-decoration-colorプロパティ は,テキストの下線・上線・打消し線・点滅に関して,この部分の色を指定します。
以下に代表的な16色の #rrggbb と色の名前を示します。
#rrggbb | 色の名前 | 表 示 |
---|---|---|
#ffffff | white | |
#c0c0c0 | silver | |
#0000ff | blue | |
#00ffff | aqua | |
#00ff00 | lime | |
#ffff00 | yellow | |
#ff0000 | red | |
#ff00ff | fuchsia | |
#808080 | gray | |
#008080 | teal | |
#000000 | black | |
#000080 | navy | |
#008000 | green | |
#808000 | blue | |
#800000 | maroon | |
#800080 | purple |
なお、色の名前の一覧は原色大辞典のブラウザで名前が定義されている140色の色名,RGB の 16進数による色の一覧は、同じくカラーコード順のカラーチャートなどを参照してください。
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: 実線で青の下線が付きます。 |