CSS

CSSのtext-decorationとは？使い方を解説

この記事では、text-decorationプロパティの基本的な使い方とさまざまなオプションについて説明します。

text-decorationとは？

text-decorationプロパティは、テキストの装飾や線のスタイルを指定するために使用されます。

主な値としては、underline（下線）、overline（上線）、line-through（取り消し線）などがあります。

リンクのスタイリング

おそらくこれが一番使用頻度が高いと思います。

text-decorationプロパティは、リンクのスタイリングに特に役立ちます。

通常、リンクは下線付きで表示されますが、これはデザイン上の選択肢です。

リンクに下線を付けない場合は、text-decorationプロパティに値"none"を設定します。

a {
  text-decoration: none;
}

 

下線の追加

テキストに下線を追加するには、text-decorationプロパティに値"underline"を設定します。

.underline-text {
  text-decoration: underline;
}

上線の追加

テキストに上線を追加するには、text-decorationプロパティに値"overline"を設定します。

.overline-text {
  text-decoration: overline;
}

取り消し線の追加

テキストに取り消し線（テキストの上に線を引く）を追加するには、text-decorationプロパティに値"line-through"を設定します。

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

複数の線を組み合わせる

text-decorationプロパティでは、複数の線を同時に組み合わせることもできます。

.multiple-lines {
  text-decoration: underline overline line-through;
}

線のスタイルやカラーのカスタマイズ

text-decorationプロパティには、線のスタイルやカラーをカスタマイズするためのオプションもあります。

.custom-style {
  text-decoration: underline dotted red;
}

マウスオーバー時のスタイル変更

ホバー時に下線を追加するには、text-decorationプロパティに値"underline"を設定します。

ホバー時にカラーを変更するには、colorプロパティを使用します。

a:hover {
  text-decoration: underline;
  color: red;
}

リンクのアクティブ状態のスタイリング

リンクがクリックされてアクティブ状態になった場合のスタイリングも制御できます。

アクティブ状態のリンクに下線を追加するには、text-decorationプロパティに値"underline"を設定します。

a:active {
  text-decoration: underline;
}

text-decoration-lineの個別設定

text-decorationプロパティでは、text-decoration-lineを使用して個別の装飾を指定することもできます。

text-decoration-lineには、下線を指定する"underline"、上線を指定する"overline"、取り消し線を指定する"line-through"などの値を使用できます。

.custom-decorations {
  text-decoration-line: underline overline;
}

結論

text-decorationプロパティは、テキストの装飾やスタイリングをカスタマイズするためのプロパティです。

この記事では、リンクのスタイリング、マウスオーバー時のスタイル変更、リンクのアクティブ状態のスタイリング、個別の装飾の指定方法などについて説明しました。
これらのテクニックを駆使して、魅力的で使いやすいウェブページを作成することができます。

-CSS