CSSで色属性を表現するいくつかの方法

2018年最もホットなプロジェクト：テレマーケティングロボットがあなたの参加を待っています

ウェブサイトを作成し、CSS コードを書くとき、私たちは常に color 属性を時々使用します。ウェブページ制作で最もよく使われる属性の一つである「色」の表現方法をご存知ですか？今日は見に行きますよ。

最初の方法: 色名を使用して色を直接指定する

この方法は、最もよく使用される方法の 1 つです。たとえば、現在の属性の色を赤に指定するには color:red; を使用し、現在の属性の色を黄色に指定するには color:yellow; を使用します。この方法の特徴は、使い方が比較的簡単で、色名を直接書き込むことができることです。しかし、欠点も同様に明らかです。まず、色の名前が多すぎます。色の値を書きたい場合は、多くの色の英語名を熟知している必要があります。英語が苦手な人にとっては、これは悪い経験になるかもしれません。第二に、色値の表現が不正確です。たとえば、カラー コード color:forestgreen は、現在の属性の色がフォレスト グリーンであることを指定します。 この色はブラウザによって異なって表示される場合があります。

2番目の方法: 16進コードを使用して色を指定する

この方法も最も一般的に使用される方法の 1 つです。この方法で入力された色属性値は非常に正確であるだけでなく、色名によって表される色の種類よりもはるかに多くの色の種類を持ちます。たとえば、色を純粋な青に設定したい場合は、color: #0000FF; と記述します。ただし、特定の色コードの前に # 記号があるので、この記号を忘れずに記述してください。

3番目の方法: RGB: rgb (赤、緑、青)

この方法は上記の 2 つの方法ほど一般的ではありませんが、よく使用されます。この属性は、3 つの色属性を使用して 3 つのチャネルを表します。最初のチャネルは赤、2 番目は緑、3 番目は青です。私たちは皆、赤、緑、青を総称して三原色と呼ぶことを知っています。この 3 つの色を組み合わせることで、さまざまな色を形成できます。そのため、CSS でこの 3 つの色を設定しておけば、さまざまな色を形成できます。たとえば、色を純粋な青に設定したい場合は、color:rgb(0,0,255); と記述します。

4番目の方法: RGBA:rgba(red,green,blue,alpha)

この方法は、3 番目の方法の後にアルファ属性が追加されることを除いて、実際には 3 番目の方法の拡張と同等です。ウェブデザインモジュールでは、ある程度の透明度を持つ色が必要になる場合があることは誰もが知っています。このとき、アルファ属性を使用する必要があります。このプロパティは色の透明度を制御します。値は (0,1)、つまり 0 から 1 の間です。値が小さいほど、不透明度は小さくなります。たとえば、純粋な青の透明度を下げたい場合は、rgb(0,0,255,0.5) と記述します。このコードは、不透明度 0.5 の純粋な青色を意味します。

上記の方法をマスターすれば、Webサイトのデザインプロセスにおける色設定に十分対応できるようになります。皆様のお役に立てれば幸いです。

元のタイトル: CSS で色属性を表現するいくつかの方法

キーワード: ウェブサイトデザイン、ウェブサイト制作