ホーム プログラミング言語 Web関連 css3 CSS カラー設定 (6 方法)

CSS カラー設定 (6 方法)


 
 
私たちが画面上で見るさまざまな色は、すべて赤(赤)、緑(緑)、青(青)の三原色で構成されており、この三色を異なる割合で混ぜ合わせることで、別の色が得られます。赤、緑、青の色の値は、色を最大限に制御できます。

 

CSS は、HTML 要素の色 (背景色や要素のフォント色など) を設定するためのいくつかのプロパティ (色、背景など) を提供します。次の表に示すように、さまざまな形式の値で色を指定できます。

価値 説明
色名 色名を使用して、赤、青、茶色、ライトシーグリーンなどの特定の色を設定します。色名は大文字と小文字を区別しません。 color: red;
16 進コード 16 進数コードを使用して、#RRGGBB または #RGB (#ff0000 など)、「#」の後に 6 または 3 個の 16 進数文字 (0-9、AF) の形式で特定の色を設定します。 color: #f03;
RGB rgb() 関数を使用して、赤、緑、青の 3 原色の強度を制御して、さまざまな色を実現します。 color: RGB(255,0,51);
RGBA RGBA は RGB を拡張し、rgba() 関数を使用して実装する必要がある色の透明度を設定するために、RGB に基づいてアルファ チャネルを追加します。 color: rgba(255,0,0,0.1);
HSL hsl() 関数を使用して色の色相、彩度、および明るさを調整し、さまざまな色を実現します。 color: hsl(120,100%,25%);
HSLA HSLA は HSL を拡張し、HSL に基づいてアルファ チャネルを追加して色の透明度を設定します。これは hsla() 関数を使用して実装する必要があります。 color: hsla(240,100%,50%,0.5);

1.色名

色の名前を使用して色を設定するのが最も簡単な方法です。次の表に示すように、色を表すいくつかのキーワードが CSS で定義されています。これらのキーワードを使用すると、要素の色を簡単に設定できます。

色名 色名
aqua 空色 black
blue fuchsia 赤紫色
gray グレー green
lime ライトグリーン maroon フクシア
navy 濃紺 olive オリーブ
orange オレンジ purple
red sliver ライトグレー
teal 青緑 white
yellow 黄色    

上記の表で紹介した 17 色に加えて、ブラウザは多くの色名をサポートしていますが、色の解像度はブラウザによって異なる場合があります.安全のために、CSS で色名を使用して指定することはお勧めしません.色。

2.16進コード

16 進数コードとは、 #で始まる 6 桁の 16 進数 (0 ~ 9、a ~ f) で色を表現する方法を指し、6 桁の数字は 3 つのグループに分けることができ、各グループは 2 つの数字を示します。赤、緑、青の 3 色の強度。たとえば、次のようになります。

 h1 {
    color: #ffa500;
}
p {
    color: #00ff00;
} 

次の図に示すように、PhotoShop や Fireworks などの描画ソフトウェアを使用して、色の 16 進数コードを取得できます。

図: 色の 16 進コードを取得する
図: 色の 16 進コードを取得する(オンラインツールなど取得可能)
 

ヒント: 16 進数コードを使用して色を表現する場合、#00ff00、#ffffff、#aabbcc など、各グループ内の 2 つの 16 進数が同じ場合、#0f0、#fff、#abc と省略できます。

3.RGB

RGBとは赤、緑、青の略で、赤、緑、青の3色を制御することで、さまざまな色を実現できるカラーモードです。 RGB モードを使用して CSS で色を設定するには、rgb() 関数を使用する必要があります。関数の構文は次のとおりです。

rgb(red、green、blue)

そのうち、赤、緑、青はそれぞれ赤、緑、青の 3 原色の強度を表し、これら 3 つのパラメーターの値は 0 ~ 255 の整数、または 0% ~ 100%。次の例に示すように:

 h1 {
    color: rgb(255, 165, 0);
}
p {
    color: rgb(0%, 100%, 0%);
} 

h1 {
    color: rgb(255、165、0);
}
p {
    color: rgb(0%、100%、0%);
} 

4.RGBA

RGBA は RGB の拡張です. RGB に基づいて、アルファ チャネルのコントロールが追加されます. アルファ チャネルは、色の透明度を設定できます.

RGBA モードを使用するには、rgba() 関数を使用する必要があります. この関数は、4 つのパラメータを受け取る必要があります. 赤、緑、青の 3 色の強度に加えて、表現するために 0 から 1 までの 10 進数も必要です色の透明度。0 は完全に透明、1 は完全に不透明を意味します。 rgba() 関数の構文は次のとおりです。

rgba(red、green、blue, alpha);

その中で、赤、緑、青はそれぞれ赤、緑、青の 3 原色の強度を表し、アルファは色の透明度を表します。次に例を示します。

 h1 {
    color: rgba(255, 0, 0, 0.5);
}
p {
    color: rgba(0, 255, 0, 1);
} 

5.HSL

HSLとは、Hue(色相)、Saturation(彩度)、Lightness(明るさ)の略で、色相、彩度、明度の3属性を調整することで異なる色を実現できるカラーモードでもあります。 CSS で HSL モードを使用するには、hsl() 関数を使用する必要があります。関数の構文は次のとおりです。

hsl(hue, saturation, lightness)

構文は次のように説明されています。

1) 色相

次の図に示すように、パラメーター hue はカラー ホイールの色の度合い (0 から 360) を示し、0 または 360 は赤、120 は緑、240 は青を意味します。

図: 色相パラメータの説明
図: 色相パラメータの説明実際試してみましょう
 

2) 彩度

パラメータの彩度はパーセント値で、色の彩度を示します。0% はグレーを意味し、100% はフルカラーを意味します。

 

3) 軽さ

パラメータ lightness もパーセンテージ値であり、色の明るさを示します。0% は黒 (明るさなし)、50% は最適な明るさ (黒すぎず明るすぎない)、100% は白 (厳しい露出) です。

 
6.HSLA

HSLA は HSL の拡張であり、HSLA では色の透明度の制御が追加され、あとは HSL と同じです。 CSS で HSLA モードを使用するには、hsla() 関数の助けが必要です. 関数の構文は次のとおりです:

hsla(hue, saturation, lightness, alpha)

パラメータ alpha は 0 から 1 の間の 10 進数で、色の透明度を示すために使用されます。0 は完全に透明であることを意味し、1 は完全に不透明であることを意味します。

[例] HTML 要素の色をさまざまな方法で設定する:

 <!DOCTYPE html>
<html>
<head>
    <title>CSS色</title>
    <style>
    p {
        font-size: 16px;
        font-weight: bold;
    }
    #rgb {
        color: rgb(255, 0, 0);
    }
    #rgba {
        color: rgba(255, 0, 0, 0.5);
    }
    #hex {
        color: #EE82EE;
    }
    #short {
        color: #E8E;
    }
    #hsl {
        color: hsl(0, 50%, 50%);
    }
    #hsla {
        color: hsla(0, 50%, 50%, 0.5);
    }
    #built {
        color: green;
    }
    </style>
</head>
<body>
    <p id="rgb">
        色: rgb(255, 0, 0);
    </p>
    <p id="rgba">
        色: rgba(255, 0, 0, 0.5);
    </p>
    <p id="hex">
        色: #EE82EE;
    </p>
    <p id="short">
        色: #E8E;
    </p>
    <p id="hsl">
        色: hsl(0, 50%, 50%);
    </p>
    <p id="hsla">
        色: hsla(0, 50%, 50%, 0.5);
    </p>
    <p id="built">
        色: green;
    </p>
</body>
</html> 

実行結果は次の図のとおりです。

図: CSS の色設定
図: CSS の色設定
 
 

「CSS カラー設定 (6 方法)」についてわかりやすく解説!絶対に観るべきベスト2動画

初心者向けのCSSカラーチュートリアル
超!初心者のためのCSS講座 テキストや背景に色をつける【 color・background-color 】