EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSS色

✅ HSLを推奨： HSLはデザイナーに非常にフレンドリーです——色を調整するとき、彩度と明度を一定に保ちながら色相（H）の値を変えるだけで、同じカラーファミリーの異なる色合いを得られます。W3SchoolsのカラーピッカーはHSLを使用しています。

📌 ユースケース： RGBAのA（アルファ）チャネルは透明度を制御でき、オーバーレイマスクや半透明の背景に最適です。例えば、rgba(0, 0, 0, 0.5)は50%透明の黒いオーバーレイです。

💡 ヒント： #FF0000は#F00と省略できます——6桁の各ペアが同じ場合、3桁に圧縮できます。同様に#aabbccは#abcになります。一般的な色の16進数値を覚えておく価値があります：#fff（白）、#000（黒）、#f00（赤）。

色はウェブデザインの最も基本的なビジュアル要素の一つです。CSSは、シンプルな色名から柔軟なHSLまで、複数の色の表現方法を提供し、それぞれに適したユースケースがあります。

色の値の早見表

形式 例 説明
色名 red、blue、tomato、skyblue 直感的だが限定的（約140色）
HEX #ff0000、#333、#e3f2fd 最も一般的な形式、6桁または3桁の省略
RGB rgb(255, 0, 0)、rgb(51, 51, 51) 赤、緑、青の値0〜255
RGBA rgba(255, 0, 0, 0.5) RGB + 透明度（アルファ：0〜1）
HSL hsl(0, 100%, 50%) 色相（0〜360）+ 彩度（0〜100%）+ 明度（0〜100%）
HSLA hsla(0, 100%, 50%, 0.5) HSL + 透明度
opacity 0.5、1、0.25 全体の透明度（子要素を含むすべてのコンテンツに影響）

1. 色名

CSSは140以上の定義済み色名をサポートしており、最も直感的に使用できます。

サンプル

HTML 
<style>
p {
  color: red;
}
h1 {
  color: blue;
}
h2 {
  color: green;
}
</style>
<p>これは段落のサンプルです。</p>
<h1>見出し1</h1>
<h2>見出し2</h2>
▶ 試してみよう

一般的な色名には以下があります：red、blue、green、black、white、gray、orange、purple、yellow、pink、gold、navy、teal、coral、tomato、skyblue、violet、brown、cyan、magenta、lime、olive、silver。

📌 ヒント： 色名はシンプルで直感的で、簡単なプロトタイピングに適しています。しかし、本番環境では色名の選択肢が限定的で精度が不足しています——16進数またはRGB表記をお勧めします。

2. 16進数（HEX）

16進数の色は#で始まり、形式は#RRGGBBです。RRは赤、GGは緑、BBは青で、範囲は00からFF（16進数）です。

サンプル

HTML 
<style>
.hex-demo {
  color: #ff0000;      /* 赤 */
  background: #333;    /* ダークグレー（3桁の省略） */
  border: 1px solid #e3f2fd;  /* ライトブルー */
}
</style>
<div class="hex-demo">16進数色のサンプル</div>
▶ 試してみよう

省略ルール：

3. RGBとRGBA

RGBは赤、緑、青チャネルに10進数の値0〜255を使用します。RGBAはアルファ透明度（0〜1）を追加します。

サンプル

HTML 
<style>
.rgb-demo {
  color: rgb(255, 0, 0);        /* 赤 */
  background: rgba(0, 0, 0, 0.5);  /* 50%透明の黒 */
}
</style>
<div class="rgb-demo">RGB/RGBA色のサンプル</div>
▶ 試してみよう

4. HSLとHSLA

HSLは色相（0〜360）、彩度（0〜100%）、明度（0〜100%）を使用します。HSLAはアルファ透明度を追加します。

サンプル

HTML 
<style>
.hsl-demo {
  color: hsl(0, 100%, 50%);        /* 赤 */
  background: hsla(120, 100%, 50%, 0.3);  /* 30%透明の緑 */
}
</style>
<div class="hsl-demo">HSL色のサンプル</div>
▶ 試してみよう

5. opacityプロパティ

opacityプロパティは要素全体の透明度（0〜1）を制御し、子要素を含むすべてのコンテンツに影響します。

サンプル

HTML 
<style>
.opacity-demo {
  opacity: 0.5;
  background: blue;
  color: white;
  padding: 20px;
}
</style>
<div class="opacity-demo">50%透明の要素（すべてのコンテンツに影響）</div>
▶ 試してみよう

❓ よくある質問

Q HEX色とRGB色の違いは何ですか？
A どちらも同じ色を表しますが、形式が異なります。HEXは6桁の16進数（0〜9、A〜F）を使用し、RGBは3つの10進数（0〜255）を使用します。HEXはより簡潔で（例：`#ff0000`）、RGBは値を理解するのにより直感的です（例：`rgb(255, 0, 0)`）。実践では、HEXがより一般的に使用されます。
Q RGBAとopacityはいつ使うべきですか？
A RGBAは特定のプロパティ（背景など）の透明度を制御し、opacityはすべての子要素を含む要素全体の透明度を制御します。背景のみを透明にしてテキストに影響したくない場合はRGBAを使用します。要素全体を半透明にしたい場合はopacityを使用します。
Q HSLの利点は何ですか？
A HSLはデザイナーにとってより直感的です。彩度と明度を一定に保ちながら色相を調整するだけで、色のバリエーションを簡単に作成できます。RGBは3つの値を同時に調整する必要があります。HSLは調和のとれたカラースキームを作成し、色の関係を理解するのも容易です。

📖 まとめ

📝 演習

  1. 少なくとも5つの異なる色の表現方法を使用してカラーパレットを作成してください。
  2. RGBAを使用して半透明オーバーレイエフェクトを作成してください。
  3. 色相の値のみを変えてHSLでカラースキームを作成してください。
  4. opacity: 0.5とbackground: rgba(0,0,0,0.5)の違いを比較してください。
100%