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

CSSのrgb()関数とは？RGBカラー値の指定方法を実例付きで解説

CSSのrgb()関数は、Webページ上で色を指定するための関数の一つです。光の三原色である「赤（Red）」「緑（Green）」「青（Blue）」の3つの値を組み合わせることで、任意の色を表現できます。

rgb()関数の基本構文

rgb()関数の各パラメータには、0〜255までの数値、またはパーセンテージ（%）で各色の強度（明るさ）を指定します。

rgb(赤, 緑, 青)
  • 赤（R）：0〜255 または 0%〜100%
  • 緑（G）：0〜255 または 0%〜100%
  • 青（B）：0〜255 または 0%〜100%

例えば、rgb(255, 0, 0)は純粋な赤、rgb(0, 0, 0)は黒、rgb(255, 255, 255)は白を表します。また、3つの値がすべて同じ場合は無彩色（グレー）になります。

使用例1：文字色と背景色の指定

まずは、rgb()関数を使って文字色と背景色を設定する基本的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   text-align: justify;
   text-justify: inter-word;
   color: rgb(213,33,33);
   background-color: rgb(211,211,211);
   font-size: 1.1em;
}
</style>
</head>
<body>
<h2>デモ見出し</h2>
<div>これはデモ用のテキストです。rgb()関数によって、文字色には赤みのある色（rgb(213,33,33)）、背景色には明るいグレー（rgb(211,211,211)）が適用されています。</div>
</body>
</html>

出力結果

CSSのrgb()関数とは？RGBカラー値の指定方法を実例付きで解説

このコードでは、div要素内の文字が赤系の色になり、背景が薄いグレーで表示されます。数値を変えるだけで、同じ構造のまま簡単に配色を変更できるのがrgb()関数の魅力です。

使用例2：グリッドレイアウトとの組み合わせ

次に、CSSグリッドレイアウトと組み合わせて、コンテナとセルにそれぞれ異なる色を指定する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   grid-area: newArea;
   font-size: xx-large;
}
.item3 {
   font-size: small;
}
.item4 {
   font-size: medium;
}
.item5 {
   font-size: x-large;
}
.grid-container {
   display: grid;
   grid-template-areas:
   'newArea newArea . . .'
   'newArea newArea . . .';
   grid-gap: 5px;
   background-color: rgb(0,255,255);
   padding: 5px;
}
.grid-container > div {
   background-color: rgb(255, 50, 80);
   text-align: center;
   padding: 5px 0;
}
</style>
</head>
<body>
<h1>見出し</h1>
<p>ランダムな数値を表示します</p>
<div class="grid-container">
<div class="demo">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
</div>
</body>
</html>

出力結果

CSSのrgb()関数とは？RGBカラー値の指定方法を実例付きで解説

グリッドコンテナの背景にはシアン（rgb(0,255,255)）、各セルの背景にはピンク寄りの赤（rgb(255, 50, 80)）が適用され、鮮やかなコントラストの配色になります。

rgba()関数との違い

色に透明度を持たせたい場合は、rgba()関数を使用します。第4引数としてアルファ値（不透明度）を0〜1の範囲で指定でき、半透明の色を表現できます。

/* 半透明の赤 */
color: rgba(213, 33, 33, 0.5);

まとめ

rgb()関数は、CSSで色を数値として正確に指定できる便利な関数です。0〜255の数値またはパーセンテージで各色の強度を制御することで、約1,677万色（256×256×256）の中から自由に色を選択できます。ブランドカラーやデザインシステムなど、正確な色の再現が求められる場面でぜひ活用してください。

  1. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini

  2. CSSのtext-indentプロパティでテキストのインデントを設定する方法

    テキストのインデント（字下げ）を行うには、CSSの text-indent プロパティを使用します。このプロパティは、段落の最初の行だけをインデントするためのもので、文章の読みやすさやデザイン性を高めたい場合に便利です。text-indentプロパティの基本text-indent には、px（ピクセル）、em、% などの単位を指定できます。値が大きいほど、最初の行が右側に大きくずれます。例1：pxでインデントを指定するまずは、30px を指定した基本的な例を見てみましょう。<!DOCTYPE html> <html> <head> <style>