CSSの色

CSS コメント CSS RGBカラー

色は、事前定義された色名、または RGB、HEX、HSL、RGBA、HSLA 値を使用して指定します。

CSS カラー名

CSS では、色名を使用して色を指定できます。

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

自分で試してみてください

CSS/HTML は 140 の標準的な色名をサポートしています。

CSS の背景色

HTML 要素の背景色を設定できます。

Welcome to China
China is a great country!

例

<h1 style="background-color:DodgerBlue;">China</h1>
<p style="background-color:Tomato;">China is a great country!</p>

自分で試してみてください

CSS テキストの色

テキストの色を設定できます。

China

China is a great country!

China, officially the People's Republic of China, is a country in East Asia.

例

<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is a great country!</p>
<p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>

自分で試してみてください

CSS 境界線の色

境界線の色を設定できます。

Hello World
Hello World
Hello World

例

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

自分で試してみてください

CSS カラー値

CSS では、RGB 値、HEX 値、HSL 値、RGBA 値、または HSLA 値を使用して色を指定することもできます。

カラー名 "Tomato"と同等:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

カラー名 "Tomato"と同等ですが、不透明度は 50% です:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h3>例</h3> 
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

自分で試してみてください

CSS コメント CSS RGBカラー