• Home
  • Web制作
  • 知られざるtext-decorationの可能性！装飾を使いこなすCSS入門

知られざるtext-decorationの可能性！装飾を使いこなすCSS入門

schedule
Tags: CSS

あなたのWebページを彩る！CSSのtext-decorationとは？

Webページを作成する上で、文字装飾は欠かせない要素の一つと言えるでしょう。CSSを用いることで、自由自在に文字を装飾し、表現力豊かなWebページを生み出すことができます。

数あるCSSのプロパティの中でも、今回は「text-decoration」について詳しく解説いたします。

text-decorationは、文字に下線や取り消し線などの装飾を加えることができる便利なプロパティです。基本的な使い方から、あまり知られていない応用例まで、具体的なコード例を交えながらご紹介いたします。

あわせて読みたい
【CSS入門】Webページを彩るスタイルシートの基本から応用まで徹底解説！

text-decorationの基本的な使い方

まずは、text-decorationの基本的な使い方について確認していきましょう。

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

  • none: 装飾なし (初期値)
  • underline: 下線
  • overline: 上線
  • line-through: 取り消し線

例えば、以下のように記述することで、文字に下線を引くことができます。

.sample1 {
  text-decoration: underline;
}

Sample

上記のように、HTML側で特定のクラスを指定し、CSS側でtext-decorationプロパティを適用することで、対象の文字に装飾を加えることができます。

ワンランク上の表現を！text-decorationの応用テクニック

text-decorationは、単に線種を変更するだけでなく、色やスタイルも変更可能です。

色を変更する

text-decoration-colorプロパティを使用することで、装飾の色を変更できます。

.sample2 {
  text-decoration: underline;
  text-decoration-color: blue;
}

上記コードでは、青い下線が引かれます。

Sample

スタイルを変更する

text-decoration-styleプロパティを使用することで、装飾のスタイルを変更できます。

  • solid: 実線 (初期値)
  • double: 二重線
  • dotted: 点線
  • dashed: 破線
  • wavy: 波線
.sample3 {
  text-decoration: underline;
  text-decoration-style: dashed;
}

上記コードでは、破線のついた下線が引かれます。

Sample

text-decoration-lineで複数指定

text-decoration-lineプロパティを使用すると、複数の装飾を同時に指定できます。

.sample4 {
  text-decoration-line: underline overline;
}

上記コードでは、下線と上線が同時に引かれます。

Sample

text-decoration使用時の注意点

便利なtext-decorationプロパティですが、使用時にはいくつか注意すべき点があります。

リンクのデフォルトスタイル

a要素には、デフォルトで下線が設定されています。そのため、a要素に対してtext-decorationプロパティを使用する際は、意図しない装飾にならないよう注意が必要です。

ブラウザ間の表示の違い

一部の装飾やスタイルは、ブラウザによって表示が異なる場合があります。そのため、異なるブラウザで表示を確認し、意図したとおりに表示されているか確認することが重要です。

まとめ

今回は、CSSのtext-decorationプロパティについて解説いたしました。

基本的な使い方から応用、注意点まで理解することで、より効果的にtext-decorationを活用できるはずです。

ぜひ本記事を参考に、表現力豊かなWebページを作成してみてください。

関連記事