初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。
初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。毎週金曜日配信 What's New 2002/6/28 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 今週の課題■Webで扱う色 ◆基本・・16進数における色の設定 16進数とは、16になった次は１つ繰り上がるという変則的な数字の進数です。 私たちが使い慣れている10進法は、９の次が10になるというものですが、16進法 は英字を使った表記になります。 10進法 １ ２ ３ ４ ５ ６ ７ ８ ９ 10 11 12 13 14 15 16 16進法 ０ １ ２ ３ ４ ５ ６ ７ ８ ９ Ａ Ｂ Ｃ Ｄ Ｅ Ｆ 16進法は０から始まりＦで繰り上がり 17 は 11 となります。 色の数値は２桁で表わされていますので、00〜FFまで使われます。 したがって FFは16Ｘ16となり、256になります。 (実際には 0〜256) つまり、８ビットであることが分かります。（２の８乗＝256） コンピューターの色はＲ（赤）Ｇ（緑）Ｂ（青）の「光の３原色」で構成されて おり、それぞれを２桁の16進数で決められています。数値が低いものは発色が弱 く、高いものが発色が強いということになります。 記述方法はいたって簡単で、最初の２桁がＲ（赤＝Red ）、Ｇ（緑＝Green）、 そして、最後の２桁がＢ（青＝Blue）となります。 それぞれの数値の頭に 「#」を付記して「カラーコード」と呼びます。 例えば、 #000000 はＲＧＢがすべて発色していないということになり、黒になります。 また、 #ffffff はＲＧＢすべてが発色して、白になります。光は３原色を混ぜると白 になるわけです。このへんは印刷の色とは異なります。あくまで「光」です。 白の、#ffffff ということは、Ｒ（赤）が255、Ｇ（緑）が255、そしてＢ（青） が 255という数値であることが分かります。（255は０から始めて256番目） と、するとＲＧＢそれぞれを、256Ｘ256Ｘ256 で 16,777,216色が発色できるこ とになります。すごい数値ですね。これを24ビットフルカラーと呼びます。 24ビットとは２の24乗ということが分かります。 赤だけを表示する場合は、緑と青を発色させない（オフ）にすればいいのですか ら、#ff0000 となります。数値に表すと、rgb(255,0,0) になります。
光の色の３原色は、赤、緑、青です。 印刷と違って光の色は、重ね合わせると 明るくなります。 パソコンに内蔵されているグラフィック カードは、このように光を発色させて 表示しています。 |
 |
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ◆HTMLでの色の指定の記述例（青色をサンプルとして） 色を指定する方法をHTML4.01の文法に則って記述すると、やはりスタイルシート になってしまいます。 スタイルシートの記述では、1998年５月12日に新たにCSS Level2が制定されて から16進数の６桁表示から、下記のようにさまざまな記述が可能になりました。 #rrggbb：記述例 #0000ff （通常の６桁記述） 「 # 」 の後に、ＲＧＢカラーのそれぞれ２桁の16進数の６桁で記述します。値 はそれぞれ00〜ffの範囲で指定します。1677万色以上が指定できます。 #rgb：記述例 #00f （３桁の記述） 上記の方法を短縮表記した形で指定する方法です。 ただし、ＲＧＢそれぞれ16個しか指定できず、4096色しか使えません。といっ ても十分すぎるくらいの値ですが。値はそれぞれ、0〜fの範囲で指定します。 rgb(数値、数値、数値)：記述例 rgb(0,0,255) （数値による記述） rgb の後に続く（ ）の中にＲＧＢカラーの値をカンマ「 , 」 で区切ってそれ ぞれ10進数で指定します。値はそれぞれ０〜255の範囲です。 1677万色以上が指 定できます。 rgb(数値%、数値%、数値%)：記述例 rgb(0%,0%,100%) （％による記述） ＲＧＢの発色の強さをパーセントで表したものです。rgb の後に続く（ ）の中 にＲＧＢカラーの値をカンマ「 , 」 で区切ってそれぞれ％で指定します。あま り馴染みのない記述例ですが、 100万色が指定できます。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ◆カラーネーム（色名：ColorName）による色の指定 数値のほかに色の名前で指定する方法がありますが、安全に使える色は下記のよ うな16色しかありません。Internet Explorerや Netscapeでは、それぞれ独自に 設定した色名がありますが、ユーザビリティを考えるとお勧めできません。例え ば、IEで指定したカラーネームが他のブラウザでは無視される危険があります。
| black: #000000 |
 |
silver: #c0c0c0 |
|
grayr: #808080 |
|
white: #ffffff |
|
| maroon: #800000 |
|
red: #ff0000 |
|
purple: #800080 |
|
fuchsia: #ff00ff |
|
| green: #008000 |
|
lime: #00ff00 |
|
olive: #808000 |
|
yellow: #ffff00 |
|
| navy: #000080 |
|
blue: #0000ff |
|
teal: #008080 |
|
aqua: #00ffff |
|
上記16色は直接カラーネームで指定して安全に表現できる色です。念のためにカラーコードも付記しました。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆さっそくWebセーフティーカラーパレットやColoeNameを使ってページを作成し
ましょう。先々週の講座で示したボックスを使います。
では、テキストエディタを立ち上げて次のようにタイプしてください。
コロン「 : 」、セミコロン「 ; 」を間違えないように。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>色を使う</title>
<style type="text/css">
<!--
body { background-color: white }
p { font-weight: bold }
p.test1 { color: maroon }
p.test2 { color: #090 }
p.test3 { color: rgb(255,255,255) ;
background-color: green }
span { color: #ff0000 }
-->
</style>
</head>
<body>
<h2>色を使ったページです</h2>
<p class="test1">茶系の色の文字で書きました</p>
<p class="test2">青色の文字色です</p>
<p class="test3">濃い緑色の背景色に白の文字色です。
でも<span>ここは赤色</span>です</p>
</body>
</html>
入力が終わったら保存します。今まで使っていたフォルダに
test_5.html と、必ず拡張子 .html をつけます。
保存が終わったら、今作ったHTML文書 test_5.html をダブルクリックします。
表示がうまくいかない場合は、タイプミスが考えられます。もう一度確認してく
ださい。 Sample
<body bgcolor="#00ff00">
画面全体の背景色を緑にする記述です。スタイルシートよりも簡単で楽ですが、HTML4.01Strictの宣言文では使用不可になっています。
W3C（World Wide Web Consortium ＝Web制作における文法の管理や様々な決まり事、草案などを提起、勧告している非営利組織 ）では、HTML4.0以降、下記のように Web制作者に呼びかけています。
HTML4 では、HTMLの使用をコンテクストの記述に限るため、ビジュアルデザインを直接コントロールするタグや属性は将来的に使用しないことが望ましいとしています。つまり、記述を分離するためには、コンテクストの記述をHTMLで行い、ビジュアルデザインの記述をスタイルシートで行います。
<body bgcolor="#00ff00"> とはコンテクストに記述するために、HTML4.01で非推奨となっているのです。アクセシビリティについては、講座の中で適時取り上げていきたいと考えています。これはユーザがどのような環境であっても、コンテンツを正しく伝えるためのもので、W3Cが勧告する WAI（Web Accessibility Initiative） の中で制作者に強く求めているものです。