装飾線の形状を指定!text-decoration-styleプロパティについて詳しく解説

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 で指定された線の種類を設定します