0Pricing
CSS Academy · レッスン

色の値：名前、16進数、RGB、HSL

名前付きカラー、16進数コード、rgb()、hsl()関数など、CSSのあらゆる色形式を学びます。

「色の値：名前、16進数、RGB、HSL」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

CSSの色形式

CSSは複数の色形式をサポートしています。適切な形式は、ワークフローやツール、透明度や動的な操作が必要かどうかによって異なります。

名前付きカラー

CSSでは、red、tomato、cornflowerblueなどの140色以上の名前付きカラーが定義されています。素早いプロトタイピングには便利ですが、精度は限られます。

<h1>Named Colors</h1>
  <button>cornflowerblue button</button>

16進数カラー

16進数カラーでは、#の後に6桁の16進数を指定します（短縮形では3桁）。2桁ずつがそれぞれ赤、緑、青を表し、値の範囲は0～255です。

<p class="full-hex">Full hex: #ff6347</p>
  <p class="shorthand-hex">Shorthand hex: #f64</p>

アルファ値付き16進数

アルファ透明度を指定するには、16進数を4桁追加します（短縮形では4桁目を追加します）。

<div class="hex-alpha-full">8-digit hex alpha</div>
  <div class="hex-alpha-short">4-digit shorthand alpha</div>

RGBカラー

rgb()では、赤、緑、青の各チャンネルに対して3つの整数（0～255）を指定します。非常に読みやすく、プログラムで扱う値としても理解しやすい形式です。

<p class="rgb-tomato">rgb(255, 99, 71)</p>
  <p class="rgb-black">rgb(0, 0, 0)</p>
  <p class="rgb-white">rgb(255, 255, 255)</p>

RGBAカラー

rgb()に4つ目のパラメーター（0～1）を追加すると、アルファ透明度を指定できます。これは、スラッシュ構文を使う新しいrgb()と同等です。

<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
  <p class="rgba-modern">rgb(255 99 71 / 0.5)</p>

HSLカラー

hsl()では、色相（0～360°）、彩度（0～100%）、明度（0～100%）で色を定義します。カラーパレットやバリエーションを作成する際に、より直感的に扱えます。

<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
  <p class="hsl-steelblue">hsl(210, 70%, 50%)</p>

HSLAカラー

rgba()と同様に、hsla()ではアルファチャンネルを追加できます。最新のCSSでは、代わりにスラッシュ区切りを使用できます。

<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
  <p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>

HSLで色のバリエーションを作成する

色の明るさや暗さのバリエーションを生成する場合、HSLが特に便利です。色相と彩度を一定に保ち、明度を変更します。

<button class="btn-light">Light</button>
  <button class="btn">Base</button>
  <button class="btn-dark">Dark</button>

currentColorキーワード

currentColorは、要素の現在のcolorプロパティと同じ値になる動的な値です。これを使うと、ボーダー、シャドウ、SVGの塗りつぶしにテキストの色を自動的に継承させられます。

<a href="#">Link with currentColor border</a>

transparentキーワード

transparentキーワードはrgba(0,0,0,0)、つまり完全に透明な色と同じです。透明な状態から色付きの状態へ遷移するホバー効果などに便利です。

<button>Transparent background</button>

確認問題

同じ色相の色を明るくしたり暗くしたりするのに、最も適した色形式はどれですか。

まとめ

CSSには、名前付きカラー、16進数、RGB、HSLの色形式があります。プログラムで色を操作するにはHSLが適しています。すべての形式でアルファチャンネルを指定して透明度を設定できます。currentColorとtransparentは便利な特殊キーワードです。

よくある質問

「色の値：名前、16進数、RGB、HSL」レッスンは無料ですか？

はい。「色の値：名前、16進数、RGB、HSL」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「色の値：名前、16進数、RGB、HSL」で何を学びますか？

名前付きカラー、16進数コード、rgb()、hsl()関数など、CSSのあらゆる色形式を学びます。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「色の値：名前、16進数、RGB、HSL」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 色の値：名前、16進数、RGB、HSL
  2. 背景色と背景画像
  3. グラデーション：線形と放射
  4. 不透明度とRGBAの透明度
← CSS Academyに戻る