CSSカラーチュートリアル

UIを際立たせることになると、適切なカラーパレットを選択することに勝るものはありません。このチュートリアルでは、UIを作成するときに、要素やフォントなど、ほとんどすべてのものに色を割り当てるのがいかに簡単かを学びます。

色を追加するために、CSSにはcolorがあります データ型。標準の赤、緑、青（RGB）形式で色を表します。

色 構文

CSSを使用して色を定義する方法はいくつかあります。

• キーワード付き。これらは、「赤」、「白」、「黄色」などの文字列、または#fffなどの16進数として入力されます。
• 16進表記、たとえば#fff。
• rgb()経由 またはrgba() 機能表記。
• またはhsl()などのHSL関数を使用する およびhsla() 。

キーワード識別子の使用

色を必要とする要素に色を追加する最も簡単な方法は、キーワード属性を使用することです。

背景、テキスト、要素など、色を追加するために使用する特定のプロパティには微妙な違いがあることに注意してください。この例では、古き良きボタンを使用します。

<button class="color">Color Me</button>

ボタン要素を使用すると、色を追加するための2つのオプションがあります。 background-color経由のいずれか プロパティまたはcolor 財産。この場合、colorプロパティは、テキストの色と背景色、つまり背景の色を変更します。先に進んでボタンを選択し、ボタンに色を追加しましょう！

簡単ですよね？

rgba（） およびhsl（）関数

したがって、キーワードを使用して特定の色のプロパティに色を追加する方法を確認できます。このキーワードのカラーチートシートを参照して、使用可能なすべてのオプションを確認できます。キーワードの色はさまざまな色を提供しますが、制限することもできます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

これらのキーワードの色、または他のほとんどすべての色は、16進数のRGBまたはRGBの10進数として表すこともできます。たとえば、「黒」は10進数で＃000000または0,0,0などになります。これらの16進数または10進数のオプションを使用すると、より具体的な色を取得できます。

RGB 10進数を追加する簡単な方法は、rgb()を使用することです。 関数。各小数点の最大値は255です。キーワードの色を変更して、次の2つの新しいオプションを表示しましょう。

button.color {
    /* RGB and decimal */
    color: #fff;
    background-color: rgb(210,105,30);
}

黒には同じ文字が繰り返されていることに気づきましたか？同じ文字の場合は、上記の白の場合と同じように、最初の3つを入力するだけです。これは、＃ffffffとして表すこともできます。

色を追加する別のオプションは、hsl()を使用することです。 関数。 HSLは、色相、彩度、明度の略です。明度は、白（100％）から黒（0％）までのパーセンテージを表します。彩度もパーセンテージですが、100％が「フル」グレーカラーであるグレーの色です。色相は、カラーホイールの度（0〜360）をRGBとして表します。ここで、0は赤、120は緑、240は青です。これは複雑に聞こえます＆＃128517;。

Visual Studioなどのコードエディターには、再生可能なカラーピッカーが用意されています。先に進み、hsl()と入力します 次にホバーして、カラーピッカーがポップアップするのを確認します。

左側では色相を操作でき、他の2つのバーは彩度と明度を操作できます。それで遊んで、あなたが得ることができるどんなクールな色を見てください。 HSLは色合いに役立ち、彩度と明度で操作できます。自分の特定のニーズのためにそれを好む人もいます。

色の不透明度の変更

rgb関数とhsl関数の両方がrgba()のいずれかで表現できることに気付くかもしれません。 またはhsla() 。 「a」はアルファを表しますが、ほとんど透明度/不透明度であり、0は透明で、1は完全に不透明です。

不透明度を変更することで、色をさらに洗練させることができます。ボタンの不透明度を変更して、ボタンの色を仕上げましょう：

button.color {
    color: #fff;
    background-color: rgba(210,105,30, 0.7);
}

不透明にすると、テキストの読みがはるかに良くなります！