このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
text-decoration-thickness
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年3月.
* Some parts of this feature may have varying levels of support.
text-decoration-thickness はCSS のプロパティで、要素内のテキストに用いられる装飾線、例えば取り消し線、下線、上線の太さを設定します。
試してみましょう
text-decoration-line: underline;text-decoration-thickness: 3px;text-decoration-line: line-through;text-decoration-thickness: 0.4rem;text-decoration-line: underline overline;text-decoration-thickness: from-font;font-size: 2rem;<section> <p> Confusion kissed me on the cheek, and left a taste so bittersweet </p></section>p { font: 1.5em sans-serif; text-decoration-color: red;}構文
/* 単独のキーワード */text-decoration-thickness: auto;text-decoration-thickness: from-font;/* 長さ */text-decoration-thickness: 0.1em;text-decoration-thickness: 3px;/* パーセント値 */text-decoration-thickness: 10%;/* グローバル値 */text-decoration-thickness: inherit;text-decoration-thickness: initial;text-decoration-thickness: revert;text-decoration-thickness: revert-layer;text-decoration-thickness: unset;値
autoブラウザーがテキスト装飾線の適切な太さを選択します。
from-fontフォントファイルに推奨する太さの情報が含まれている場合は、その値を使用します。フォントファイルにこの情報が含まれていない場合は、
autoが設定されているのと同様に動作し、ブラウザーが適切な太さを選択します。<length>テキスト装飾線の太さを
<length>として指定し、フォントファイルの推奨値やブラウザーの既定値を無視します。<percentage>テキスト装飾線の太さを現在のフォントの1em に対する
<percentage>で指定します。パーセント値は相対値として継承されるので、フォントが変わるとそれに合わせて変わります。ブラウザーは最小でも 1 デバイスピクセルを使用しなければなりません。このプロパティを適用した場合、フォントの大きさが異なる子要素があっても、適用されたボックス全体で太さが一定になります。
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | すべての要素。::first-letterおよび::first-line にも適用されます。 |
| 継承 | なし |
| パーセント値 | 要素自身のフォントサイズに対する相対値 |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |
形式文法
text-decoration-thickness =
auto|
from-font|
<length-percentage>
<length-percentage> =
<length>|
<percentage>
例
様々な太さ
HTML
<p>赤い 1px の下線を引いたテキストです。</p><p>赤い 5px の下線を引いたテキストです。</p><p>これは同等の一括指定を使用しています。</p>CSS
.thin { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 1px;}.thick { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 5px;}.shorthand { text-decoration: underline solid red 5px;}結果
仕様書
| Specification |
|---|
| CSS Text Decoration Module Level 4 # text-decoration-thickness-property |
メモ:このプロパティはtext-decoration-width と呼ばれていましたが、 2019 年にtext-decoration-thickness に更新されました。