このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

text-decoration-thickness”プロパティ:テキストに引く線の太さCSS3で追加

記事Dec. 12th,2020
テキストに引く下線、上線、打ち消し線の太さを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 text-decoration-thickness: auto;
適用対象 すべての要素
継承 No
パーセント値 1emを“100%”とする
計算値 指定したキーワードもしくは絶対長
アニメーション 計算値

text-decoration-thickness”プロパティはtext-decoration-line”プロパティでテキストに引く下線、上線、打ち消し線の太さを指定するプロパティです。

text-decoration-thickness”プロパティは子要素に継承されませんが、それでも下線や上線、取り消し線は子孫のものも含むすべてのテキストに設定が反映されます。子孫要素に別途text-decoration”プロパティtext-decoration-thickness”プロパティを適用したとしても設定を上書きすることはできません。

サンプルコード

span { text-decoration-thickness: 3px;}

説明
キーワード値
auto ユーザー・エージェントが適切な線の太さを選択します
from-font 使用されているフォントに下線の太さの基準があればその太さを使用します (フォントに太さについての基準がなければ“auto”と同じです。)
<length-percentage>”値
<length> pxpxなどで線の太さを指定
<percentage> 1emを“100%”として線の太さを指定 (“1px”以下となる場合は“1px”となります。)
他の値
共通キーワード

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
text-decoration-thickness
定義なし

定義なし

定義なし

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
auto
定義なし

定義なし

定義なし

定義あり
from-font
定義なし

定義なし

定義なし

定義あり
<length>
定義なし

定義なし

定義なし

定義あり
<percentage>
定義なし

定義なし

定義なし

定義あり

使用例

キーワード値で指定する

<p>
彼女は「<span>猫は上のかぎり黒くてことはみな白き</span>」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
</p>
span {
text-decoration-line: underline;
text-decoration-thickness: auto;
}

彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

span {
text-decoration-line: underline;
text-decoration-thickness: from-font;
}

彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

<length>”値で指定する

span {
text-decoration-line: underline;
text-decoration-thickness: 3px;
}

彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

<percentage>”値で指定する

span {
text-decoration-line: underline;
text-decoration-thickness: 10%;
}

彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク