CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3での色の定義方法：RGB・RGBA・HSL・HSLAの使い方を解説

CSS3で色を定義するには、RGB、RGBA、HSL、HSLA の各形式を使用します。これらに加えて、カラーネームや16進数（HEX）値でも色を指定することが可能です。

RGBAカラー値とは

CSS3のRGBAは、赤（Red）、緑（Green）、青（Blue）、アルファ（Alpha）の頭文字を取ったものです。アルファ値は色の不透明度を表し、0.0〜1.0の範囲の数値で指定します。1.0が完全な不透明、0.0が完全な透明になります。

次の画像は、RGBAのアルファパラメータによって透明度がどのように変化するかを示したものです。

CSS3での色の定義方法：RGB・RGBA・HSL・HSLAの使い方を解説

RGBAの記述例

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color:rgba(108,111,35,0.6);}
#demo2 {background-color:rgba(108,111,35,0.5);}
#demo3 {background-color:rgba(108,111,35,0.4);}
#demo4 {background-color:rgba(108,111,35,0.3);}
#demo5 {background-color:rgba(108,111,35,0.2);}
#demo6 {background-color:rgba(108,111,35,0.1);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>

表示結果

CSS3での色の定義方法：RGB・RGBA・HSL・HSLAの使い方を解説

HSLカラー値とは

HSLは、要素に色を設定する際に用いられる「色相（Hue）」「彩度（Saturation）」「輝度（Lightness）」を表します。色相は0〜360の角度で指定し、0（または360）が赤、120が緑、240が青に対応します。彩度と輝度はパーセント値で指定します。

HSLの記述例

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsl(150, 100%, 50%);}
#demo2 {background-color: hsl(150, 100%, 50%);}
#demo3 {background-color: hsl(140, 100%, 40%);}
#demo4 {background-color: hsl(120, 100%, 40%);}
#demo5 {background-color: hsl(120, 100%, 30%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>

表示結果

CSS3での色の定義方法：RGB・RGBA・HSL・HSLAの使い方を解説

HSLAカラー値とは

HSLAは、色相（Hue）、彩度（Saturation）、輝度（Lightness）にアルファ（Alpha）を加えた形式です。アルファ値は色の不透明度を表し、0.0が完全な透明、1.0が完全な不透明となります。

HSLAの記述例

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>

表示結果

CSS3での色の定義方法：RGB・RGBA・HSL・HSLAの使い方を解説

16進数（HEX）値で色を指定する方法

続いて、16進数（HEX）値を使って色を設定する方法を見てみましょう。以下の例では、背景色を #B13838 に指定し、文字色を白に設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   text-align: justify;
   text-justify: inter-word;
   color: white;
   background-color: #B13838;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>

表示結果

CSS3での色の定義方法：RGB・RGBA・HSL・HSLAの使い方を解説

  1. CSS3のcolumn-ruleプロパティで段組みの罫線を設定する方法

    CSS3で段組み（マルチカラム）レイアウトに罫線を設定するには、ショートハンドプロパティである column-rule を使用します。このプロパティを使うことで、以下の個別プロパティをまとめて指定できます。column-rule-width：段と段の間の罫線の幅を設定 column-rule-style：段と段の間の罫線のスタイルを設定 column-rule-color：段と段の間の罫線の色を設定column-ruleの構文column-rule プロパティの値は、次のように指定します。column-rule: column-rule-width column-rule-style colu

  2. CSS3でキーフレームアニメーションを定義する方法

    CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームとは、アニメーションの途中の状態（中間ステップ）を制御するための仕組みです。開始時点と終了時点のスタイルを指定することで、その間の変化をブラウザが自動的に補間してくれます。以下に、CSS3でキーフレームを定義するコード例を示します。コード例<!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;