CSS text-decoration-line 属性詳解：テキストに多彩なスタイルを追加

CSS プロパティ text-decoration-line

この記事では、CSS の `text-decoration-line` 属性について詳しく解説します。`text-decoration-line` 属性は、テキストの装飾線の種類を指定するために使用されます。構文、使用可能な値 (overline、underline、line-through など)、他のテキスト装飾属性との関係、そして様々なテキストスタイルを作成するための使用方法について説明します。豊富な例を通して、`text-decoration-line` を柔軟に使いこなし、ウェブページのテキストを美しくする方法を学ぶことができます。

1. text-decoration-line とは？

`text-decoration-line` は、テキストに適用する装飾線の種類を指定する CSS プロパティです。装飾線とは、テキストの上、下、または取り消し線として表示される線のことです。

`text-decoration-line` は、より包括的なプロパティである `text-decoration` の短縮形です。`text-decoration` プロパティは、装飾線のスタイル、色、太さなども一度に指定できますが、`text-decoration-line` は装飾線の種類のみを指定するために使用されます。

2. text-decoration-line の構文と値

`text-decoration-line` プロパティには、以下の値を指定することができます。

値	説明
`none`	装飾線を設定しません。
`underline`	テキストの下に線を引きます。
`overline`	テキストの上に線を引きます。
`line-through`	テキストに取り消し線を引きます。
`blink`	テキストを点滅させます (非推奨)。

複数の値をスペース区切りで指定することで、複数の装飾線を同時に適用することもできます。例えば、text-decoration-line: underline overline; と指定すると、テキストに下線と上線を同時に引くことができます。

3. text-decoration-line を使用したテキストスタイルの設定

3.1. 基本的な使用方法

リンクに下線を引く


<a href="#">リンクテキスト</a>


a {
  text-decoration-line: underline;
}

完了したタスクに取り消し線を引く


<ul>
  <li>タスク1</li>
  <li class="completed">タスク2</li>
</ul>


li.completed {
  text-decoration-line: line-through;
}

3.2. 応用的な使用方法

`text-decoration-style` と `text-decoration-color` プロパティと組み合わせて、装飾線のスタイルと色をカスタマイズする。


<p class="important">重要なテキスト</p>


p.important {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: red;
}

`:hover` などの擬似クラスを使用して、マウスホバー時にテキストの装飾効果を変更する。


<a href="#">ホバーで装飾が変わるリンク</a>


a {
  text-decoration-line: none;
}

a:hover {
  text-decoration-line: underline;
  text-decoration-color: blue;
}

4. 他のテキスト装飾属性との関係

`text-decoration-line` は、`text-decoration-style`、`text-decoration-color`、`text-decoration-thickness` などの他のテキスト装飾属性と組み合わせて使用することができます。これらの属性を組み合わせることで、テキスト装飾をより細かく制御することができます。

text-decoration-style: 装飾線のスタイルを指定します (例: 実線、破線、点線など)。
text-decoration-color: 装飾線の色を指定します。
text-decoration-thickness: 装飾線の太さを指定します。

また、`text-decoration` プロパティを使用すると、これらの属性をすべて一度に指定することができます。`text-decoration` プロパティは、`text-decoration-line`、`text-decoration-style`、`text-decoration-color` の値を順に指定することができます。

5. ブラウザの対応状況

`text-decoration-line` プロパティは、主要なブラウザの最新バージョンで広くサポートされています。ただし、古いバージョンのブラウザでは、サポートされていない場合があります。ブラウザの対応状況については、Can I use などのウェブサイトで確認することができます。

6. まとめ

`text-decoration-line` 属性を使用すると、テキストにさまざまな装飾線を簡単に追加することができます。この属性を他のテキスト装飾属性と組み合わせることで、ウェブページのテキストをより魅力的で効果的にすることができます。

CSS text-decoration-line 属性詳解：テキストに多彩なスタイルを追加

1. text-decoration-line とは？

2. text-decoration-line の構文と値

3. text-decoration-line を使用したテキストスタイルの設定

3.1. 基本的な使用方法

3.2. 応用的な使用方法

4. 他のテキスト装飾属性との関係

5. ブラウザの対応状況

6. まとめ

関連するQ&A