cssプロパティtext-decorationの説明

こんにちは tanaka です。

今回は、
cssプロパティ
text-decoration の説明です。

text-decorationは、
下線、上線、取り消し線を入れる
プロパティです。

画像blog-text-decoration02
画像blog-text-decoration03
画像blog-text-decoration04

プロパティtext-decorationの種類は、
3種類 + 一括指定があります。

(1)text-decoration-line = 線を入れる
(2)text-decoration-style = 線の種類
(3)text-decoration-color = 線の色

(4)text-decoration = 一括指定


(4)text-decoration = 一括指定
は、省略します。

それでは、
詳しく説明していきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

text-decorationの説明

text-decorationとは

text-decorationは、
下線、上線、取り消し線を入れる
プロパティです。

画像blog-text-decoration02
画像blog-text-decoration03
画像blog-text-decoration04

text-decorationの種類は、3種類 + 一括指定

プロパティtext-decorationの種類は、
3種類 + 一括指定があります。

(1)text-decoration-line = 線を入れる
(2)text-decoration-style = 線の種類
(3)text-decoration-color = 線の色

(4)text-decoration = 一括指定


(4)text-decoration = 一括指定
は、省略します。

(1)text-decoration-line = 線を入れる位置

text-decoration-lineは、
下線、上線、取り消し線の
線を入れるプロパティです。

値は4つ + 複合
1:text-decoration-line: none    = なし
2:text-decoration-line: underline  = 下線
3:text-decoration-line: overline   = 上線
4:text-decoration-line: line-through = 取り消し線

5:text-decoration-line: underline overline line-through = 複合

1:text-decoration-line: none = なし

線を入れません。

画像blog-text-decoration01

2:text-decoration-line: underline = 下線

下に線を入れます。

画像blog-text-decoration02

3:text-decoration-line: overline = 上線

上に線を入れます。

画像blog-text-decoration03

4:text-decoration-line: line-through = 取り消し線

中央に線を入れます。

画像blog-text-decoration04

5:text-decoration-line: underline overline line-through = 複合

一度に複数の線を
入れることもできます。

画像blog-text-decoration05
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;

text-decoration-line: underline overline line-through;
(2)text-decoration-style = 線の種類

text-decoration-styleは、
線の種類を変える
プロパティです。

値は5つ
1:text-decoration-style: solid  = 1本線
2:text-decoration-style: double = 2本線
3:text-decoration-style: dotted = 点線
4:text-decoration-style: dashed = 破線
5:text-decoration-style: wavy  = 波線

1:text-decoration-style: solid = 1本線

画像blog-text-decoration06

2:text-decoration-style: double = 2本線

画像blog-text-decoration07

3:text-decoration-style: dotted = 点線

画像blog-text-decoration08

4:text-decoration-style: dashed = 破線

画像blog-text-decoration09

5:text-decoration-style: wavy = 波線

画像blog-text-decoration10
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
(3)text-decoration-color = 線の色

text-decoration-colorは、
線の色を変えることができます。

指定方法は5種類

名称指定red
green
blue

black
white

orange
yellow
など
#16進数#101010
(R16 G16 B16)
rgbrgb(R, G, B)A
A=alpha(透明度)
0〜1
透明〜見えている
hsl色相、彩度、輝度
(超高度な方法)
transparent太さは
そのままに透明
currentcolor色指定できるプロパティ同士で
使いまわせる

currentcolorは、
色指定できるプロパティ同士で
色を使いまわせるプロパティです。

プロパティの種類が変わっても、
使い回す事ができます。

親要素 = color: red
子要素 = background-color: currentColor
孫要素 = border: solid 50px currentColor
(全てredになる)

継承方向への
使い回しはできますが、

兄弟要素では、
できません。

writing-mode: vertical-rl = 縦書きにも対応

text-decorationは、
縦書きにも対応しています。

underlineで
右側に線が入ります。

画像blog-text-decoration11

writing-mode: vertical-rl;

text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: black;

text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: black;

writing-mode: vertical-rl;

まとめ

text-decorationとは

text-decorationは、
下線、上線、取り消し線を入れる
プロパティ。

画像blog-text-decoration02
画像blog-text-decoration03
画像blog-text-decoration04
text-decorationは、3種類 + 一括指定

プロパティtext-decorationの種類は、
3種類 + 一括指定。

(1)text-decoration-line = 線を入れる
(2)text-decoration-style = 線の種類
(3)text-decoration-color = 線の色

(4)text-decoration = 一括指定

(1)text-decoration-line

text-decoration-lineは、
下線、上線、取り消し線の
線を入れるプロパティ。

値は4つ + 複合
1:text-decoration-line: none    = なし
2:text-decoration-line: underline  = 下線
3:text-decoration-line: overline   = 上線
4:text-decoration-line: line-through = 取り消し線

5:text-decoration-line: underline overline line-through = 複合

text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;

text-decoration-line: underline overline line-through;
(2)text-decoration-style

text-decoration-styleは、
線の種類を変える
プロパティ。

値は5つ
1:text-decoration-style: solid  = 1本線
2:text-decoration-style: double = 2本線
3:text-decoration-style: dotted = 点線
4:text-decoration-style: dashed = 破線
5:text-decoration-style: wavy  = 波線

text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
(3)text-decoration-color

text-decoration-colorは、
線の色を変えることができる。

指定方法は5種類

名称指定red
green
blue

black
white

orange
yellow
など
#16進数#101010
(R16 G16 B16)
rgbrgb(R, G, B)A
A=alpha(透明度)
0〜1
透明〜見えている
hsl色相、彩度、輝度
(超高度な方法)
transparent太さは
そのままに透明
currentcolor色指定できるプロパティ同士で
使いまわせる

currentcolorは、
色指定できるプロパティ同士で
色を使いまわせるプロパティです。

プロパティの種類が変わっても、
使い回す事ができます。

親要素 = color: red
子要素 = background-color: currentColor
孫要素 = border: solid 50px currentColor
(全てredになる)

継承方向への
使い回しはできますが、

兄弟要素では、
できません。

以上、
text-decoration
の話でした。

ありがとうございました。

タイトルとURLをコピーしました