ホームプログラミング言語 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 進数コードを使用して色を表現する場合、#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% は白 (厳しい露出) です。

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 カラー設定 (6 方法)」についてわかりやすく解説！絶対に観るべきベスト2動画

初心者向けのCSSカラーチュートリアル

https://www.youtube-nocookie.com/watch?v=Ddc-IIrIot0&pp=ugMICgJqYRABGAHKBSRDU1Mg44Kr44Op44O86Kit5a6aICg2IOaWueazlSkmaGw9SkE%3D

CSS Colors Tutorial for Beginners (https://www.youtube-nocookie.com/watch?v=Ddc-IIrIot0&pp=ugMICgJqYRABGAHKBSRDU1Mg44Kr44Op44O86Kit5a6aICg2IOaWueazlSkmaGw9SkE%3D)

超！初心者のためのCSS講座　テキストや背景に色をつける【 color・background-color 】

https://www.youtube-nocookie.com/watch?v=CcdM-4oHZ5k

超！初心者のためのCSS講座　テキストや背景に色をつける【 color・background-color 】 (https://www.youtube-nocookie.com/watch?v=CcdM-4oHZ5k)

css3