text-decoration-thicknessプロパティの説明
CSSのtext-decoration-thicknessプロパティは、文字に加えられた装飾線の太さを指定します。既定値では、ブラウザが自動的に計算した太さで表示します。フォントのファイルに推奨する太さの情報が含まれている場合は、その値を使用することもできます。
文字に装飾線を加える場合は、まず初めにtext-decoration-lineで線の種類を指定します。初期値では、これがnoneになっているため、太さを変えても表示されません。
装飾線は色や形状を変化させることも可能です。それぞれの値は以下のプロパティで操作しますが、一括で指定できるtext-decorationというショートハンド・プロパティも用意されています。
text-decoration-color：装飾線の色text-decoration-line：装飾線の種類text-decoration-style：装飾線の形状text-decoration-thickness：装飾線の太さ
text-decoration-thicknessに指定できる値
auto- ブラウザが自動で計算した値を採用します。
from-font- フォントファイルに推奨する太さの情報が含まれている場合は、その値を使用します。その情報が含まれていない場合は、
autoと同じ動作になります。 <length>- 装飾線の太さを長さを表す単位つきの値で指定します。太さによっては文字が読めなくなったり、他の要素に重なってしまうことがあるため、十分に検証してから本番環境に実装しましょう。
<percentage>- 装飾線の太さを現在のフォントの
1emに対する割合で算出します。フォントサイズの値は継承するため、入れ子構造になっている要素に適用した場合は、意図しない太さになることがあります。
text-decoration-thicknessの使い方とサンプルコード
text-decoration-thicknessプロパティの構文は以下の通りです。
/* キーワード値 */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;
/* <length>値 */
text-decoration-thickness: 1px;
text-decoration-thickness: 0.1em;
/* <percentage>値 */
text-decoration-thickness: 10%;
/* グローバル値 */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: revert;
text-decoration-thickness: unset;
text-decoration-thicknessの実例
それでは実際にtext-decoration-thicknessプロパティの書き方を見ていきましょう。以下の例は、個別のプロパティで装飾線を加えた時の内容です。これらの値は、ショートハンド・プロパティのtext-decorationでも指定できます。
装飾線の範囲に意味を持たせるには、HTML要素で囲います。打ち消し線に削除や訂正の意味を持たせる場合は<del>や<s>、アンダーラインや波線に強調や注釈の意味を持たせる場合は<u>や<i>を使用します。
<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>
.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;
}