css「color」文字に色をつけるプロパティ(html,css)

こんにちは、tanakaです。

今回は「color」の説明です。

「color」は、
文字に色をつけるプロパティです。

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

1:名称指定
2:16進数
3:rgb
4:hsl
5:transparent
6:currentcolor

「とても小さな文字」「透明の文字」は、Googleの評価を下げるため使わないでください。

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

文字化けします

<コピー、ペーストすると文字化けします>

このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。

十分ご注意ください。

広告

cssプロパティcolorの説明

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

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

1:名称指定red
green
blue

black
white

orange
yellow
など
2:16進数#101010
(R16 G16 B16)
3:rgbrgb(R, G, B)A

A=alpha(透明度)
1〜0(見えている〜透明)
4:hsl色相、彩度、輝度
(超高度な方法)
5:transparent文字色が透明
(使わないでください)
6:currentcolor色指定できるプロパティ同士で
色を使いまわせる

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

<1:名称指定>

「名称指定」は、
文字の色を名前で指定します。

赤 = red
緑 = green
青 = blue

などです。

color: red;

<2:16進数>

「16進数」は、
文字の色を16進数で「R」「G」「B」で指定します。

color: #101010;

<3:rgb>

「rgb」は、
「R」「G」「B」「A(透明度)」で指定します。

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

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

color: rgb(57, 199, 90)0.5;

「とても小さな文字」「透明の文字」は、Googleの評価を下げるため使わないでください。

<4:hsl>

「hsl」は、
「色相」「彩度」「輝度」で色を措定する高度な方法です。

<5:transparent>

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

「とても小さな文字」「透明の文字」は、Googleの評価を下げるため使わないでください。

<6:currentcolor>

currentcolorは、
色を使い回せる値です。

子孫方向へ使い回すことができます。

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

プロパティの種類が変わっても使うことができます。

color: currentcolor;

以上
css「color」文字に色をつけるプロパティ(html,css)
の話でした。

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

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