CSS カラー

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

CSS カラー名

CSSでは、事前定義されたカラー名を使用して色を指定できます：

• Tomato
• Orange
• DodgerBlue
• MediumSeaGreen
• Gray
• SlateBlue
• Violet
• LightGray

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

CSS 背景色

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

例

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS テキストカラー

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

例

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS ボーダーカラー

ボーダーの色を設定できます：

例

<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)

例

<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>