Web技術実習 | |
戻る〔18.eコマース〕 次へ〔21.色彩(色のイメージと配色)〕 目次 |
20-1 三原色
2つ以上の色を混ぜて別の色を作ることを混色(コンショク)という。できるだけ少ない色の混色でより多くの色を作れると効率がよい。
色は3つの基本となる色(原色)があれば、それらを混ぜ合わせるだけで、そのほかの色を作ることができる。この3つの基本となる色を三原色(サンゲンショク)という。
20-2 光の三原色
コンピュータのディスプレイやカラーテレビでは、光の三原色である赤(Red)、緑(Green)、青(Blue)の3色でほぼすべての色を作ることができる。RGBと呼ばれる。
右図は、光の三原色を最大の明るさで混色したものである。各色の明るさを何段階に分けることができるかによって表示能力が決まる。
・8段階の場合 … 8×8×8=512色
・256段階の場合 … 256×256×256=16,777,216色
光のように、色を混ぜるごとに明るくなる混色のことを「加法混色」という。
20-3 色料の三原色
カラーの写真や印刷では色料(シキリョウ)の三原色であるシアン(Cyan)、マゼンタ(Magenta)、イエロー(Yellow)の3色でほぼすべての色を作ることができる。CMYと呼ばれる。
右図は、色料の三原色を同量ずつ混色したものである。インクジェットのカラープリンタでは、3色を混色して黒を作らずに黒(blacK)を追加している。CMYKと呼ばれる。黒はRGBのBと混同しないようにKを使っている。
色料のように、色を混ぜるごとに黒くなる混色のことを「減法混色」という。
20-4 RGB
コンピュータで扱うカラーはR(赤)、G(緑)、B(青)の各色を0〜255の256段階で指定する。例えば、マゼンタは赤と青の混色なので、R=255、G=0、B=255と指定することで最も明るいマゼンタになる。
HTML(Webページ)でも同じようにRGBを256段階で指定する。
例 マゼンタ #FF00FF ・・・ RGB各色を2けたの16進数で指定
20-5 Webセーフカラー
RGBを256段階で指定すると、およそ1677万色(256×256×256)の色が表現できる。しかし、インターネットを使用しているすべてのコンピュータで同じように1677万色が使える保証はない。また、WindowsやMacなどの機種の違いによって表示される色が微妙に変わることもある。
このような環境の違いにかかわらず、安定した色の再現性が保証された色のことを「Webセーフカラー(web safe colors)」という。各色256段階を51ごとの6段階に分けて、次の数値で指定する。
0(#00)、 51(#33)、 102(#66)、 153(#99)、 204(#CC)、 255(#FF)
・6段階 … 6×6×6 = 216色
実習14 次のようなWebセーフカラーのサンプルページを作成する。
HPBは「Web」のサイトを開いておくこと。
ファイル名は「iro1.htm」とする。ページのタイトルは「Webセーフカラーのサンプル」とする。
操作1 WebセーフカラーのWebページを作成する。<サンプル:iro1.htm>
FF0000 | ||||||||||
FF0033 | FF3333 | FF3300 | ||||||||
FF0066 | FF3366 | FF6666 | FF6633 | FF6600 | ||||||
FF0099 | FF3399 | FF6699 | FF9999 | FF9966 | FF9933 | FF9900 | ||||
FF00CC | FF33CC | FF66CC | FF99CC | FFCC99 | FFCC66 | FFCC33 | FFCC00 | |||
FF00FF | FF33FF | FF66FF | FF99FF | FFCCCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | ||
CC00FF | CC33FF | CC66FF | FFCCFF | FFFFCC | CCFF66 | CCFF33 | CCFF00 | |||
9900FF | 9933FF | CC99FF | FFFFFF | CCFF99 | 99FF33 | 99FF00 | ||||
6600FF | 9966FF | CCCCFF | CCFFCC | 99FF66 | 66FF00 | |||||
3300FF | 6633FF | 9999FF | CCFFFF | 99FF99 | 66FF33 | 33FF00 | ||||
0000FF | 3333FF | 6666FF | 99CCFF | 99FFCC | 66FF66 | 33FF33 | 00FF00 | |||
0033FF | 3366FF | 6699FF | 99FFFF | 66FF99 | 33FF66 | 00FF33 | ||||
0066FF | 3399FF | 66CCFF | 66FFCC | 33FF99 | 00FF66 | |||||
0099FF | 33CCFF | 66FFFF | 33FFCC | 00FF99 | ||||||
00CCFF | 33FFFF | 00FFCC | ||||||||
00FFFF |
CC0000 | ||||||||
CC0033 | CC3333 | CC3300 | ||||||
CC0066 | CC3366 | CC6666 | CC6633 | CC6600 | ||||
CC0099 | CC3399 | CC6699 | CC9966 | CC9933 | CC9900 | |||
CC00CC | CC33CC | CC66CC | CC9999 | CCCC66 | CCCC33 | CCCC00 | ||
9900CC | 9933CC | CC99CC | CCCC99 | 99CC33 | 99CC00 | |||
6600CC | 9966CC | CCCCCC | 99CC66 | 66CC00 | ||||
3300CC | 6633CC | 9999CC | 99CC99 | 66CC33 | 33CC00 | |||
0000CC | 3333CC | 6666CC | 99CCCC | 66CC66 | 33CC33 | 00CC00 | ||
0033CC | 3366CC | 6699CC | 66CC99 | 33CC66 | 00CC33 | |||
0066CC | 3399CC | 66CCCC | 33CC99 | 00CC66 | ||||
0099CC | 33CCCC | 00CC99 | ||||||
00CCCC |
990000 | ||||||
990033 | 993333 | 993300 | ||||
990066 | 993366 | 996666 | 996633 | 996600 | ||
990099 | 993399 | 996699 | 999966 | 999933 | 999900 | |
660099 | 663399 | 999999 | 669933 | 669900 | ||
330099 | 666699 | 669966 | 339900 | |||
000099 | 333399 | 669999 | 339933 | 009900 | ||
003399 | 336699 | 339966 | 009933 | |||
006699 | 339999 | 009966 | ||||
009999 |
660000 | 330000 | |||||||
660033 | 663333 | 663300 | 330033 | 333333 | 333300 | |||
660066 | 663366 | 666666 | 666633 | 666600 | 000033 | 003300 | ||
330066 | 336600 | 003333 | ||||||
000066 | 333366 | 336666 | 336633 | 006600 | ||||
003366 | 006633 | |||||||
006666 | 000000 |
・文字色の設定方法(<FONT>タグ)
(1) 色を変更したい文字をドラッグして選択する。メニューバーから次のように選択する。
[書式(O)] → [フォント(F)...]
(2) フォントのダイアログで色を選択、または、色の値を16進数(#xxxxxx)で入力して、[OK]ボタンをクリックする。
・セルの色の設定方法(スタイルシート)
(1) 色を変更したい文字のセル内で右クリックして、メニューから[属性の変更(A)...]を選択する。
(2)属性のダイアログの[セル]タブの右下にある[スタイル(S)...]ボタンをクリックする。
(3) スタイルの編集 ダイアログの右下にある[編集(4)]ボタンをクリックする。
(4) スタイルの設定 ダイアログの[カラーと背景]タブの上部にある前景色を設定する。
※ 表全体の文字色を変更する場合は、(2)で[表]タブを選択する。
操作2 ファイル名を入力して保存する。Webブラウザで、ファイルiro1.htmを閲覧して確認する。
操作3 サイト「Web」のWebページとして、リンクを設定する。
これまでのサンプルページと同じように、トップページと相互のリンクを設定する。
リンクポイントの文字は次の通りとする。
- index.htm (トップページ)
- @ 「表のサンプル1」の次の行に「Webセーフカラーのサンプル」と文字を入力する。
A 文字「Webセーフカラーのサンプル」をドラッグして選択して「iro1.htm」にリンクを設定し、上書き保存する。- iro1.htm
- @ 見出しの次に段落を挿入し、「トップページへ戻る」と文字を入力する。
A 文字「トップページへ戻る」をドラッグで範囲指定して「index.htm」にリンクを設定し、上書き保存する。
操作4 Webブラウザの更新ボタンをクリックしてリンクを確認する。
20-6 有彩色と無彩色
色には大きく分けて有彩色(ユウサイショク)と無彩色(ムサイショク)がある。
有彩色は、三属性(色相、明度、彩度)のすべてをあわせ持つ色である。
無彩色は、三属性のうち明度だけを持つ、白、グレー、黒色である。
20-7 色の三属性
色の三属性とは、色相、明度、彩度の三つである。
- 色相
- 赤、黄、緑、青の各色の系列の「色合い」のことである。虹は「赤 橙 黄 緑 青 紫」の6色が順に並んでおり、波長の長い順(屈折率の小さい順)になっている。この色を60度ずつに分割した円形で表したものを色相環(シキソウカン)という。
日本で虹は、青と紫の間に藍が入り、「赤橙黄緑青藍紫」の7色とされている。- 明度
- 明度は色の「明るさ」のことである。明度が高い、低いという言い方をする。明度が最も高くなると白色、最も低くなると黒色に近づく。白黒写真はこの明度だけで表されたものである。
- 彩度
- 彩度は色の「鮮やかさ」のことである。彩度が高い、低いという言い方をする。彩度が最も高い色を純色(ジュンショク)という。
実習15 色相、明度、彩度とWebセーフカラーの関係を調べる。
操作1 ペイント(Windows付属)を起動した後、メニューバーから次のように選択し、色の編集のダイアログを開く。
[色(C)] → [色の編集(E)...]
操作2 ダイアログの[色の作成(D)>>]ボタンをクリックする。
ダイアログが大きくなり、右下に赤(R)、緑(G)、青(B)と色合い(E)、鮮やかさ(S)、明るさ(L)の入力欄が表示される(次図)。
色合い ⇒ 色相
鮮やかさ ⇒ 彩度
明るさ ⇒ 明度
操作3 赤(R)に数値255(FF)を入力する。緑(G)と青(B)には0を入力する。[Enter]キーは押さないこと。
赤色をベースカラーとして、明度とWebセーフカラーの関係を調べる。
明度(明るさ)の数値だけを変更して、その時の赤、緑、青の値を記録する。
Webセーフカラー : 0(#00)、51(#33)、102(#66)、153(#99)、204(#CC)、255(#FF)
←明度が高い 明度が低い→ 色合い 0 0 0 0 0 0 0 0 0 0 0 0 0 鮮やかさ 240 240 240 240 240 240 240 240 240 240 240 240 240 明るさ 240 220 200 180 160 140 120 100 80 60 40 20 0 赤 255 255 255 255 255 255 255 213 170 128 85 43 0 記
録緑 255 213 170 128 85 43 0 0 0 0 0 0 0 青 255 213 170 128 85 43 0 0 0 0 0 0 0 safe赤 255 255 255 255 255 255 204 153 102 51 0 置
換
えsafe緑 255 204 153 102 51 0 0 0 0 0 0 safe青 255 204 153 102 51 0 0 0 0 0 0
(表をドラッグすると値が見える。)
操作4 赤(R)に数値255(FF)を入力する。[Enter]キーは押さないこと。
赤色をベースカラーとして、彩度とWebセーフカラーの関係を調べる。
彩度(鮮やかさ)の数値だけを変更して、その時の赤、緑、青の値を記録する。
Webセーフカラー : 0(#00)、51(#33)、102(#66)、153(#99)、204(#CC)、255(#FF)
←彩度が高い 彩度が低い→ 色合い 0 0 0 0 0 0 0 鮮やかさ 240 200 160 120 80 40 0 明るさ 120 120 120 120 120 120 120 赤 255 234 213 191 170 149 127 記
録緑 0 21 43 64 85 106 127 青 0 21 43 64 85 106 127 safe赤 255 255 204 204 153 153 置
換
えsafe緑 0 51 51 102 102 153 safe青 0 51 51 102 102 153
(表をドラッグすると値が見える。)
実習16 次のような色相・明度・彩度のサンプルページを作成する。
HPBは「Web」のサイトを開いておくこと。
ファイル名は「iro2.htm」とする。ページのタイトルは「色相・明度・彩度のサンプル」とする。
操作1 色相・明度・彩度のWebページを作成する。
FF0000 | ||||||||||
FF0033 | FF3300 | |||||||||
FF0066 | FF6600 | |||||||||
FF0099 | FF0000 | FF9900 | ||||||||
FF00CC | FF0099 | FF6600 | FFCC00 | |||||||
FF00FF | FF00FF | FFCC00 | FFFF00 | |||||||
CC00FF | 9900FF | FFFF00 | CCFF00 | |||||||
9900FF | 0000FF | CCFF00 | 99FF00 | |||||||
6600FF | 0066FF | 66FF00 | 66FF00 | |||||||
3300FF | 0099FF | 00FF00 | 33FF00 | |||||||
0000FF | 00FFFF | 00FF99 | 00FF00 | |||||||
0033FF | 00FF33 | |||||||||
0066FF | 00FF66 | |||||||||
0099FF | 00FF99 | |||||||||
00CCFF | 00FFCC | |||||||||
00FFFF |
赤 | FFFFFF | FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0000 | 990000 | 660000 | 330000 | 000000 |
緑 | FFFFFF | CCFFCC | 99FF99 | 66FF66 | 33FF33 | 00FF00 | 00CC00 | 009900 | 006600 | 003300 | 000000 |
青 | FFFFFF | CCCCFF | 9999FF | 6666FF | 3333FF | 0000FF | 0000CC | 000099 | 000066 | 000033 | 000000 |
FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
←明度が高い | 明度が低い→ |
赤 | FF0000 | FF3333 | CC3333 | CC6666 | 996666 | 999999 |
緑 | 00FF00 | 33FF33 | 33CC33 | 66CC66 | 669966 | 999999 |
青 | 0000FF | 3333FF | 3333CC | 6666CC | 666699 | 999999 |
→彩度が高い | 彩度が低い→ |
操作2 ファイル名を入力して保存する。Webブラウザで、ファイルiro2.htmを閲覧して確認する。
操作3 サイト「Web」のWebページとして、リンクを設定する
- index.htm (トップページ)
- @ 「Webセーフカラーのサンプル」の次の行に「色相・明度・彩度のサンプル」と文字を入力する。
A 文字「色相・明度・彩度のサンプル」をドラッグして選択して「iro2.htm」にリンクを設定し、上書き保存する。- iro2.htm
- @ 見出しの次に段落を挿入し、「トップページへ戻る」と文字を入力する。
A 文字「トップページへ戻る」をドラッグで範囲指定して「index.htm」にリンクを設定し、上書き保存する。
操作4 Webブラウザの更新ボタンをクリックしてリンクを確認する。
戻る〔19.eコマース〕 次へ〔21.色彩(色のイメージと配色)〕 目次 | ||
Web技術実習 | Copyright © 2006,2007 Hiroshi Masuda |