CSS プロパティ text-decoration

```html

CSS text-decoration 属性详解: テキストに装飾線を付ける

CSS text-decoration 属性详解: テキストに装飾線を付ける

この解説では、CSSの`text-decoration`属性について詳しく解説し、そのプロパティ値、使用例、ブラウザ互換性などを網羅して、テキスト装飾線の設定方法を簡単に習得できるようにします。

text-decoration: 装飾線の定義

`text-decoration`属性は、テキストの装飾線の設定に使用されます。この属性には、いくつかの一般的な値があります。

  • `none`: すべての装飾線を削除します。
  • `underline`: 下線を引きます。
  • `overline`: 上線を引きます。
  • `line-through`: 取り消し線を引きます。

`text-decoration`属性は、スペースで区切って複数の値を指定することができます。

コード例:


<p class="underline">下線付きテキスト</p>
<p class="overline">上線付きテキスト</p>
<p class="line-through">取消線付きテキスト</p>
<p class="multiple">複数装飾線付きテキスト</p>

下線付きテキスト

上線付きテキスト

取消線付きテキスト

複数装飾線付きテキスト

text-decoration の子属性: 装飾線のスタイルを細かく制御する

`text-decoration`属性には、装飾線のスタイルをより細かく制御するための４つの子属性があります。

  • `text-decoration-line`: 装飾線の種類を設定します (値は`text-decoration`と同じ)。
  • `text-decoration-color`: 装飾線の色を設定します。
  • `text-decoration-style`: 装飾線のスタイルを設定します (例: 実線、破線など)。
  • `text-decoration-thickness`: 装飾線の太さを設定します。

コード例:


<p class="custom-decoration">カスタム装飾線付きテキスト</p>

カスタム装飾線付きテキスト

text-decoration-skip-ink: 装飾線と文字の重なりを制御する

`text-decoration-skip-ink`属性は、装飾線が文字のストロークを横切るか、避けるかを制御します。

  • `auto`: デフォルト値。ブラウザが自動的に判断します。
  • `none`: 装飾線が文字のストロークを横切ります。
  • `all`: 装飾線が文字のストロークを避けます。

コード例:


<p class="skip-ink-none">装飾線が文字を横切る (skip-ink: none)</p>
<p class="skip-ink-all">装飾線が文字を避ける (skip-ink: all)</p>

装飾線が文字を横切る (skip-ink: none)

装飾線が文字を避ける (skip-ink: all)

※ フォントやブラウザによっては、表示結果が異なる場合があります。

ブラウザの互換性

`text-decoration`とその子属性のブラウザ互換性については、以下の表を参照してください。

属性 Chrome Firefox Safari Edge Opera
text-decoration Yes Yes Yes Yes Yes
text-decoration-line Yes Yes Yes Yes Yes
text-decoration-color Yes Yes Yes Yes Yes
text-decoration-style Yes Yes Yes Yes Yes
text-decoration-thickness Yes Yes Yes Yes Yes
text-decoration-skip-ink Yes Yes Yes Yes Yes

より詳細なブラウザ互換性については、Can I use を参照してください。

まとめ

この記事では、`text-decoration`属性とその子属性を使用して、テキストにさまざまなスタイルの装飾線を付ける方法を学びました。ぜひ、ご自身のプロジェクトで活用してみてください。

よくある質問

Q1: `text-decoration`属性とHTMLのタグ(<u>や<strike>など)の違いは何ですか？

A1: HTMLのタグは、文書の構造を定義するもので、視覚的な表現はCSSに委ねられるべきです。`text-decoration`属性を使用することで、視覚的な表現をCSSで統一的に管理することができます。

Q2: `text-decoration-thickness`属性で指定できる値にはどのようなものがありますか？

A2: `text-decoration-thickness`属性では、``型の値 (px, em, remなど) やパーセンテージ (%) で太さを指定することができます。また、`from-font`キーワードを使用すると、フォントのデフォルトの太さを使用することもできます。

Q3: `text-decoration-skip-ink`属性は、すべてのブラウザで同じように動作しますか？

A3: `text-decoration-skip-ink`属性のサポート状況や動作は、ブラウザやフォントによって異なる場合があります。そのため、意図した通りに表示されない場合は、複数のブラウザで確認したり、代替手段を検討する必要があるかもしれません。

```