text-decoration-color:文字に加えられた装飾線の色を指定する
初期値 | currentcolor |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | しない |
アニメーション | <color>値 |
対応ブラウザ | caniuseで確認 |
text-decoration-colorプロパティの説明
text-decoration-color
は、文字に加えられた装飾線の色を指定します。ここで指定された色は、前景色には使われずに下線、上線、打消し線、スペルミスなどでシステム的に表示される波線などに適用されます。
文字に装飾線を加える場合は、まず初めにtext-decoration-line
で線の種類を指定します。初期値では、これがnone
になっているため、色を変えても表示されません。
文字に対する装飾線の値を一括で指定する場合は、text-decoration
を使用して下さい。
text-decoration-colorに指定できる値
- <color>
- CSSで使用できる色を表すデータ型の値です。使用できる形式は、キーワード、16進数、RBG値、HSL値などがあります。
text-decoration-colorの使い方とサンプル
text-decoration-color
プロパティの構文は以下の通りです。
CSS
/* <color>値 */
text-decoration-color: cyan;
text-decoration-color: #f00;
text-decoration-color: #ff0000;
text-decoration-color: rgb(255, 0, 0);
text-decoration-color: rgba(255, 0, 0, 0.5);
text-decoration-color: currentcolor;
text-decoration-color: transparent;
/* グローバル値 */
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: revert;
text-decoration-color: unset;
text-decoration-colorの実例
それでは実際にtext-decoration-color
プロパティの書き方を見ていきましょう。以下の例は、個別のプロパティで装飾線を加えた時の内容です。これらの値は、ショートハンド・プロパティのtext-decoration
でも指定できます。
装飾線の範囲に意味を持たせるには、HTML要素で囲います。打ち消し線に削除や訂正の意味を持たせる場合は<del>
や<s>
、アンダーラインや波線に強調や注釈の意味を持たせる場合は<u>
や<i>
を使用します。
表示確認
CSS
.samp_box {
padding: 1rem;
background: #eee;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
gap: 1rem;
}
.samp_box > section {
overflow: auto;
padding: 0 1rem 1rem;
background: #fff;
}
section > h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
section > p {
margin: .5rem 0 0;
}
.td_1 > p {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: currentcolor;
text-decoration-thickness: auto;
}
.td_2 > p {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: blue;
text-decoration-thickness: 2px;
}
.td_3 > p {
text-decoration-line: line-through;
text-decoration-style: double;
text-decoration-color: #f00;
text-decoration-thickness: from-font;
}
.td_4 > p {
text-decoration-line: underline overline;
text-decoration-style: dotted;
text-decoration-color: rgba(0, 0, 0, 0.5);
text-decoration-thickness: 1px;
}
HTML
<div class="samp_box">
<section class="td_1">
<h2>既定の色や形状</h2>
<p>abcdefg hijklmn opqrstu vwxyz.</p>
</section>
<section class="td_2">
<h2>波線の強調</h2>
<p>abcdefg hijklmn opqrstu vwxyz.</p>
</section>
<section class="td_3">
<h2>二重の打ち消し線</h2>
<p>abcdefg hijklmn opqrstu vwxyz.</p>
</section>
<section class="td_4">
<h2>上下の二箇所を装飾</h2>
<p>abcdefg hijklmn opqrstu vwxyz.</p>
</section>
</div>
text-decoration-colorに関連するCSSプロパティ
テキスト関連 | |
---|---|
text-align | ボックスに含まれる内容の横位置の揃え方を指定する |
text-align-last | ボックスに含まれる内容の最後の行を揃える位置を指定する |
text-combine-upright | 一文字分の空間に挿入する文字の組み合わせを指定する |
text-decoration | 文字の装飾線に関する値を一括で指定する |
text-decoration-color | 文字に加えられた装飾線の色を指定する |
text-decoration-line | 文字に加えられた装飾線の種類を指定する |
text-decoration-skip-ink | 装飾線が文字を通過する祭の処理を指定する |
text-decoration-style | 文字に加えられた装飾線の形状を指定する |
text-decoration-thickness | 文字に加えられた装飾線の太さを指定する |
text-emphasis | テキストに付加する圏点、傍点、脇点に関する値を一括で指定する |
text-emphasis-color | テキストに付加する圏点、傍点、脇点の色を指定する |
text-emphasis-position | テキストに付加する圏点、傍点、脇点の位置を指定する |
text-emphasis-style | テキストに付加する圏点、傍点、脇点の記号を指定する |
text-indent | テキストの一行目に挿入するインデントの幅を指定する |
text-justify | テキストの行端揃えに対して均等割り付けの方法を指定する |
text-orientation | 縦書きモードの文字の向きを指定する |
text-overflow | 行からテキストが溢れている状態の表現方法を指定する |
text-shadow | 文字に影(ドロップシャドウ)を付ける |
text-transform | テキストの大文字・小文字の表記を指定する |
text-underline-position | 文字の下に引かれる装飾線の位置を指定する |