【CSS】text-decorationの使い方

こんにちは！Kです！

今回はテキストを装飾するときによく使う「text-decoration」について紹介したいと思います。

このプロパティは、テキストに下線や取り消し線などを付けたいときに使用します。

それではよく使う値について一覧で見てみましょう。

text-decorationで使う値について

よく使う値の一覧

1.装飾しない
text-decoration: none;

2.下線を引く
text-decoration: underline;

3.上線を引く
text-decoration: overline;

4.取り消し線を引く
text-decoration: line-through;

5.赤の点線を引く
text-decoration: underline dotted red;

ブラウザでの表示結果

1. text-decoration: none; を指定。

2. text-decoration: underline; を指定。

3. text-decoration: overline; を指定。

4. text-decoration: line-through; を指定。

5. text-decoration: underline dotted red; を指定。

ちなみに...

上記の値とは他に「blink（点滅）」も存在するのですが、現在は非推奨となっています。

使うブラウザによって点滅する場合としない場合があるためです。

基本は、overline（上線）、underline（下線）、line-through（取消線）、といった値を設定します。

半角スペースで区切れば複数の値を同時に指定可能です。

ブロックレベル要素に設定すれば、その要素内のすべてのインライン要素に適用され、インライン要素に設定すればその要素に設定されます。

※ 補足

ブロックレベル要素

見出し、段落、表など文書を構成する基本的な要素です。

インライン要素

主にブロックレベル要素の内容として用いられる要素です。
文章の一部として扱われます。

最後に

テキストを強調したい場合などに参考にしてもらえればと思います！

他にもよく使うプロパティはどんどん記事で紹介していきたいと思います！

それでは、また！

Follow me!