cssプロパティcolorについての説明

こんにちは tanaka です。

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

colorは、
文字の色を指定する
プロパティです。

指定方法は6つあります。

名称指定red
green
blue

black
white

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

それでは
詳しくみて行きましょう。

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

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

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

cssプロパティcolorの説明

colorは、
文字の色を指定する
プロパティです。

指定方法は6つあります。

名称指定red
green
blue

black
white

orange
yellow
など
#16進数#101010
(R16 G16 B16)
rgbrgb(R, G, B)A
A=alpha(透明度)
0〜1
透明〜見えている
hsl色相、彩度、輝度
(超高度な方法)
transparent文字色が透明
(取扱注意)
currentcolor色指定できるプロパティ同士で
色を使いまわせる
1 名称指定

名称指定は、
色名で文字の色を指定できます。

例)
red、green、blue

2 #16進数

#16進数は、
16進数で、R G Bの指定ができます。

例)
#101010
(R16 G16 B16)

3 rgb

rgbは、
R G B + 透明度(opacityと同じ)
の指定ができます。

透明度と同時指定できるため、
かなり便利でもあります。

例)
rgb(R, G, B)A

A=alpha(透明度)
 0〜1
透明〜見えている

4 hsl

hslは、
色相、彩度、輝度で色を表す
超高度な方法です。

5 transparent

transparentは、
文字を透明にします。

透明文字の使用は、
Googleの評価を著しく下げる
ため

使う場合は、
十分調べてからの方が
良いかもしれません。

6 currentcolor

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

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

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

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

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

まとめ

colorとは

colorは、
文字の色を指定する
プロパティです。

指定方法は6つ

指定方法は6つあります。

名称指定red
green
blue

black
white

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

以上、
color
の話でした。

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

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