知識不要！絵の具のように色が指定できるCSS3のrgbaが便利！

久しぶりにドットインストールで勉強したのでアウトプットを。

今回勉強した中で面白かったのが、CSS3の「rgba」というコード。カラーを指定できるコードです。

「#fff」や「white」などのコードで色を指定することが多いと思いますが、覚えるのが面倒ですよね？

しかし、この「rgba」というコードを使えば、直感的に色を指定する（色を作る）ことができるんです。

rgba（red・green・blue・alpha）

このコードで色を指定する（作る）方法は、rgbの値を0〜255、Alphaの値を0〜1にするだけ。rgbの値は0〜100%でもOKです。

それぞれ最小値に近づくほど色が薄く、透明度が高くなります。反対に、最大値に近づくほど色が濃く、透明度が低くなります。

1. red→赤
2. green→緑
3. blue→青
4. alpha→透明度

それぞれの頭文字をとって「rgba」です。この3つの色を組み合わせて新しい色を作ります。

先述のように、このコードの最大の利点は、直感的に色を指定できることにあります。16進数のカラーコードを覚える必要はありません。

• 「#000000」は黒だとわかるけど、薄い黒のコードがわからない
• 薄い赤っぽいピンクのカラーコードの調べ方がわからない

なんて悩みもなくなります。

絵の具のように色を指定する

小さい頃、絵の具を使って絵を描きましたよね。絵の具同士を混ぜて新しい色を作りましたよね。

さらに、絵の具が濃ければ、水で薄めたりしましたよね。

• 黒＋白＝灰色
• 赤＋青＝紫
• 黒＋水＝薄い黒

そう、「rgba」を使えば、絵の具と同じように色を作れるんです。

ただ、使える色が3種類（赤・緑・青）と限られているので、元からたくさんの色があった絵の具よりは難しいかもしれません。

それでも、作れない色はないので、子どもの時を思い出して、いろいろ試しながら色を作ると楽しいと思いますよ。

黒と白のrgba

黒はalpha以外のすべての値が0になります。反対に、白はalpha以外のすべての値が255になります。

alphaを1にすると、はっきりとした色になる（濃くなる）ので、色を作る時はalphaを1にするとわかりやすいです。

いろいろな色を作ってみよう！

では、実際に色を作って箱に塗ってみましょう！上の箱が濃い色。下の箱が薄い色です。

黒

background-color: rgba(0, 0, 0, 1)

background-color: rgba(0, 0, 0, 0.1)

白

background-color: rgba(255, 255, 255, 1)

background-color: rgba(255, 255, 255, 0.1)

紫

background-color: rgba(255, 0, 255, 1)

background-color: rgba(255, 0, 255, 0.1)

黄色

background-color: rgba(255, 255, 0, 1)

background-color: rgba(255, 255, 0, 0.1)

まとめ

いかがでしたか？このように直感的に色が作れちゃいます。

古いブラウザだと対応してないようですが、「いい加減、新しいブラウザ使おうぜ♪」という意味も込めてガンガン使ってみます。

値を変えて色の変化を見るだけで楽しいので、ぜひお試しあれ！