9.1 CSSでの色の指定方法
色はウェブデザインやウェブ開発において重要な役割を果たすよね。CSSには色を指定するいくつかの方法があって、 デベロッパーが魅力的で直感的なインターフェースを作れるようになってるよ。以下では、CSSで色を指定する様々な方法を見ていこう。 カラーモデルや透明度、グラデーション、色を扱う標準機能も含めてね。
CSSでの色の指定方法:
- 名前付きの色
- 16進数の色
- RGBとRGBA
- HSLとHSLA
- グラデーション
- 透明度
9.2 RGBカラーモデル
RGB (Red Green Blue) モデルは 赤、緑、青を混ぜて色を決定するよ。それぞれの色には0から255までの値が与えられるんだ。
1バイトには256の値を含むことができるんだ: 0から255までね。0は最小、255は最大値だよ。
構文:
color: rgb(255, 0, 0); /* 赤 */
color: rgb(0, 255, 0); /* 緑 */
color: rgb(0, 0, 255); /* 青 */
例:
body {
background-color: rgb(240, 248, 255); /* 背景色: aliceblue */
}
9.3 HEXカラーモデル
HEX (Hexadecimal) は16進数の値を使って色を表現するんだよ。それぞれの値 (RR, GG, BB) は00からFFまでの範囲で変わるんだ。
1バイトには256の値を含むことができるけど、16進数で表記した場合は、0が最小値で、FFが最大値になるよ。
構文:
color: #ff0000; /* 赤 */
color: #00ff00; /* 緑 */
color: #0000ff; /* 青 */
例:
h1 {
color: #4CAF50; /* 緑 */
}
9.4 HSLカラーモデル
HSL (Hue, Saturation, Lightness) は色相、彩度、輝度で色を表現するんだ。色相 (Hue) は 度で測られる (0-360)し、彩度 (Saturation) と輝度 (Lightness) はパーセント (0%-100%) で表される。
構文:
color: hsl(0, 100%, 50%); /* 赤 */
color: hsl(120, 100%, 50%); /* 緑 */
color: hsl(240, 100%, 50%); /* 青 */
例:
p {
color: hsl(210, 100%, 50%); /* 青 */
}
9.5 透明度: RGBAとHSLA
色に透明度を追加するために、RGBAとHSLAモデルが使われるよ。このモデルでは第4のパラメーター、 アルファチャンネル (Alpha) が追加され、透明度のレベルを0 (完全に透明) から1 (完全に不透明) までで指定する。
1. RGBA (Red, Green, Blue, Alpha):
構文:
color: rgba(255, 0, 0, 0.5); /* 半透明の赤 */
color: rgba(0, 255, 0, 0.3); /* 半透明の緑 */
color: rgba(0, 0, 255, 0.7); /* 半透明の青 */
例:
div {
background-color: rgba(255, 99, 71, 0.6); /* 半透明のトマト色 */
}
2. HSLA (Hue, Saturation, Lightness, Alpha):
構文:
color: hsla(0, 100%, 50%, 0.5); /* 半透明の赤 */
color: hsla(120, 100%, 50%, 0.3); /* 半透明の緑 */
color: hsla(240, 100%, 50%, 0.7); /* 半透明の青 */
例:
span {
color: hsla(210, 100%, 50%, 0.8); /* 半透明の青 */
}
GO TO FULL VERSION