CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtext-decoration-lineでテキスト装飾の種類を設定する方法

テキストに適用される装飾（下線・上線・打ち消し線など）の種類を設定するには、text-decoration-lineプロパティを使用します。このプロパティを活用することで、テキストにどのような装飾線を表示するかを細かく制御できます。

構文

text-decoration-line: none|underline|overline|line-through|initial|inherit;

指定できる主な値は以下の通りです。

  • none：装飾を一切付けない（既定値）
  • underline：テキストの下に線を表示する
  • overline：テキストの上に線を表示する
  • line-through：テキストの中央に打ち消し線を表示する
  • initial：プロパティを初期値に戻す
  • inherit：親要素の値を継承する

なお、複数の値を半角スペースで区切って指定することも可能です。例えば「overline underline」と記述すれば、上下両方に線を表示できます。

例1：overlineとunderlineを組み合わせる

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力結果

CSSのtext-decoration-lineでテキスト装飾の種類を設定する方法

この例では、demoクラスが付いた段落に対して、青色の上線と下線が同時に表示されます。text-decoration-colorプロパティを併用することで、装飾線の色も自由に変更できる点に注目してください。

例2：line-throughとunderlineを使い分ける

次に、span要素とクラスごとに異なる装飾を適用する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
span {
   text-decoration: line-through;
   text-decoration-color: blue;
}
.demo2 {
   text-decoration: underline;
   text-decoration-color: yellow;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near <span>XYZ College</span> ABC College.</p>
<p class="demo2">Exam begins at 11AM.</p>
</body>
</html>

出力結果

CSSのtext-decoration-lineでテキスト装飾の種類を設定する方法

このように、要素やクラス単位で装飾の種類を切り替えることで、強調したい部分や訂正を表現したい部分を直感的にデザインできます。

  1. CSSのテキスト装飾（text-decoration）の使い方を徹底解説

    CSSのテキスト装飾とは CSSでテキストに下線や上線などの装飾を加えるには、text-decorationプロパティを使用します。このプロパティは、以下の個別プロパティをまとめて指定できるショートハンド（一括指定）プロパティとして機能します。 text-decoration-line text-decoration-color text-decoration-style それぞれの役割は次のとおりです。 text-decoration-line： 装飾線の種類と位置（下線・上線・取り消し線など）を指定します。 text-decoration-color： 装飾線の色を指定します。 text

  2. CSSのtext-decorationプロパティでテキスト装飾を付ける方法

    CSSのtext-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用します。値として「underline（下線）」「overline（上線）」「line-through（打ち消し線）」などを指定でき、色やスタイルも組み合わせて設定可能です。また、このプロパティはtext-decoration-line（装飾線の種類）、text-decoration-color（装飾線の色）、text-decoration-style（装飾線のスタイル）という3つの個別プロパティを一括して指定できるショートハンド（省略記法）でもあります。基本構文text-decorationプロ