2023 年の CSS カラー関数 - 始めるために知っておくべきことすべて

こんにちは、開発者の皆さん！今日は、CSS カラー関数の世界に飛び込みます。

CSS を使用して Web ページの要素の色を変更したことがあるかもしれませんが、CSS の色関数について聞いたことがありますか?そうでない場合は、シートベルトを締めてください。新しくて非常に役立つことを学ぼうとしています!

昨日読んだ引用から始めましょうグッドリード.

色はキーボード、目はハーモニー、魂はたくさんの弦が張られたピアノです。アーティストは、魂に振動を引き起こすために、あるキーまたは別のキーに触れて演奏する手です。

CSS カラー関数とは正確には何ですか?

CSS カラー関数は、単純なカラー コードではなく、数学関数を使用して CSS で色を指定する方法です。

この関数は、スタイルシートで使用されている色をより詳細に制御および柔軟性を提供します。

色関数を使用すると、色の色相、彩度、明度、不透明度を調整したり、2 つ以上の色を混ぜ合わせることもできます。

複数の CSS 関数が利用可能です。いくつか見てみましょう。

1. rgb() - それぞれ赤、緑、青を表す 3 つの値を取り、色を返します。値の範囲は 0 ～ 255 です。例: color: rgb(255, 0, 0)赤色になります。

   
   

2. rgba() - rgb()に似ていますが、色の不透明度を設定することもできます。 4 番目の値 alpha の範囲は 0 から 1 です。例: color: rgba(255, 0, 0, 0.5)半透明の赤色になります。

   
   

3. hsl() - 色相、彩度、明度を表す 3 つの値を取り、色を返します。例: color: hsl(0, 100%, 50%)赤色になります。

   
   

4. hsla() - hsl()に似ていますが、色の不透明度を設定することもできます。例: color: hsla(0, 100%, 50%, 0.5)半透明の赤色になります。

   
   

5. mix() - オプションの重みパラメーターを使用して、2 つの色を混ぜ合わせることができます。例: color: mix(red, blue)紫の色合いになります。

それらについて詳しく学びましょう。

RGB()

では、CSS カラー関数の世界への旅を続け、RGB 関数に飛び込みましょう。 RGB 関数は、CSS で最も一般的に使用される色関数の 1 つですが、それには十分な理由があります。

理解しやすく、Web サイトで使用する色を細かく制御できます。

RGB 関数は 3 つの値を取り、それぞれが光の強度を表します。

• 赤、

• 緑と

• それぞれ青。

これらの値の範囲は 0 ～ 255 です。赤、緑、青の異なる強度を混合することで、好きな色を作成できます。

例：

• 赤の場合 - rgb(255, 0, 0)

• 緑の場合 - rgb(0, 255, 0)

• 青の場合 - rgb(0, 0, 255)

  
  

 div { background-color: rgb(0, 255, 0); } /*this sets all th div element with green color*/

HSL()

よし、CSS のもう 1 つの便利な色関数、HSL 関数に移りましょう。

HSL 関数は RGB 関数に似ていますが、赤、緑、青の値を使用する代わりに、次の値を使用します。

• 色相、

• 飽和、および

• 軽さ。

  
  

  これにより、特に初めて使用する人にとって、理解しやすく使いやすくなります。色彩理論.

  
  

HSL 関数の色相値は色そのものを表し、値の範囲は 0 から 360 です。

• 色相値0 は赤を表し、色相値 120 は緑を表し、色相値 240 は青を表します。

  
  

• HSL 関数の彩度値は、0% から 100% の範囲の値で、色の強度を表します。彩度値 100% は色が完全に飽和していることを意味し、値 0% は色が灰色であることを意味します。

  
  

• HSL 関数の明度値は、0% から 100% の範囲の値で、色の明るさを表します。明度値50%は色がニュートラル グレーであることを意味し、値100%は色が完全に明るいことを意味し、値0%色が完全に暗いことを意味します。

  
  

 div { background-color: hsl(120, 100%, 50%); } /* All `<div>` elements to green, fully saturated, and with a neutral lightness. */

RGBA()

よし、RGBA関数について話しましょう！

RGBA 関数は RGB 関数に似ていますが、1 つ追加のボーナスがあります。

• 色の不透明度を指定できます。

これは、背景色を部分的に透明にする場合など、要素に半透明効果を作成する場合に便利です。

RGBA 関数は 4 つの値を取り、最初の 3 つは RGB 関数と同様に赤、緑、青の値です。

4 番目の値はアルファ値で、色の不透明度を表し、範囲は 0 から 1 です。

値 0 は色が完全に透明であることを意味し、値 1 は色が完全に不透明であることを意味します。

 div { color: rgba(0, 0, 255, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

HSLA()

それでは、HSLA 関数について話しましょう。

HSLA 関数は HSL 関数に似ていますが、さらに 1 つの利点があります。色の不透明度を指定できます。

これは、背景色を部分的に透明にする場合など、要素に半透明効果を作成する場合に便利です。

HSLA 関数は 4 つの値を取り、最初の 3 つは HSL 関数と同様に色相、彩度、明度の値です。

4 番目の値はアルファ値で、色の不透明度を表し、範囲は 0 から 1 です。

値 0 は色が完全に透明であることを意味し、値 1 は色が完全に不透明であることを意味します。

 div { color: hsla(240, 100%, 50%, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

それはすべて同じです A は、単純な両方の関数で半透明効果のために使用されるアルファ (アルファ値 0.75) を意味します。

カスタム プロパティまたは CSS 変数

それでは、CSS 変数とも呼ばれる CSS のカスタム プロパティについて説明しましょう。カスタム プロパティを使用すると、スタイルシート全体で再利用できる値を保存できるため、スタイルの維持が容易になり、コードがより使いやすくなります。基本単位そして柔軟。

カスタム プロパティを作成するには、 --構文に続けてプロパティ名を入力し、その後に値を入力します。

 :root { --primary-color: blue; }

ここでは、値がblueの--primary-colorというカスタム プロパティを作成しました。

このカスタム プロパティを使用するには、CSS セレクターでvar()関数を使用します。

 button { background-color: var(--primary-color); }

上記のコードは、カスタム プロパティ--primary-colorを使用しているため、すべての<button>要素の背景色を青に設定します。

--primary-colorの値を変更したい場合は、1 か所だけ変更する必要があり、全体で自動的に更新されます。スタイルシート.

カスタム プロパティを使用する利点は次のとおりです。

• コードの再利用: スタイルシート全体で値を繰り返す代わりに、値をカスタム プロパティに保存し、必要に応じて再利用できます。

• 保守性: カスタム プロパティを使用すると、値を 1 か所で更新するだけで済むため、スタイルの保守が容易になります。

• 柔軟性: カスタム プロパティを使用すると、複数のセレクターを変更するのではなく、1 か所で値を変更するだけで、サイトの外観を変更できます。

CSS カラー関数のベスト プラクティス

よし、プロジェクトで CSS カラー関数を使用するためのベスト プラクティスについて話しましょう。

これらのヒントは、一貫性のある視覚的に魅力的な広告を作成するのに役立ちますカラーパレットまた、すべてのユーザーが読みやすく、アクセスしやすい色であることを確認してください。

Web サイト用のカラー パレットの作成:

CSS カラーを扱うときに最初にすべきことの 1 つは、Web サイト用のカラー パレットを作成することです。これは、好きで相性の良い色をいくつか選ぶのと同じくらい簡単です。

RGB、HSL、RGBA、または HSLA 関数を使用して色を定義できます。

最初にメインの色を選んでから、それを補うアクセント カラーを 2 ～ 3 色選びます。

 :root { --primary-color: hsl(180, 100%, 50%); --secondary-color: hsl(120, 100%, 50%); --tertiary-color: hsl(60, 100%, 50%); }

コントラストと階層に CSS カラー関数を使用する:

色を使用して、デザインにコントラストと階層を作成することが重要です。たとえば、背景に明るい色を使用し、テキストに暗い色を使用して、読みやすくすることができます。

色を使用して、ボタンやリンクなどの特定の要素に注意を向けることもできます。

 body { background-color: var(--secondary-color); color: var(--primary-color); } a { color: var(--tertiary-color); }

読みやすさとアクセシビリティのための色関数のテスト:

最後に、色の読みやすさとアクセシビリティをテストすることが重要です。特に色覚障害のあるユーザーが読みやすいように、色に十分なコントラストがあることを確認してください。

オンライン ツールを使用して、色のコントラストをチェックし、アクセシビリティ基準を満たしていることを確認できます。

• WebAIM コントラスト チェッカー

• Muzli カラー パレット ジェネレーター

• Experte - コントラストチェッカー

• クーラー - パレットジェネレーター

• Canva パレット ジェネレーター

CSS カラー関数 高度なテクニック

このセクションでは、CSS カラー関数を使用した高度なテクニックについて説明します。

動的配色に CSS 変数を使用する

ほんの数行のコードで Web サイトの配色を変更したいと思ったことはありませんか?カスタム プロパティとも呼ばれる CSS 変数を使用すると、それが可能になります。

カラー パレットを格納する一連の変数を作成し、スタイルシート全体で使用できます。

このように、配色を変更したい場合は、変数の値を更新するだけで済みます。

 :root { --primary-color: #00b0ff; --secondary-color: #00cc99; } h1 { color: var(--primary-color); } button { background-color: var(--secondary-color); }

この例では、プライマリ カラーとセカンダリ カラーの 2 つのカスタム プロパティを作成しました。次に、それらを使用してh1要素とbutton要素のスタイルを設定しました。

CSS カラー関数を使用したアニメーションの作成

CSS のカラー関数でできるクールなことの 1 つは、それらをアニメーション化することです!色間の滑らかな遷移を作成して、Web サイトにダイナミズムを追加できます。たとえば、ユーザーがボタンの上にカーソルを置いたときにボタンの色が変わるようにすることができます。

 button { background-color: hsl(120, 100%, 50%); transition: background-color 0.5s ease; } button:hover { background-color: hsl(240, 100%, 50%); }

ここでは、ボタンのデフォルトの背景色を緑の色相 ( hsl(120, 100%, 50%)に設定し、ボタンがホバーされたときに色がスムーズに変化するようにトランジションを追加しました。

ホバー状態の色を青色 ( hsl(240, 100%, 50%) ) に変更しました。

グラデーションと透明度に CSS カラー関数を使用する

CSS カラー関数でできるもう 1 つの楽しいことは、グラデーションと透明度を作成することです。 RGBA および HSLA カラー関数を使用して半透明の色を作成し、それらを組み合わせてグラデーションを作成できます。

 .gradient { background: linear-gradient(to right, rgba(255, 0, 0, 0.5), hsla(120, 100%, 50%, 0.5)); }

ここでは、赤の RGBA カラーから緑の HSLA カラーへの線形グラデーションを作成しました。両方の色のアルファ値は 0.5 で、半透明になっています。

そして、あなたはそれを持っています！

CSS カラー関数を使用した高度なテクニック。これらのテクニックを試して楽しんで、創造性を発揮してください!

資力

• caniuse.com [HTML5、CSS3対応表]

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

結論

結論として、このイントロが、CSS カラー関数とカスタム プロパティを使い始めるのに役立つことを願っています。

これらは、CSS コードをより柔軟に、保守しやすく、操作しやすくする強力なツールです。ハッピーコーディング！