HTML 入門
スタイルシートでデザインを作ろう
色の設定方法を理解する
CSS や HTML で色を指定する方法にはいくつか種類があります．ここでは主に RGB と言われる光の三原色を利用した指定方法を説明します．RGB は Red（赤），Green（緑），Blue（青）の3つの光を混合してさまざまな色を表現します．この方法は主にPCのディスプレイやプロジェクタなどで利用される方法です．
RGB では3つの色の光をそれぞれどの程度光らせるかその度合を2桁の16進数 #00 から #ff で指定します．これは10進数で考えれば 0 から 255 の 256 段階に相当します．2桁16進数の値を RGB の順番に並べて，#000000 から #ffffff までおよそ 1677 万色の色を表現できます．たとえば，#000000 はすべての光を発光させないので黒になります．#ffffff はすべての光を最大限光らせるので白になります．#ff0000 は赤色の光だけ，#00ff00 は緑色の光だけ，#0000ff は青色の光だけを光らせることを意味します．
赤色の指定 (16進)
黒 (#000000) から赤 (#ff0000) まで徐々に値を変化させたときに色がどのように変化するかを確認します．黒から赤に徐々に明るくなっていることが確認できるでしょう．
緑色の指定 (16進)
黒 (#000000) から明るい緑 (#00ff00) まで徐々に値を変化させたときに色がどのように変化するかを確認します．これも黒から徐々に明るくなっていることが確認できるでしょう．
青色の指定 (16進)
黒 (#000000) から青 (#0000ff) まで徐々に値を変化させたときに色がどのように変化するかを確認します．黒から青に徐々に明るくなっていることが確認できるでしょう．
赤色の指定 (rgb)
16進数ではなく10進数で色を指定することもできます．この場合は rgb() という関数に3つの値を 0 から 255 までの範囲で指定します．上と同じように黒から赤へ徐々に明るくなることを確認します．
緑色の指定 (rgb)
上と同じように黒から明るい緑へ徐々に明るくなることを確認します．
青色の指定 (rgb)
上と同じように黒から青へ徐々に明るくなることを確認します．
色の指定 (色名と16進数)
代表的な色には名前が割り当てられています．たとえば #ff0000 と指定する代わりに red のように名前で指定する方法も利用できます．
色の指定 (色名と10進数)
代表的な色名が10進数の rgb とどのような対応関係にあるかも確認します．
色の指定 (色名と16進数，10進数)
色名と16進数，10進数の対応関係も確認しておきます．
色の指定 (16進数の短縮形)
16進数で値を指定する際に，各色において 00, 88, ff のように同じ値が連続する場合は省略して指定できます．次の通り，たとえば #000000 は #000 のように省略することができ，#ff0000 は #f00 のように省略できます．
色と不透明度の指定 (rgba)
rgba() を使えば色の不透明度を指定できます．4つ目の引数が不透明度を意味し，0 が完全な透明，1が完全な不透明です．0以上から1以下の値を指定して半透明を表現できます．下の図はグレーの背景色の上に半透明（不透明，透明も含む）の要素を配置しています．半透明がどのように表示されるかを視覚的に確認してください．
今度は背景にグラデーションを設定した上に半透明の要素を配置しています．これも半透明がどのように表示されるかを視覚的に確認してください．
なお，原色大辞典など，色の前とカラーコードを確認できるさまざまなサイトがあるので使いたい色を探すにはこのようなサイトを利用するとよいでしょう．