CSS - カラー: 初心者のためのカラフルな旅
こんにちは、未来のウェブデザインのマエストロさんたち！? 私は、CSSのカラーの世界にあなたたちを誘ううれしい旅を案内することになります。数年間この授業を教えてきた者として言えることは、CSSでのカラーの理解はコードで絵を描くこと似的で、楽しい、創造的なそして、正しくやったときには非常に満足感があります！
目次
- CSSカラーの値の種類
- CSS背景色
- CSSテキスト色
- CSSボーダー色
- CSSキャレット色
- CSSカラーキーワード
- CSSカラーズインヘリットキーワード
- CSSカラーズトランスペアレントキーワード
- CSSカラーズカレントカラーキーワード
- CSSカラーコードの構築
- CSSブラウザセーフカラーズ
CSSカラーの値の種類
まず、基本から始めましょう。CSSでは、色を表現する方法がいくつかあります。これらは、あなたのツールボックスにある異なる絵の具のようです。以下は便利な表をまとめました：
| カラー値の種類 | 例 | 説明 |
|---|---|---|
| キーワード |
red, blue, green
|
事前に定義されたカラーネーム |
| 16進数 |
#FF0000, #00FF00
|
RGB値を表す6桁のコード |
| RGB | rgb(255, 0, 0) |
赤緑青の値（0-255） |
| RGBA | rgba(255, 0, 0, 0.5) |
RGBにアルファ（透明度）チャンネル |
| HSL | hsl(0, 100%, 50%) |
色相、彩度、明るさ |
| HSLA | hsla(0, 100%, 50%, 0.5) |
HSLにアルファチャンネル |
これらのそれぞれに詳しくなって、网页をどうやって色で飾れるかを見ていこう！
CSS背景色
背景色はあなたのウェブページのキャンバスです。まずは簡単な例から始めましょう：
body {
background-color: #87CEEB;
}このコードは、整个ページの背景を美しい空の青色に設定します。#87CEEBは16進数のカラーコードです。これをブラウザが色を表示するための秘密のコードだと思ってください。
でも、特定の要素に背景色を追加したい場合はどうしたらいいでしょうか？問題ありません！
.highlight-box {
background-color: rgb(255, 255, 0);
}これで、highlight-boxクラスを持つすべての要素に明るい黄色の背景がつきます。ここでは、赤、緑、青の強度を表すRGB値を使用しています。
CSSテキスト色
背景を描いたので、次はテキストの色を設定しましょう：
p {
color: #333333;
}これはすべての段落のテキストを濃い灰色に設定します。テキストの色はcolorプロパティで設定し、text-colorでは設定しないことに注意してください。これは慣れるとわかるクセの一つです！
もう少し面白くしてみましょう：
.warning {
color: rgba(255, 0, 0, 0.7);
}これはwarningクラスを持つ要素に半透明な赤色を設定します。rgba()の最後の値はアルファチャンネルで、透明度を0（完全透明）から1（完全不透明）まで調整します。
CSSボーダー色
ボーダーはあなたの絵の額縁です。ボーダーに色を追加しましょう：
.box {
border: 2px solid #4CAF50;
}これはboxクラスを持つ要素の周りに2ピクセル幅の実線の緑色のボーダーを作成します。
でも、一色だけに止まらずにどうでしょうか？
.fancy-box {
border-top: 3px dotted red;
border-right: 3px dashed green;
border-bottom: 3px solid blue;
border-left: 3px double yellow;
}今ではボーダーの各側に異なる色とスタイルがあります。まるで小さな虹のボックスのようです！
CSSキャレット色
クリックして入力フィールドにカーソルを表示させるとき、カーソルの色を変更できることを知っていましたか？それがcaret-colorです：
input {
caret-color: purple;
}今、任意の入力フィールドをクリックすると、素晴らしい紫色のカーソルが表示されます！
CSSカラーキーワード
時々、シンプルに保ちたいときがあります。そのときに便利なのがカラーキーワードです：
.sky {
background-color: skyblue;
}
.grass {
background-color: limegreen;
}
.sun {
background-color: gold;
}これらの事前に定義されたカラーネームは覚えやすく、複雑なコードを覚える必要がありません。CSS3には140のカラーキーワードがあり、多くの選択肢を提供します。
CSSカラーズインヘリットキーワード
inheritキーワードは、要素に「親の色を使う」と言っているようなものです。一貫性を保つのに非常に便利です：
.parent {
color: blue;
}
.child {
color: inherit;
}この場合、.child要素も青くなります。親から色を継承しています。
CSSカラーズトランスペアレントキーワード
時々、色が一切ない状態が欲しいときがあります。そのときにtransparentを使用します：
.ghost-button {
background-color: transparent;
border: 2px solid black;
}これは背景色のないボタンを作成し、黒いボーダーだけを設定します。デザインの窓のように見えます！
CSSカラーズカレントカラーキーワード
currentColorキーワードは変わり者で、要素の現在の色の値を取ります：
.chameleon {
color: green;
border: 1px solid currentColor;
}ここで、ボーダーは緑色になり、テキストの色と一致します。テキストの色を変更すると、ボーダーの色も自動的に変更されます！
CSSカラーコードの構築
では、自分でカラーコードを構築する話を見ていきましょう。16進数のコードは絵の具を混ぜるようなものです：
/* 純粋な赤 */
.red-box { background-color: #FF0000; }
/* 純粋な緑 */
.green-box { background-color: #00FF00; }
/* 純粋な青 */
.blue-box { background-color: #0000FF; }それぞれのペアの文字は赤、緑、青の強度を表し、00（無し）からFF（完全）までの範囲です。
HSLは色を考える別の方法です：
/* 明るい赤 */
.bright-red { color: hsl(0, 100%, 50%); }
/* ペーストルブルー */
.pastel-blue { color: hsl(210, 100%, 80%); }ここで、最初の数字は色相（0-360）、二番目は彩度（0-100%）、三番目は明るさ（0-100%）です。
CSSブラウザセーフカラーズ
ウェブの初期の頃、ブラウザが表示できる限られた216色のパレットに固執する必要がありました。これらは「ウェブセーフ」カラーズと呼ばれました。現代のディスプレイではこれがあまり重要ではなくなりましたが、知っておくのは良いことです：
.old-school {
color: #CC3300; /* ウェブセーフなオレンジ */
}これらの色は赤、緑、青の各コンポーネントに対して00、33、66、99、CC、FFの組み合わせです。
そして、ここまでがCSSのカラーの基本です、私たちのカラフルな仲間たち！実験を通じて学ぶのが一番です。ですから、コードエディタを開いて、デジタルの世界を色で飾りましょう。ハッピーコーディング、そしてあなたのデザインがいつも鮮やかでありますように！?????
Credits: Image by storyset