colorプロパティの値
色を指定するCSSプロパティはcolorプロパティ以外にもたくさんあるのですが、こういった色に関する指定の値は共通しています。
代表的なものとして、次のような値を指定することができます。
１）キーワード値（redなど色の英単語）
２）RGB（A）
３）カラーコード
他にもありますが、上記の３つさえ扱うことができればWeb制作を請け負う上で特に問題となることはほぼありません。
この記事では色彩に関する細かい専門知識はできるだけ省きますが、CSSで色を調整する上で最低限の知識は必要です。
そこで、「デザインを専門にしなくても、Web制作に関わるなら少なくともこれぐらいは知っておきたい」というポイントをまとめておきます。
＊カラーの値について＊
| 値 | ポイント |
| キーワード値 | redやblueなどの英単語名詞での指定。コード表などがなくても色の指定が素早く指定できる一方、細かい色味の調整ができない |
| RGB（A） | 赤（R）・緑（G）・青（B）・透明度（A）の組み合わせによって、細かく、透けた色の指定が可能。細かい数値の指定が必要なので手間がかかる |
| カラーコード | Webサイトで使われる色のコード（例：#000000＝黒）で指定する方法。カラーコード表とセットで使用することでイメージ通りの色を指定しやすいが、コードは無数にあるのでやはり手間は必要 |
…と、このような感じです。
個人的な使い分け方としては、テキストに下線をつけたり、テキストを赤字で強調する程度であれば、キーワード値でサクッと指定することが多いです。
一方、そういったサイトのイメージにほとんど影響しない記事執筆用のカラーではなく、背景色などサイトのイメージに関わるカラーはRGBAなど細かい指定が可能な方法で指定しています。
キーワード値は指定が楽な反面、色味を細かく調整できません。
反対に、RGBAやカラーコードによる指定は手間がかかりますが細かく色を調整することが可能です。
それぞれメリット・デメリットがあるので、状況に応じて使い分けるのが良いと思います。
POINT!
- ・色の指定方法はキーワード値、RGBA、カラーコードなど複数ある！
- ・キーワード値は指定が楽だが細かい調整が不可、その他は細かい調整は可能だが手間がかかるなど、一長一短あり！
- ・状況に応じて指定方法を使い分けよう！
知っておきたい色のキーワード値
色の指定を行う際、一番早くて楽なのはやはりキーワード値を使った指定方法です。
カラーコード表と睨めっこしながら、「この色とこの色ってどう違うんだろう…？」なんて頭を悩ませていると、色の指定だけでもかなりの時間がかかってしまいます。
なので、まずは「よく使うキーワード値でイメージに近い色はなかったかな？」というところから調整をスタートさせると、スムーズにいくことも多いです。
しかし、キーワード値もその存在を知らなければ指定のしようがありません。そこで、よく使う（知っておくと便利な）色のキーワード値をまとめてみました。
たくさんありますが、忘れては思い出してを繰り返しても全然良いので、少しずつ覚えていくと便利ですよ！
＊色のキーワード値について＊
| キーワード | 色 |
| red | ■ |
| blue | ■ |
| yellow | ■ |
| black | ■ |
| green | ■ |
| white | ■ |
| grey | ■ |
| orange | ■ |
| darkblue | ■ |
| darkred | ■ |
| darkgreen | ■ |
| pink | ■ |
| lightblue | ■ |
| lightyellow | ■ |
| lightgreen | ■ |
| transparent | ■※透明色 |
まだまだたくさんあるのですが、とりあえず上の表に出てきたものは最優先で覚えておきたいカラーです。
覚え方ですが、基本的に色の名前の前に「dark」をつけると暗い色になり、「light」をつけると明るく淡い色になります。
表では紹介しきれませんでしたが、暗いオレンジ色の「darkorange」や、明るいグレーの「lightgrey」というキーワード値もあります。
コード表は英数字の羅列なので、正直覚えていられません（笑）。が、キーワード値は「その色を表す英単語」なので頭に入りやすく、何度か指定しているうちに勝手に覚えられます。
Web制作の技術だけでなく、スピードや効率性も高めていきたい場合、色の指定にそこまで 拘 らなくて良いようなポイントでは、キーワード値でサクッと指定すると効率をアップできます。
POINT!
- ・色の指定で最も早くて楽なのは、やはりキーワード値による指定！
- ・代表的でよく使われる色のキーワード値だけでも知っておくと便利！
- ・色の細かい指定が必要ないポイントでは、キーワード値の指定で効率性を高めよう！
テキストと背景に色をつける
colorプロパティの値について基礎知識を得たところで、次はいよいよテキストと背景にカラーを設定していきます。
･･･の前に1つだけ注意点です。
普通、CSSを適用させたい要素をセレクタとして指定しますが、テキストや背景の色の指定に関しては、親要素に指定したものが、子要素の色の指定として有効であるという点です。
通常、親要素と子要素でテキスト・背景の基本カラーを変えたいということはありません。（アクセントとして一部分だけ色を変えるということはありますが）
親要素のカラーの値が子要素に継承される方が都合が良く、便利というわけです。
ということで、colorプロパティ・background-colorプロパティは、適用させたいpタグなどの要素そのものに設定しても良いのですが、divタグやarticleタグなど、pタグの親要素となるタグに設定してもOKです。
親要素に指定するメリットとしては、pタグはもちろん、h1～h6の見出しタグ、smallタグなど、HTMLのタグが変わっても同じカラーで統一できます。
一方、個別に指定するメリットとしては、他の要素に影響を及ぼさずにピンポイントで指定できることです。
さて、注意点の説明も終わったのでテキストと背景に色をつけていきましょう。
テキストの色の指定はcolorプロパティ、背景色の指定にはbackground-colorプロパティを使います。
＊色の指定の記述例＊
div {
color: red;
background-color: rgb(246, 198, 227) ;
}
上記の例では、div要素に対しテキストカラーをキーワード値のred（赤）で指定し、背景色をRGBで指定しています。
サンプルコードと表示結果は以下の通りです。
HTML
<div class="sample_color">
<p>サンプルテキスト</p>
</div>
CSS
.sample_color {
width: 200px;
height: 100px;
color: red;
background-color: rgb(246, 198, 227);
display: flex;
justify-content: center;
align-items: center;
margin: 1rem auto;
}
このように、CSSの設定自体はとても簡単です。
難しいのはやはり、サイトのイメージに合った色選びと、見やすくするためのカラーバランス調整です。
そこで次章のでは、見やすいカラー指定のポイントを解説していきます！
POINT!
- ・テキストの色はcolorプロパティ、背景色はbackground-colorプロパティで指定する！
- ・テキストは親要素に指定してもOK（値が子要素に継承される）！
見やすい色の組み合わせ
当然ですが、白地に白色のテキストだと文字が見えませんし、黒地に暗い青色の文字でも見づらくなることはイメージできるかと思います。
とにかく押さえておきたいポイントは、明るい色同士・暗い色同士の組み合わせは見づらくなる…ということです。
オシャレでカワイイんだけど文字が見づらいな～っていうブログをたまに見かけますが、クリーム色の背景色にピンク色のテキストとか、見づらい原因がカラーの組み合わせであることもしばしばあります。
独特な色使いでデザイン性を求めるにしても、読ませたいセクションのテキストは、ある程度高い可読性を確保しておく必要があります。
可読性はフォントの種類、大きさ、太さなどにも大きく左右されますが、ここでは色に注目してみましょう。
一般的に、背景色とテキスト色の明度差が大きいほど見やすくなると言えます。
具体的には以下のような組み合わせでは、テキストの可読性を保つことができます。
明るいグレーの下地に黒のテキスト
明るいブルーの下地に暗いブルーのテキスト
淡いクリーム色の下地に暗めのブラウンのテキスト
暗いレッドの下地に白のテキスト
暗いグリーンの下地に淡いイエローのテキスト
暗いパープルの下地に明るいブルーのテキスト
このように、テキストの色と背景色のどちらかを明るくし、もう一方を暗くすれば、少なくとも色のせいでテキストが読みづらいとはなりません。
参考用に、テキストと背景の色を自由に変更できる機能を用意しておいたので、色々な色の組み合わせを試してみて下さいね！
下のカラーボックスをクリックして背景色と文字色を選んでください
POINT!
- ・テキストの色はcolorプロパティ、背景色はbackground-colorプロパティで指定する！
- ・テキストは親要素に指定してもOK（値が子要素に継承される）！
– 関連記事 –
