CSS color-value| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル

color value CSS プロパティとは

トピック：CSSの色は、16進数の色,RGBカラー,RGBAカラー,HSLの色,HSLAの色,定義済み・ブラウザ間の色の名前、などの方法で指定する事ができる

プロパティ color value

16進数の色

    情報：
  • #RRGGBBで16進数の色を指定する RR(赤)、GG(緑)、BB(青)の16進数で色の成分を指定する すべての値は00〜FFでなければならない
  • たとえば、#ff0000の値は赤色で表示する これは、赤色成分が最高値(ff)に設定され、その他の値が00に設定されているためです。

実例 コード 1

異なる16進数の色を定義する：サンプル コードを試す
     #webref1 {background-color: #ff0000;}   
    /* red */
    #webref2 {background-color: #00ff00;}   
    /* green */
    #webref3 {background-color: #0000ff;}   
    /* blue */

RGBカラー

    情報：
  • RGBカラー値は、次の構文を持つrgb()関数で指定する ことができる。rgb(red, green, blue)
  • 各パラメータ（赤、緑、青）は色の濃さを定義し、0〜255の整数又は 、パーセント値（0〜100％）にすることができる
  • たとえば、rgb（0,0,255）の値は青で表示される これは、青のパラメータが最高値（255）に設定され、その他の値が0に設定されているためです。
  • また、rgb（0,0,255）とrgb（0％、0％、100％）は同じ色で定義する ことができる

実例 コード 2

異なるRGBカラーを定義する：サンプル コードを試す
     #webref1 {background-color: rgb(255, 0, 0);}   
    /* red */
    #webref2 {background-color: rgb(0, 255, 0);}   
    /* green */
    #webref3 {background-color: rgb(0, 0, 255);}   
    /* blue */

RGBA色

    情報：
  • RGBAカラー値は、オブジェクトの不透明度を指定するアルファチャンネル付きのRGBカラー値の拡張
  • RGBAカラーはrgba()関数で指定されます。この関数の構文はrgba(red, green, blue, alpha)
  • アルファパラメータは、0.0(完全に透明)と1.0(完全に不透明)の間の数値

実例 コード 3

不透明度の異なるRGBAカラーを定義する：サンプル コードを試す
     #webref1 {background-color: rgba(255, 0, 0, 0.3);}   
    /* red と opacity */
    #webref2 {background-color: rgba(0, 255, 0, 0.3);}   
    /* green と opacity */
    #webref3 {background-color: rgba(0, 0, 255, 0.3);}   
    /* blue と opacity */

HSLの色

    情報：
  • HSLは色相、彩度、明度の略で、色の円柱座標表現を表示する ことができる。
  • HSLカラー値は、hsl()関数で指定しますこの関数の構文はhsl(hue, saturation, lightness)
  • 色相はカラーホイールの度合い(0~360) -0(または360)は赤、120は緑、240は青です。彩度はパーセント値です。0％はグレーの陰影を意味し、100％はフルカラーを意味する。明度も百分率です。0％は黒、100％は白です。

実例 コード 4

異なるHSL色を定義する：サンプル コードを試す
     #webref1 {background-color: hsl(120, 100%, 50%);}   
    /* green */
    #webref2 {background-color: hsl(120, 100%, 75%);}   
    /* light green */
    #webref3 {background-color: hsl(120, 100%, 25%);}   
    /* dark green */
    #webref4 {background-color: hsl(120, 60%, 70%);}    
    /* pastel green */

HSLAの色

    情報：
  • HSLAカラー値は、オブジェクトの不透明度を指定するアルファチャンネル付きHSLカラー値の拡張
  • HSLAカラー値は、次の構文を持つhsla()関数で指定する ことができる hsla(hue, saturation, lightness, alpha)
  • アルファパラメータは、0.0(完全に透明)と1.0(完全に不透明)の間の数値

実例 コード 5

不透明度の異なるHSLAカラーを定義します。サンプル コードを試す
     #webref1 {background-color: hsla(120, 100%, 50%, 0.3);}   
    /* green with opacity */
    #webref2 {background-color: hsla(120, 100%, 75%, 0.3);}   
    /* light green with opacity */
    #webref3 {background-color: hsla(120, 100%, 25%, 0.3);}   
    /* dark green with opacity */
    #webref4 {background-color: hsla(120, 60%, 70%, 0.3);}    
    /* pastel green with opacity */

色キーワード

    情報：
  • 色のキーワードは、特定の色を表す、大文字と小文字を区別しない識別子。 例：red, blue, brown, green

実例 コード 6

異なる色キーワードを定義する：サンプル コードを試す
     #webref1 {background-color: red;}   
    /* red */
    #webref2 {background-color: green;}   
    /* green */
    #webref3 {background-color: blue;}   
    /* blue */

transparent キーワード

    情報：
  • transparent は完全に透明な色を表すキーワード。 この色のアイテムの背景は完璧に見えるこれはアルファチャンネルの最大値を持つ黒色で、計算値 rgba(0, 0, 0, 0)のショートカット

currentColor キーワード

    情報：
  • currentColorがcolorプロパティの値として使用されている場合、colorプロパティに継承された値が使用される
  • currentColorキーワードは、colorプロパティの値を表示 します。 これにより、デフォルトでプロパティが受け取らなくても、colorの値を使用することができる。

あらかじめ定義されたすべてのブラウザでサポートされているカラー名

HTMLコード：例

サンプル コードを試す
    <div style="color:red; border: 1px dashed currentColor;">この文字列の色は赤
       <div style="background:currentColor; height:3px;"></div>
       このブロックは赤い境界線で囲まれている
    </div>
    /* currentColor の例 */
     この文字列の色は赤、下は赤い境界線で区切られている
    このこのブロックの赤い破線で囲まれている

サポートするデスクトップ ブラウザ対応・互換性

PropertyDesktop 互換性
color valueChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応フルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯ありフルサポート◯ありフルサポート◯あり
色キーワードフルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯3フルサポート◯3.5フルサポート◯1
RGB 16進表記 (#RRGGBB, #RGB)フルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯3フルサポート◯3.5フルサポート◯1
関数表記(rgb())フルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯4フルサポート◯3.5フルサポート◯1
HSL color values (hsl())フルサポート◯1フルサポート◯12フルサポート◯1フルサポート◯9フルサポート◯9.5フルサポート◯3.1
Alphaのカラー値 (rgba(), hsla())フルサポート◯1フルサポート◯12フルサポート◯3フルサポート◯9フルサポート◯10フルサポート◯3.1
currentcolorフルサポート◯1 不明フルサポート◯1.5フルサポート◯9フルサポート◯9.5フルサポート◯4
transparentフルサポート◯1 不明フルサポート◯3フルサポート◯9フルサポート◯10フルサポート◯3.1
rebeccapurpleフルサポート◯38 不明フルサポート◯33フルサポート◯11フルサポート◯25フルサポート◯あり
RGBAの16進表記 (#RRGGBBAA, #RGBA)フルサポート◯63サポートなし✖フルサポート◯49 不明フルサポート◯39フルサポート◯9.1
スペースで区切られた機能的な色の記法フルサポート◯65 不明フルサポート◯52 不明フルサポート◯52 不明
rgb()とrgba()の浮動小数点数を許可フルサポート◯66 不明フルサポート◯52 不明フルサポート◯53 不明

サポートするモバイル ブラウザ対応・互換性

PropertyMobile 互換性
color valueAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本対応フルサポート◯1フルサポート◯1フルサポート◯12フルサポート◯4フルサポート◯ありフルサポート◯ありフルサポート◯あり
色キーワードフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯あり
RGB 16進表記 (#RRGGBB, #RGB)フルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯あり
関数表記(rgb())フルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯あり
HSL color values (hsl())フルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯あり
Alphaのカラー値 (rgba(), hsla())フルサポート◯ありフルサポート◯ありフルサポート◯ありフルサポート◯4フルサポート◯ありフルサポート◯ありフルサポート◯あり
currentcolor 不明 不明 不明 不明 不明 不明 不明
transparent 不明 不明 不明 不明 不明 不明 不明
rebeccapurpleフルサポート◯あり 不明 不明フルサポート◯33 不明フルサポート◯8 不明
RGBAの16進表記 (#RRGGBBAA, #RGBA) 不明 不明サポートなし✖ 不明サポートなし✖ 不明 不明
スペースで区切られた機能的な色の記法フルサポート◯65フルサポート◯65 不明フルサポート◯52フルサポート◯52 不明 不明
rgb()とrgba()の浮動小数点数を許可フルサポート◯66フルサポート◯66 不明フルサポート◯52フルサポート◯53 不明 不明
：color-value 関連記事
CSS color-value| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS color-value | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS