CSSで使用する色および指定する方法「CSS実践編：CSSの基本step.6」

前回は、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桁と3桁、両方記載できるように
記載方法を覚えておくと便利ですねッ…。

それでは、サイト制作を行う上で参考になる配色のサイトを
ご紹介していきたいと思います。

デザインを行う実際の現場では、色の持つイメージの事を考えますと、
結構な割合で配色に悩んだりもしますので、
参考になれば幸いです…。

最後のNippon Colorsは、以前エクセルで、VBAをコントロールする
コントロールパネルを作る際、UIデザインパーツの作製に
ものすごく役立ったことを覚えております。

配色を一歩間違えますと、
とんでもないデザインになってしまいますので、
上記リンク先が参考になれば幸いです。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。