【8】CSSの「色」と「透明度」の指定

今回は、CSSでの 色と 透明度 の指定について。

CSSでの色指定に関しては「はじめてのHTML」ですでに詳しく紹介しています。
こちらをぜひご覧ください。
[14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）

また、CSSではグラデーションも指定することができます。
これもすでに紹介していますので、こちらを参考にしてください。
[13-3] サイト背景にCSS3で線形グラデーションをつけよう
[18-4] CSS3で、円形（放射）グラデーションを作ろう (radial-gradient)

ということで今回は、
●CSSの色指定は具体的にどんなプロパティで使うのか とか、
●透明度の指定の「rgba や hsla」と「opacityプロパティ」の使い分け
●RGB ←→ HSL の互換サイト
●配色で迷ったときに使えるサイト
をメモっておきます。

本日のINDEX

1. 色指定の値（カラーネーム, RGB（16進数, 10進数）, HSL, キーワード）
2. CSSの色指定は具体的にどんなプロパティで使うのか
   1. よく使うのは color、background、border、outlineプロパティ
   2. グラデーションやシャドウにも
3. 透明度の rgba や hsla と、opacityプロパティの使い分け
4. RGB ←→ HSL の互換サイト
5. 配色で迷ったときに使えるサイト

色指定の値（カラーネーム, RGB（16進数, 10進数）, HSL, キーワード）

色指定で使う「値」を、下記の表にまとめてみました。
それぞれの特徴を活かして使い分けます。

私の場合は、16進数は慣れているのでメインに、rgba や hsla は透明度の指定の時に...といったかんじで使い分けています。ウェブカラーネームは black, gray などサクッと指定できて便利。
でも、チョイスは自由。とにかく編集しやすいモノを使えばイイんです。

ウェブカラーネーム	red、blue、yellow、black、gray、white など名前で指定できる色が140色ほど決まっています。 古くからある色指定の方法で、どんなオールドブラウザでも表示します。 「原色大辞典」さんが、カラーネームを見やすくまとめてくださっています。
RGBの16進数	記述例：#dc143c（3桁に省略できる場合： #f00 ） これも古くからある方法。どんなオールドブラウザでもいけます。 光の三原色 R (red), G (green), B (blue) をそれぞれ16進数の2桁で表します。 1つの原色がぞろ目なら、1桁に省略することもできます（#ff0000 → #f00とか）
RGBの10進数	記述例：rgb(255,0,0)（透明度を指定する場合： rgba(255,0,0,0.5) ） 光の三原色 RGB を10進数の3桁（しかも0〜255までの256の数値）で表します。 rgbの最後に「a（アルファ値=透明度）」を足す記述もできます。 rgbはオールドブラウザでもOKですが、rgba は IE9から対応。
HSL	記述例：hsl(0,100%,50%) （透明度を指定する場合： hsla(0,100%,50%,0.5) ） CSS3からの新しい値です。IE9から対応。 色相（Hue）を0から359までの数値で、彩度（Saturation）と輝度（Luminance）を％で表します。 hslの最後に「a（アルファ値=透明度）」を足す記述もできます。
キーワード	transparent（トランスペアレント）は「透明色」を指定します。 currentColor（カレント カラー）は「文字色（colorプロパティの色）」を指定します。両方とも CSS 3 からの新しい値です。

これらの「値」については、
[14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）
で詳しく説明しています。
特にHSL色空間については図を見たほうがわかりやすいと思いますので、ぜひご覧ください。

CSSの色指定は具体的にどんなプロパティで使うのか

では、具体的にどのようなプロパティで色指定するのか見てみましょう。

よく使うのは color、background、border、outlineプロパティ

★ color、background-color、border-color プロパティ

文字の色、ボックスの背景色、ボックスの枠線の色は、ウェブサイト制作で必ず使いますね。
モノトーンのサイトを作ろうったって使うから。
文字の色 = colorプロパティ
ボックスの背景色 = background-colorプロパティ
ボックスの枠線の色 = border-colorプロパティ
といった具合で、それぞれ決められたプロパティで色を指定します。

サンプルを見てみましょう。

テキストカラーは maroon、背景は #fff5ee、ボーダーカラーは hsl(262,29%,59%)

HTMLはこちら。

<div id="sample1">
テキストカラーは maroon、背景は #fff5ee、ボーダーカラーは hsl(262,29%,59%)
</div>

CSSはこちら。

div#sample1 {
	padding:1em;
	color:maroon;   /*ウェブカラーネームで指定*/
	background-color:#fff5ee;   /*RGBの16進数指定*/
	border-style:solid;
	border-width:2px;
	border-color:hsl(262,29%,59%);}   /*HSL指定*/

上のCSSソースを、CSSのショートハンドを使って、もっと短くすることもできます。

div#sample1 {
	padding:1em;
	color:maroon;
	background:#fff5ee;
	border:solid 2px hsl(262,29%,59%);}

4行目は、background のショートハンド。
他のプロパティ（background-color, background-image、background-repeat、background-positionなど）をまとめて指定するショートハンドプロパティ「background」で、背景色のみ指定した書き方です。
（backgroud-color以外を省略すれば、background-image は初期値の none になり、背景画像無しとブラウザが判断します）

5行目は、border のショートハンド。
ボーダーの border-style、border-width、border-color をまとめて指定したものです。

ショートハンドはこのように「値」を「半角スペース」で区切ってまとめて使います。

★ outlineプロパティ

もうひとつ、borderによく似たoutlineプロパティは、使ったことが無くても、意外といつも目にしているプロパティです。
フォームの部品（input要素のテキストフィールドやラジオボタンなど）のフォーカス時に付く枠線や、
a要素の a:visited, a:focus のときに付く点線の枠が outlineです。
ブラウザのデフォルトスタイルで、これらのoutlineが設定されているんですね。

ブラウザのデフォルトをリセットしたい時には、outlineプロパティを編集します。
border と outline の違いは、
outline は上下左右の線を別々に指定できず、全部一括で指定するところ。

outline のサンプルを見てみましょう。

ココにマウスオーバーするとoutlineが付きます。

HTMLはこちら。

<div id="sample2">
<input class="sample2_1" type="text" size="30" placeholder='outline: solid 5px peachpuff'><br>
<input class="sample2_2" type="text" size="30" placeholder='outline: double 5px #87cefa'><br>
<a href="#" class="sample2_3">ココにマウスオーバーするとoutlineが付きます。</a>
</div>

CSSはこちら。

div#sample2 {padding:0.5em 1em; border:solid 1px #ccc;}
div#sample2 input {margin:0.7em 0;}
div#sample2 input.sample2_1 {outline:solid 5px peachpuff;}
div#sample2 input.sample2_2 {outline:double 5px #87cefa;}
div#sample2 a.sample2_3:hover {outline:dotted 2px rgb(0,102,255); text-decoration:none;}

上のソースの outlineプロパティも、ショートハンドを使っています。
outline-style、outline-width、outline-color の値を「半角スペース」で区切ってまとめています。

outlineプロパティについては、
【14】borderとよく似た outlineはレイアウトを崩さない
をご覧ください。

グラデーションやシャドウにも

CSS3から使えるようになった「グラデーション」や「シャドウ（ボックスシャドウ・テキストシャドウ）」にも、色指定の値を使いますね。
特にグラデーションでは、rgba や hsla を使えば、透明度のグラデーションもできて便利です♪

透明度のグラデーション

HTMLはこちら。

<div id="sample3">
<p>透明度のグラデーション</p>
</div>

CSSはこちら。

div#sample3 {
	padding:1em;
	border:solid 1px #ccc;
	background: url(img/tile_xy.gif) repeat;}
div#sample3 p {
	margin:0;
	padding:2em;
	color:#fff;
	font-weight:bold;
	text-align:center;
	background: linear-gradient(to right, hsla(181, 100%, 45%, 0.2), hsla(181, 100%, 45%, 1) 50%, hsla(181, 100%, 45%, 0.2));}

サンプルでは、まず親要素（div）に背景画像を指定。その子要素の<p>の背景の 線形グラデーション（linear-gradient）で、同じ色の透明度を、左から「0.2、1、0.2」としています。

グラデーションやシャドウについては、コチラをご覧ください。
＊線形グラデーション→ [13-3] サイト背景にCSS3で線形グラデーションをつけよう (linear-gradient)
＊円形グラデーション→ [18-4] CSS3で、円形（放射）グラデーションを作ろう (radial-gradient)
＊ボックスシャドウ→ [18-2] CSS3で、ボックス要素にシャドウをつけよう（box-shadow）
＊テキストシャドウ→ [18-3] CSS3で、テキストにシャドウをつけよう（text-shadow）

rgba や hsla と、opacityプロパティの使い分け

透明度を指定する「値」では「rgba」「hsla」をよく使いますが、
CSS3から、値ではなくプロパティで opacityプロパティ が登場しました。
opacity（オパシティ）= 不透明度 という意味です。

opacity は「opacity: 0.5」といった書き方で、0〜1までの数値で指定します。
0が透明、1で不透明、0.5で半調です。

ちなみにCSSでは、値が 小数点以下の場合「0」を省略してもOK です。
「opacity: 0.5」だったら「opacity: .5」と書いても結果は同じです。

opacityプロパティと、rgba や hsla との違いは、
opacityプロパティは、中の子要素も含めて全部まるごと透明度が変わります。
rgba や hsla は「値」なので、透明度を使いたいところだけにピンポイントで使えます。

サンプルで確認してみましょう。

OPACITY

親要素にopacityで指定すると、子要素も同じ透明度です。

RGBA or HSLA

親要素の背景を rgba や hsla で指定すれば、子要素には影響しません。

HTMLはこちら。

<div id="sample6">
  <div id="sample6_1">
    <h4>OPACITY</h4>
    <p>親要素にopacityで指定すると、子要素も同じ透明度です。</p>
  </div>
  <div id="sample6_2">
    <h4>RGBA or HSLA</h4>
    <p>親要素の背景を rgba や hsla で指定すれば、子要素には影響しません。</p>
  </div>
</div>

CSSはこちら。

div#sample6 {
	padding:2em;
	border:solid 1px #ccc;
	background: rgb(156,100,210) url(img/bg.jpg) no-repeat center bottom;}
div#sample6 div {
	padding:1em;
	text-align:center;
	background:rgb(156,100,210);
	color:#fff;}
div#sample6 div h4 {
	font-size:3em;
    line-height:1em;}
div#sample6 div p {
	margin:1em 0 0;
    padding:0.5em;
    background:#fff;
    color:rgb(93,59,186);}
div#sample6 div#sample6_1 {
	opacity:0.7;       /*全部まるごと 0.7の透明度に*/
	margin:0 0 2em;}
div#sample6 div#sample6_2 {
	background:rgba(156,100,210,0.5);}  /*背景だけを透明度 0.5に*/

opacity は、マウスオーバー時の変化、未選択のタブなど、要素まるごと透明度を変えたい時に。
rgba, hsla は、部分的に透明にしたいけど、他はいじりたくないときに便利です。
それぞれの特徴を生かして使い分けましょう。

RGB ←→ HSL の互換サイト

さて、いろいろな色指定を見てきましたが、
例えばこの色 E7B6D8 を指定したいとき、Photoshopなどのソフトで #16進数や RGB は簡単にわかります。（ちなみに↑この色は、#E7B6D8、rgb(231,182,216) です。）
では、HSL値を知るには？　またはその逆（HSLからRGB）はどうする？
そんな時に便利な、互換サイトがあります。

HSL Color Picker - by Brandon Mathis

こちらはスライダーで色を作れて、それぞれの値もペースト・コピーできます。
カラーピッカーや互換ツールは、ググればいろいろ出てきますが、今はこれが一番イイかんじ。
（いくつか紹介しようと思ったけど、結局コレ↑ひとつでコトが足りるので、1個しか紹介しませんでしたww　）

配色で迷ったときに使えるサイト

ウェブサイトのカラー計画を練っているとき、
すでにメインビジュアル（写真やイラスト）が決まっていたり、ロゴなどの関係で メインカラーが決まっているなら、サイトの配色はわりとすんなり決まります。
そうでない場合は、腕の見せ所。
とはいえ、配色にいろいろ迷ってしまった...というときに、役に立つサイトがあります。

いちばんのオススメはこちら。感覚的に色をチョイスできます。
何よりも、操作の反応が美しくてワクワクします。
color.hailpixel.com

最初の画面は真っ黒（#000）ですが、マウスカーソルを移動させると、滑らかに色が変化します。
画面の x軸が色相環、y軸が明度として反応するようです。
クリックでその場の色を保存します。

その後は同じ要領で色を選んでクリック。
各色の「歯車マーク」をクリックすると、RGB値、HSL値を確認でき、編集もできます。
同じく各色の「×マーク」をクリックで、その色を削除。

また、選んだ色の #16進数が、URLに記録されるのがこのサイトの秀逸なところ。

ブックマークもできますし、アドレスバーを編集して画面の色を変えることもできます。

こちらは、もう少しロジックに考えたいときに。
[ HUE / 360 ] The Color Scheme Application

こちらは色相（Hue）をカラーホイール（色相環）で見やすく整理してくれているサイトです。
もうだいたい使いたい色のトーン（ビビットかダルか、ブライトかソフトか）を決めていて、同系色や補色を 理論的にチョイス したい時には、こちらが便利です。

PLTTS - Popular

配色のセットがダ〜ッと出てくる。画面下にあるページャーで次々見ていく作りです。
ほんっとにな〜んにも配色を思いつかないとき、とにかくコレを見て刺激を得るのにいいかもw。

Coolors - The super fast color schemes generator!

配色のセットを選ぶのは上の "PLTTS-Popular" 同じですが、こちらはそのあと色の編集ができます。
（一覧で1つ選んでビュー（目のマーク）をクリックすると、上の画像のようなプレビュー画面になります）
iPhone, Android のアプリ、Photoshop や Illustrator のアドオンもあるようです。

こちらはグラデーション専用のカラーパレット。
広い範囲で使う重要なグラデーションを考えるときにオススメです。
uiGradients - Beautiful coloured gradients

ロードするとランダムにグラデーションが表示されます。
画面の左右にある「<」「>」でグラデーションを切り替えます。
画面左下の「See All Gradients (Shift)」をクリックするか「Shiftキー」を押すと一覧を表示でき、
そこからグラデーションをチョイスすることもできます。
タイトルどおり Beautiful なサイトです。

次回予告

今回は CSSでの色指定について、わりとランダムでしたがメモってみました。
CSSの色指定を自由に使いこなせると、楽しいですよね。

さて次回は、HTML要素の「インライン」「ブロックレベル」というスタイルについて。
「インラインブロック」というスタイルも出てきます。

HTML5から、要素の分類は「カテゴリー」によるものに変わりました。
でも、各要素に「インライン」「ブロックレベル」のデフォルトスタイルがあるのは変わりません。
それぞれの要素のデフォルトスタイルを知っておくことが、CSSを指定するときに大事です。