CSSの基礎:色の操作

ウェブサイトをデザインする際に考慮すべき多くの要因があります。フォント、UXフロー、その他多数。非常に重要なデザイン要素の1つは色です。ブランドの色、境界線の色、背景色などの単純な決定でさえ、明確で顕著な影響をもたらします。

この記事では、CSSカラーの基本について説明し、HTMLサイトを非の打ちどころのないWebサイトに変換する方法を学びます。

CSSカラー入門

コンピューターが理解できるCSSの色を記述する特定の方法があります。これは通常、色をさまざまなコンポーネントに分割し、原色の混合セットを計算して目的の色を形成することによって行われます。 CSSで色を記述する方法はいくつかあります。

キーワードとして色名を使用する

最新のブラウザでサポートされているCSSカラー名は約140色あります。 colorキーワードは、シアンのように単純なものにすることができます。適度な範囲の色に役立ちますが、色合いと色合いをまったく制御できない、いくつかの設定された色に制限されます。ここで、CSSカラーオプションのより高い範囲にジャンプする必要があります。

 /*Syntax*/
color: red;
color: crimson;
color: slateblue;

RGB値の使用

ウェブサイトやアプリをデザインするとき、配色は非常に重要です。それが最後に検討することではないはずです。 CSSでは、3つの方法を使用してRGBカラーを表すことができます。これらは、16進文字列表記、RGB関数表記、およびHSL関数表記です。それぞれを詳しく見てみましょう。

16進文字列表記

16進文字列表記は、常に文字#で始まります。この文字に続いて、特定のカラーコードの16進数を使用して色を指定します。文字列では大文字と小文字は区別されませんが、小文字を使用するのが一般的です。いくつかの使用例を次に示します。

#rrggbb

これは、数値の色を説明する最も一般的な方法です。これは完全に不透明な色で、赤、緑、青のコンポーネントがそれぞれ0xrr0xgg0xbbです。

#rrggbbaa

これは、色の薄さを処理するアルファチャネルを使用して、上記で概説したRGB基準に従います。 0xaaの値が低いほど、色は半透明になります。

#rgb

#556677がある場合は、それぞれ0xrr0xgg 、および0xbbを表すため、単純に#567と書くことができます。たとえば、 #000 (または#000000 )は黒で、 fff (または#ffffff )は白です。

#rgba

不透明度を制御するために、 0xaaで指定されたアルファチャネルを使用して上記の基準に従います。

RGB関数表記

RGB関数表記は、赤、緑、および青のコンポーネントを使用して色を表します。これは、プライマリの赤、緑、青のコンポーネント(およびオプションのアルファチャネル)の形式で入力パラメーターを受け入れるrgb()関数を使用して定義されます。赤、緑、青の値は0〜255の整数(両端を含む)、または0%から100%まで変化する割合でなければなりません。一方、アルファチャネルは、0.0(完全に透明)から1.0(完全に不透明)までの値を受け入れます。また、0%(0.0と同じ)および100%(1.0と同じ)のパーセンテージ値も受け入れます。

 /*Syntax*/
color: rgb(rr,gg,bb);
color: rgba(rr,gg,bb,a);

HSL関数表記

HSL関数表記は、色相、彩度、および明度を使用して色を表します。使用法の点では、 rgb()関数と非常によく似ています。コンピュータの画面上で、任意の色の16進値を簡単に見つけることができます。このカラー方式では、色相はカラーホイール上の位置に従って実際の色を定義します。彩度は、可能な最大の色相を持つグレーのパーセンテージです。明度は、色が増加するにつれて、可能な限り最も暗い外観から最も明るい外観に色を移行します。

色相値(H)は、CSSでサポートされている角度単位によって指定されます。これには、 degradgrad 、およびturnが含まれます。彩度(S)は、色相で構成される最終的な色のパーセンテージを指定します。明度(L)コンポーネントは、グレーレベルを定義します。

 /*Syntax*/
color: hsl(XXdeg, XX%, XX%);
color: hsl(XXturn, XX%, XX%);

HTML要素への色の適用

CSSでは、 colorプロパティはコンテンツの前景色を定義し、 background-colorはHTMLで構造化されたコンテンツの背景色を定義します。要素がレンダリングされるときに、colorプロパティを使用して要素のスタイルを設定できます。

テキストのカラープロパティ

colorプロパティは、テキストの描画中や、あらゆる種類のテキスト装飾が必要な場合に使用されます。 text-decoration-colorプロパティを使用して、さまざまな色の下線、上線、または取り消し線をレンダリングできます。 background-colorプロパティを使用して、テキストの背景色を変更できます。 text-shadowプロパティを使用して、テキストに影の効果を適用できます。テキストフィールドに強調記号を描画するときに、 text-emphasis-colorを選択できます。

ボックスのカラープロパティ

ご存知のように、Webページ上のすべてのものはボックスモデルに従います。したがって、すべての要素は、ある種のコンテンツとオプションのパディング、境界線、およびマージン領域を備えたボックスです。前景コンテンツがない場合は、 background-colorプロパティを使用できます。テキストの列を区切るために線を引く場合は、 column-rule-colorプロパティを使用できます。アウトラインに色を付けるためのoutline-colorプロパティがあります。アウトラインは境界線とは異なることに注意してください。これはフォーカスインジケーターとして機能します。

境界線のカラープロパティ

すべてのHTML要素に境界線を付けることができます。 border-colorプロパティをborder-top-colorborder-right-colorborder-bottom-colorborder-left-colorとして設定して、対応する辺の境界線の色を設定できます。ただし、省略形のプロパティを使用することをお勧めします。

border-inline-start-colorプロパティを使用すると、最初に最も近い境界線のエッジに色を付けることができます。一方、 border-inline-end-colorプロパティを使用すると、ボックス内のテキスト行の先頭の終わりに色を付けることができます。書き込みモードテキストの向き方向によって異なりますが。

まとめ:色とアクセシビリティ

美しくデザインされたウェブサイトは、使用される色に大きく影響されますが、常にアクセス可能であることを確認する必要があります。色を不適切に使用すると、Webサイトのトラフィックが大幅に失われる可能性があります。

16進文字列表記、色名、またはRGB値の使用は完全にあなた次第です。既存のテキストを強化するために色を使用していることを確認し、決定された視覚的階層に従うようにしてください。あなたが新進のウェブ開発者であるならば、色彩理論についてもっと学び、あなた自身のパレットを作成することは素晴らしい考えです。それまでは、幸せでカラフルなコーディング!