下駄です。
「color」とかけまして、
「village」と、ときます。
そのココロは・・・
日本語に訳して（色と村）2回繰り返すと、浮気をした時の言い訳に聞こえます。
カラーコードの話
WEBページを作る時に、色を扱うことは都度発生します。
ページの背景色や、ラインを表示する際の色や、文字色...
デフォルトである白と黒だけのインターフェイスであれば、さほど気にすることはないかもしれませんが、
いまどきのcssで色設定をしないなんてことは皆無と言ってもいいでしょう。
「カラーコード」をよく理解していないという人の為に簡単に説明をすると、
RGBの0~255の数値をそれぞれセットして、色を表現する方式で、CSSでは、そのカラーコードの10進数、16進数の記述方法の他にも、
色名称（英語）などもあります。
CSSでの色設定について
/* 文字色に赤を設定する方法 */
color : red;
color : #F00;
color : #FF0000;
color : rgb(255,0,0);
color : rgba(255,0,0,1.0);
記述の短いモノから並べてみたら、５種類もあるんですね。
簡単に説明すると、
color : red;
名称指定する方式で、たくさんの名称がデフォルトで登録されています。
以下のページを参考にするといいでしょう。
原色大辞典
https://www.colordic.org/
color : #F00;
16進数のrgbで、rgb(0-15 , 0-15 , 0-15)を表しています。
通常の指定数値は、0-255なのですが、それを丸め込んだ形になっていて、原色などを簡易セットする場合に使います。
color : #FF0000;
上記と同じく16進数ですが、rgb(0-255,0-255,0-255)での表記になっていて、より細かな設定をすることができます。
color : rgb(255,0,0);
10進数での書き方なのです。
画像編集ソフトなどでは、10進数で表記されている場合が多いので、そうした時にはこの記述をした方がいい場合もあります。
color : rgba(255,0,0,1.0);
10進数+アルファチャンネル 0.0~1.0がセットでき、色指定に加えて、半透明の度合いをセットすることができます。
16進数ではアルファチャンネルを記述することができないので、この記述が最強と考えてもいいでしょう。
カラーコードを見つける簡単な方法
Google検索で「color #000000」と入力してみましょう。
ブラウザのアドレスバーにこの検索文字を入れるだけでも同じ結果がでると思いますが、
検索結果の一番上に、Googleのカラーピッカーツールが表示されます。
実際に、"#000000"を別の16進数6桁を書くと、その色でのピッカー表示がされて便利です。
何より便利だと感じるのは、RGBの値や、CMYKなどのDTPでの値なども表記されていて、CSSの色指定以外でも便利に使えるようになっています。
16進数と10進数を変換するときに簡単に検索でできてしまうのが便利ですよね。
ちなみに、「#000」や「rgb(0,0,0)」では、検索結果に表示されないので、6桁の16進数が起動ポイントになっているようです。
残念ながら、英語表記は出ないので、できるだけ10進数か16進数で書くことを標準にした方が良さそうですね。
0 件のコメント:
コメントを投稿