目次
CSSの色について
- CSSで色を指定する場合は、カラーキーワード、16進数、関数、のいずれかの方法で指定することが可能です。
16進数書式
16進数書式
p {
color: #ff0000;
}-
16進数書式は、CSSの色をRGBの各値を16進数で指定する書式です。
- RGBとは、red（赤）、green（緑）、blue（青）、の頭文字です。
- RGBでは、赤緑青の三原色を使ってさまざまな色を表現することができます。
- 16進数のアルファベット部分は、大文字でも小文字でもどちらでも構いません。
16進数書式の使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: #ff0000;
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>表示結果
カラーキーワード書式
カラーキーワード書式
p {
color: red;
}- カラーキーワード書式は、CSSの色をカラーキーワードで指定する書式です。
- カラーキーワードは、英語の色の名前です。
- CSSで定義されているカラーキーワードの一覧はカラーキーワードを参照して下さい。。
カラーキーワード書式の使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>表示結果
transparent
transparent
p {
color: transparent;
}- transparentは、透明色を表すキーワードです。
transparentの使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: transparent;
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>表示結果
currentcolor
currentcolor
p {
background-color: currentcolor;
}- currentcolorは、同じ要素のcolorプロパティの値を表すキーワードです。
currentcolorの使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
background-color: currentcolor;
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>表示結果
関数書式
- 関数書式は、CSSの色を関数で指定する書式です。
- 以下、利用できる関数について説明します。
rgb関数
rgb関数
p {
color: rgb(255, 0, 0);
}- rgb関数を利用すると、RGBの各値を10進数で指定することができます。
-
例えば、R値を「100」、G値を「50」、B値を「200」、で指定する場合は以下のように記述します。
- 各値の前後には、空白文字を入れることもできます。
- 各値の間には、「,（カンマ）」を入れます。
rgb関数の使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: rgb(100, 50, 200);
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>表示結果
rgba関数
rgba関数
p {
color: rgba(255, 0, 0, 0.5);
}- rgba関数を利用すると、RGBの各値に加えalpha（不透明度)を指定することができます。
- alpha値は、0.0〜1.0までの数値（整数でも小数でも可）で指定し、0.0が完全な透明で1.0が完全な不透明になります。
- 例えば、R値を「100」、G値を「50」、B値を「200」、alpha値を「0.5」、で指定する場合は以下のように記述します。
rgba関数の使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: rgba(100, 50, 200, 0.5);
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>表示結果
hsl関数
hsl関数
p {
hsl(0, 100%, 50%);
}-
hsl関数を利用すると、色度、彩度、明度、の値で色を指定することができます。
- hslとは、hue（色相）、saturation（彩度）、lightness（明度）、の頭文字をとった単語です。
-
1番目の数値（引数）は、色度（色相環に基づく色味）を表します。
- 単位は「°（度）」で、360°で色相環を1周します。
- 赤は0°、緑は120°、青は240°と定められています。
- 記述する際は、単位の「°」を記述する必要はありません。
-
2番目の数値（引数）は、彩度（色の鮮やかさ）を表します。
- 単位は「%（パーセント）」です。
- 数値が0%に近づくほど、くすんだ色になります。
-
3番目の数値（引数）は、明度（色の明るさ）を表します。
- 単位は「%（パーセント）」です。
- 数値が0%に近づくほど黒くなっていき、100%に近づくほど白くなっていきます。
-
例えば、hue値を「0°」、saturation値を「100%」、lightness値を「50%」、で指定する場合は以下のように記述します。
- 各値の前後には、空白文字を入れることもできます。
- 各値の間には、「,（カンマ）」を入れます。
hsl関数の使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: hsl(0, 100%, 50%);
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>表示結果
hsla関数
hsla関数
p {
hsla(0, 100%, 50%, 0.5);
}- hsla関数を利用すると、HSLの各値に加えalpha（不透明度)を指定することができます。
- alpha値は、0.0〜1.0までの数値（整数でも小数でも可）で指定し、0.0が完全な透明で1.0が完全な不透明になります。
- 例えば、hue値を「0°」、saturation値を「100%」、lightness値を「50%」、alpha値を「0.5」、で指定する場合は以下のように記述します。
hsla関数の使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: hsla(0, 100%, 50%, 0.5);
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>表示結果
hwb関数
hwb関数
p {
hwb(0, 5%, 10%, 0.5);
}-
hwb関数を利用すると、色度、白味、黒味、不透明度、の値で色を指定することができます。
- hwbとは、hue（色相）、whiteness（白味）、blackness（黒味）、の頭文字をとった単語です。
-
1番目の数値（引数）は、色度（色相環に基づく色味）を表します。
- 単位は「°（度）」で、360°で色相環を1周します。
- 赤は0°、緑は120°、青は240°と定められています。
- 記述する際は、単位の「°」を記述する必要はありません。
-
2番目の数値（引数）は、白味の度合いを表します。
- 単位は「%（パーセント）」です。
-
3番目の数値（引数）は、黒味の度合いを表します。
- 単位は「%（パーセント）」です。
-
4番目の数値（引数）は、透明度を表します。省略可。
- 0.0〜1.0までの数値（整数でも小数でも可）で指定し、0.0が完全な透明で1.0が完全な不透明になります。
- hwb関数は、hsl関数と似ていますが、人にとって直感的で使いやすい場合が多いです。
-
例えば、hue値を「0°」、whiteness値を「5%」、blackness値を「10%」alpha値を「0.5」、で指定する場合は以下のように記述します。
- 各値の前後には、空白文字を入れることもできます。
- 各値の間には、「,（カンマ）」を入れます。
hwb関数の使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: hwb(0, 5%, 10%, 0.5);
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>表示結果
