こんにちは、開発者の皆さん！今日は、CSS カラー関数の世界に飛び込みます。 CSS を使用して Web ページの要素の色を変更したことがあるかもしれませんが、CSS の色関数について聞いたことがありますか?そうでない場合は、シートベルトを締めてください。新しくて非常に役立つことを学ぼうとしています! 昨日読んだ引用から始めましょう . グッドリード 色はキーボード、目はハーモニー、魂はたくさんの弦が張られたピアノです。アーティストは、魂に振動を引き起こすために、あるキーまたは別のキーに触れて演奏する手です。 CSS カラー関数とは正確には何ですか? CSS カラー関数は、単純なカラー コードではなく、数学関数を使用して CSS で色を指定する方法です。 この関数は、スタイルシートで使用されている色をより詳細に制御および柔軟性を提供します。 色関数を使用すると、色の 、 、 、 を調整したり、2 つ以上の色を混ぜ合わせることもできます。 色相 彩度 明度 不透明度 複数の CSS 関数が利用可能です。いくつか見てみましょう。 - それぞれ赤、緑、青を表す 3 つの値を取り、色を返します。値の範囲は 0 ～ 255 です。例: 赤色になります。 rgb() color: rgb(255, 0, 0) - に似ていますが、色の不透明度を設定することもできます。 4 番目の値 alpha の範囲は 0 から 1 です。例: 半透明の赤色になります。 rgba() rgb() color: rgba(255, 0, 0, 0.5) - 色相、彩度、明度を表す 3 つの値を取り、色を返します。例: 赤色になります。 hsl() color: hsl(0, 100%, 50%) - に似ていますが、色の不透明度を設定することもできます。例: 半透明の赤色になります。 hsla() hsl() color: hsla(0, 100%, 50%, 0.5) - オプションの重みパラメーターを使用して、2 つの色を混ぜ合わせることができます。例: 紫の色合いになります。 mix() 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> の値を変更したい場合は、1 か所だけ変更する必要があり、全体で自動的に更新されます。 . --primary-color スタイルシート カスタム プロパティを使用する利点は次のとおりです。 : スタイルシート全体で値を繰り返す代わりに、値をカスタム プロパティに保存し、必要に応じて再利用できます。 コードの再利用 : カスタム プロパティを使用すると、値を 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 コードをより柔軟に、保守しやすく、操作しやすくする強力なツールです。ハッピーコーディング！
