見出しや装飾がワンランクアップ！CSSのtext-decoration-thicknessを使いこなそう
このプロパティの役割
従来の text-decoration プロパティでは、下線、取り消し線、上線などの装飾の種類のみを指定できました。しかし、text-decoration-thickness の登場により、これらの線の太さを個別に制御できるようになりました。これにより、より洗練された装飾表現が可能になり、デザインの幅が広がります。
- 応用例
- 太字のテキストにのみ下線を引く
- 見出しに装飾線を施し、重要性を強調する
- 特定の単語やフレーズを目立たせる
- デザインの統一感を出す
- 使用方法
text-decorationプロパティと組み合わせて使用します。text-decoration: underline 2px red; /* 下線を2ピクセル幅の赤色で表示 */ - 値
以下の値を設定できます。auto：ブラウザのデフォルト値を使用します。from-font：フォントファイルに指定された太さを優先します。<length>：ピクセルなどの長さで太さを指定します。<percentage>：フォントサイズに対する比率で太さを指定します。
- ブラウザサポート
比較的新しく導入されたプロパティのため、すべてのブラウザで完全対応しているわけではありません。最新の情報は、MDNなどのドキュメントで確認することをおすすめします。
- 他の装飾プロパティと組み合わせて、より複雑な装飾表現を作成することもできます。
- 太さを変えることで、装飾線の目立ち度を調整できます。
text-decoration-thicknessは、下線だけでなく、取り消し線や上線にも適用できます。
p {
text-decoration-thickness: 2px;
}
特定の装飾線に太さを設定
この例では、下線のみを 3px の太さに設定します。
p {
text-decoration: underline 3px;
}
フォントの太さを基準にする
from-font キーワードを使用すると、フォントファイルに指定された太さを基準にすることができます。
p {
text-decoration-thickness: from-font;
}
長さの単位を使用する
ピクセルなどの長さの単位を使用して、太さをより細かく設定できます。
p {
text-decoration-thickness: 0.5em; /* フォントサイズの0.5倍の太さ */
}
割合を使用する
パーセンテージを使用して、相対的な太さを設定できます。
p {
text-decoration-thickness: 50%; /* フォントサイズの50%の太さ */
}
装飾の色と組み合わせる
text-decoration-color プロパティと組み合わせて、装飾線の太さと色を同時に設定できます。
p {
text-decoration: underline 2px red; /* 2px 幅の赤い下線 */
}
様々な装飾を組み合わせる
text-decoration プロパティと組み合わせて、様々な装飾を組み合わせることができます。
p {
text-decoration: underline 2px red overline 1px blue; /* 2px 幅の赤い下線と 1px 幅の青い上線 */
}
- 太さを設定することで、テキストの可読性が損なわれる可能性があります。視認性を考慮した設定を心がけましょう。
text-decoration-thicknessは比較的新しいプロパティであり、すべてのブラウザで完全対応しているわけではありません。
現時点では、text-decoration-thickness の完全な代替手段はありません。しかし、類似の効果を得るために、以下の方法を組み合わせて使用することができます。
ぼかし効果を利用する
text-shadow プロパティを使用して、装飾線にぼかし効果を適用することで、太さを疑似的に表現することができます。
p {
text-decoration: none;
text-shadow: 0 0 2px red; /* 2px 幅の赤いぼかしを下線として表示 */
}
重複線を重ねる
複数の装飾線を重ねることで、太さを表現することができます。
p {
text-decoration: underline 1px currentColor, underline 2px transparent; /* 1px 幅の現在色の下線と 2px 幅の透明な下線を重ねる */
}
ボーダーを利用する
装飾線の代わりに、要素のボーダーを使用して太さを表現することができます。
p {
border-bottom: 2px solid red; /* 2px 幅の赤い下線を要素の下部に表示 */
}
- 複雑な装飾表現には向いていない場合があります。
- 視覚効果のみで太さを表現するため、実際に行間の幅が変わるわけではありません。
- 上記の方法は、text-decoration-thickness と完全な互換性があるわけではありません。
- 将来的には、text-decoration-thickness のような、より高度なテキスト装飾機能が CSS に追加される可能性があります。
text-decoration-thicknessのブラウザ対応状況は、常に改善されています。最新の情報は、MDNなどのドキュメントで確認することをおすすめします。