text-decoration-lineプロパティと一緒に使用するtext-decoration-styleプロパティ。
text-decoration-styleプロパティは、値によって装飾線の形状を指定できますが、CSSを学び始めた方には、
と分からない方がいるでしょう。
そこで今回は、text-decoration-styleプロパティの
・応用的な使い方
について説明していきます。
text-decoration-styleプロパティを設定するのに必要な情報をこの記事で説明します。
CSSを学習している方に役立つでしょう。
目次
text-decoration-styleプロパティとは
text-decoration-styleプロパティの読み方
text-decoration-styleは、「テキスト-デコレーション-スタイル」と読みます。
このプロパティの値によって、装飾線の形状が変わります。
text-decoration-styleプロパティの説明
text-decoration-styleプロパティは、
するために使われます。
装飾線の形状を指定するには、装飾線がないといけません。装飾線を指定するためには、text-decoration-lineプロパティを設定します。
つまり、text-decoration-styleプロパティを設定するならば、text-decoration-lineプロパティの設定も必要になるということです。
装飾線だけでなく形状を付けることで、よりテキストが強調されます。
注意するポイントや重要な情報に対して利用できますよ。
text-decoration-styleプロパティで利用できる値
text-decoration-styleプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| solid | 一直線に描画する値です。装飾線の中でも使いやすい形状です。 |
| double | doubleは、装飾線を二重線の形状に描画できます。文章の中で文法に誤りがあるところに二重線で示す使い方があります。 |
| dotted | dottedは、点線を描画します。テキストに点線を装飾することで、より目立ちます。 |
| dashed | 破線を設定するために使う値です。点線と似ていますが、破線は短い線を一定間隔に隙間を空けたものです。 |
| wavy | wavyを設定すると装飾線を波線にできます。波線は、英語のスペルで、間違っているところに引く使い方があります。 |
豆知識
装飾線を消したいときは、text-decoration-styleプロパティにではなく、text-decoration-lineプロパティの値を「none」と設定しましょう。
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 未対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
text-decoration-styleプロパティの基本的な使い方
text-decoration-styleプロパティの使い方
text-decoration-styleプロパティを設定したコードを見ていきましょう。
See the Pen
text-decoration-styleプロパティ使い方 by 吉井大輝 (@DaiW)
on CodePen.
上記のように、まずtext-decoration-lineプロパティで装飾線の設定をします。
上記のように、まずtext-decoration-lineプロパティで装飾線の設定をします。
次に、text-decoration-styleプロパティの値を記述することで、装飾線の形状を変えられます。
text-decoration-styleプロパティで設定できる装飾線の形状一覧
上記で説明したsolidという値以外にどのような形状があるのか、説明していきます。
See the Pen
text-decoration-styleプロパティ装飾線形状一覧 by 吉井大輝 (@DaiW)
on CodePen.
「text-decoration-styleプロパティで利用できる値」で紹介しました値を記述すると上記の通りになります。
装飾線の形状を変更したいとき、好む形状の値を選択して設定してください。
text-decoration-styleプロパティの応用的な使い方
text-decoration-colorプロパティも組み合わせられる
text-decoration-colorプロパティは、text-decoration-styleプロパティ同様テキストの装飾線に関わる設定で、組み合わせて書けます。
実際にコーディングしたものを以下に記載します。
See the Pen
テキストに対するプロパティの組み合わせ by 吉井大輝 (@DaiW)
on CodePen.
3つのプロパティを組み合わせると、印象が大きく違って見えます。
しかし、組み合わせて使う場合、サイト全体を考えて「線の位置」・「形状」・「色」も考慮する必要があります。
3つのプロパティの記述は省略できる
上記の3つのプロパティは、省略して記述ができます。
See the Pen
記述省略 by 吉井大輝 (@DaiW)
on CodePen.
省略して記述する場合、「text-decoration」に複数の値を書いていきます。
3つの内2つのプロパティでも、省略が可能です。
ですが、省略して書くとき、それぞれの値に半角スペースを空けなければいけません。
全角だと設定が反映しないので注意してください。
まとめ
いかがでしたか？
今回、text-decoration-styleプロパティの装飾線の形状や応用的な使い方についてご紹介しました。
text-decoration-styleプロパティで、設定できる値について知ることは大事です。
加えて、組み合わせて使える他のプロパティも一緒に覚えると、テキストに与える印象効果が増します。
説明しましたコードを元にすれば、初心者の方も設定が可能なので、ぜひ参考にしてください。
参考文献：MDN web docs｜text-decoration-style： text-decoration-line で指定された線の種類を設定します
