MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

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

      2016/05/21

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にするとわかりやすいです。

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

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

blackbox

blackbox

whitebox

whitebox

purplebox

purplebox

黄色

yellowbox

yellowbox

まとめ

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

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

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

 

 - プログラミング学習