前回は、CSS適用の優先ルールをご説明いたしました。
私が思うに、コレは比較的簡単ですねッ...。HTMLの外側、そして後は上から順番に比較的シンプルに記載していけば、何ら問題ございません。
私自身がスタイルシートを記載していて、スタイルが効かないことは、ほぼスペルが間違えている、もしくは、classの.（ドット）を記載し忘れているがほとんどです。
初心者の方で、スタイルを記載しても効かない場合は、マークアップ自体が、複雑になり過ぎているかも知れませんね...。
また、エディターソフトのソースコード記載の補助機能に
依存しすぎている可能性も、多々ございます。
それでは今回はッ、
上記について記載していこうと思います...。
実際のお仕事の現場で、私がCSSで記載する色について考え方を記載してみます。
まず基本的には、クライアントさんに好きな色、1色、多くても2色を選んでいただき、そこから色合いを変化させていくことが、ほとんどになります。
基本的には1色でも十分だと思っています、例をあげるのであれば、このサイトで使用している#4c5482。
この色をメインカラーと考えたとしても、白も使えば黒も使用します。
また、このメインカラーに多少グラデーションを加えたり、透かしたりします。
それで十分統一感が生まれ、配色としてはデザイン性に優れているように感じます。
また、初めから前提として、複数の色を使用することを考えますと、コレ！ハッキリと申しまして難しいです...。
では何が難しいのかと申しますと、統一感がうすれ、サイトのイメージまでも個性が無くなってしまう印象を与えることになってしまいます。また、注意点といたしましては、原色は極力避ける！
個人的には、くすんだ色合いが好きですが、色の持つ個性もしくは、イメージを気にするようにしています。
色の持つイメージは、「色の持つイメージ」で検索して頂ければ、色々な情報が出てくるかと思います。
CSSで指定できる色につきましては、名前で色を指定する方法と、#に続く3桁の16進数と6桁の16進数で記述する方法がございます。
まず、名前で指定する方法（CSS2.1）では、
black（#000000）、silver（#c0c0c0）、gray（#808080）、navy（#000080）、blue（#0000ff）、
aqua（#00ffff）、teal（#008080）、purple（#80080）、fuchsia（#ff00ff）、white（#ffffff）、
lime（#00ff00）、green（#008000）、maroon（#800000)、red（#ff0000）、orange（#ffa500）、
yellow（#fff00）、olive（#808000）と、17色がございます。
また、CSS3では指定できる色の名前が大幅に増えて、150色近い指定が可能になっています。
では実際にCSSを記載する場合は、デザイナーさんからのワイヤーフレームをもとに、カラーを選択していきますので、次にご紹介する16進数でCSSに指定することになります。
6桁の16進数は、RGB（レッド・グリーン・ブルー）の各値2桁づつを連結したものになります。
3桁の16進数は、6桁のRGBのそれぞれの値が等しい場合に使用できるという制限があります。
例を記載しますとッ...、
| 6桁の16進数 | 3桁の16進数 |
|---|---|
| #ffffff | #fff |
| #000000 | #000 |
| #ff0000 | #f00 |
| #0000ff | #00f |
| #ffff00 | #ff0 |
実際のコーディングの際は6桁と3桁、両方記載できるように記載方法を覚えておくと便利ですねッ...。
それでは、サイト制作を行う上で参考になる配色のサイトをご紹介していきたいと思います。
デザインを行う実際の現場では、色の持つイメージの事を考えますと、結構な割合で配色に悩んだりもしますので、参考になれば幸いです...。
最後のNippon Colorsは、以前エクセルで、VBAをコントロールするコントロールパネルを作る際、UIデザインパーツの作製にものすごく役立ったことを覚えております。
配色を一歩間違えますと、とんでもないデザインになってしまいますので、上記リンク先が参考になれば幸いです。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
