テキストに装飾線を引くtext-decoration-lineプロパティ。
設定をすると、他のテキストとは違う表現になりますが、
CSSの初心者の方の中には
という方がいるでしょう。
装飾線によって意味が変わるものがあるので、一つずつ理解する必要があります。
そこで今回は、text-decoration-lineプロパティの
・装飾線を使う意味
について解説していきます。
目次
text-decoration-lineプロパティとは
text-decoration-lineプロパティの読み方
text-decoration-lineは、「テキスト-デコレーション-ライン」と読みます。
テキストに装飾を行うプロパティで、複数ある線の中から選び設定をしていきます。
text-decoration-lineプロパティの説明
text-decoration-lineプロパティは、
ために使われます。
text-decoration-lineプロパティの装飾線は、値によってテキストに引かれる線の種類が変わります。
アンダーラインやテキストの中央に線を引くなど、数種類の装飾線の中から使い分けて設定します。
text-decoration-lineプロパティで利用できる値
text-decoration-lineプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| none | noneは、テキストの装飾を行わないときに使う値です。 |
| underline | 値の名前の通り、下線を引くのに使います。下に線があるとテキストを強調できます。 |
| overline | overlineは、テキストに上線を引く値です。下の線と同様テキストを強調させたいときなどに使います。 |
| line-through | テキストの中央部分に線を引くために使う値です。テキストを削除する目的に引く打ち消し線としても利用できます。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 未対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
text-decoration-lineプロパティの基本的な使い方
text-decoration-lineプロパティの使い方
text-decoration-lineプロパティを設定したコードを見ていきましょう。
See the Pen
text-decoration-lineプロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.
装飾線を設定するには、
|
1 2 3 |
.underline{ text-decoration-line:underline; } |
上記のように書いていきます。
text-decoration-lineプロパティを使う際には、テキストと装飾線の色が同じにならないようにします。
なぜなら、同色だとテキストが見えづらくなるからです。
同色以外にも、色の相性の考慮も必要になります。色の組み合わせで、テキストの重要性などを表すことができ、サイトを見ている側に情報をしっかり伝えるための役に立ちます。
豆情報
テキストと装飾線の色を設定していない場合、黒色になります。
text-decoration-lineプロパティの装飾線を一部引かない
text-decoration-lineプロパティには、装飾線を使わないときに使う「none」という値があります。
実際にnoneの値を設定したコードを以下に記述していきます。
See the Pen
text-decoration-lineプロパティnone by 吉井大輝 (@DaiW)
on CodePen.
装飾線の設定はまず以下のように
|
1 2 3 4 |
p{ text-decoration-color:#ff0000; text-decoration-line:underline; } |
pタグに対して、下線と赤い色を装飾する設定をしています。
pタグの中で装飾線を消すために、
|
1 2 3 |
.a{ text-decoration-line:none; } |
pタグに「a」というclass名の指定を行い、text-decoration-lineプロパティにnoneを記述しています。
一つのタグの装飾線の中から、消したい部分があったとき上記のコードを参考にしてみてください。
text-decoration-lineプロパティの応用的な使い方
text-decoration-lineプロパティの上線と下線を一つのテキストに使う
一つのテキストに、上線と下線の2つを一緒に設定することが可能です。
See the Pen
複数のラインを引く by 吉井大輝 (@DaiW)
on CodePen.
設定をするためには、
|
1 |
text-decoration-line:underline overline; |
上記のように、値の後ろに加えたい装飾線の値を記述します。
2つの装飾線が一緒に使われているサイトもあるので、いざ使うときに備えて覚えておきましょう。
まとめ
いかがでしたか？
今回、text-decoration-lineプロパティ設定の使い方や、装飾線を使う意味ついてご紹介しました。
装飾線の利用の仕方次第で、サイトの情報を見やすくも見づらくもしてしまいます。
上手く利用をするためには、まず設定ができるようになることです。
設定に必要な情報は、この記事で詳しく説明をしています。
ぜひ参考にしてください。
参考文献：MDN web docs｜text-decoration-line：下線や上線など、要素内の文字列に使われる装飾の種類を設定します。
