初心者のためのホームページ作り 第7号

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

バックナンバーはこちらから → 第1号 第2号 第3号 第4号 第5号 第6号 目次

プレーンテキスト版

今週<第7号>マガジンのおさらい
まず、記事から抜書きでおさらいします。

                  毎週金曜日配信 What's New 2002/6/28
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題■Webで扱う色

◆基本・・16進数における色の設定

16進数とは、16になった次は1つ繰り上がるという変則的な数字の進数です。
私たちが使い慣れている10進法は、9の次が10になるというものですが、16進法
は英字を使った表記になります。

10進法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
16進法 0 1 2 3 4 5 6 7 8 9 A B C D E F

16進法は0から始まりFで繰り上がり 17 は 11 となります。
色の数値は2桁で表わされていますので、00〜FFまで使われます。 したがって
 FFは16X16となり、256になります。 (実際には 0〜256)
つまり、8ビットであることが分かります。(2の8乗=256)

コンピューターの色はR(赤)G(緑)B(青)の「光の3原色」で構成されて
おり、それぞれを2桁の16進数で決められています。数値が低いものは発色が弱
く、高いものが発色が強いということになります。
 記述方法はいたって簡単で、最初の2桁がR(赤=Red )、G(緑=Green)、
そして、最後の2桁がB(青=Blue)となります。

 それぞれの数値の頭に 「#」を付記して「カラーコード」と呼びます。
例えば、
 #000000 はRGBがすべて発色していないということになり、黒になります。
また、
 #ffffff はRGBすべてが発色して、白になります。光は3原色を混ぜると白
になるわけです。このへんは印刷の色とは異なります。あくまで「光」です。

白の、#ffffff ということは、R(赤)が255、G(緑)が255、そしてB(青)
が 255という数値であることが分かります。(255は0から始めて256番目)

 と、するとRGBそれぞれを、256X256X256 で 16,777,216色が発色できるこ
とになります。すごい数値ですね。これを24ビットフルカラーと呼びます。
24ビットとは2の24乗ということが分かります。

赤だけを表示する場合は、緑と青を発色させない(オフ)にすればいいのですか
ら、#ff0000 となります。数値に表すと、rgb(255,0,0) になります。
光の色の3原色は、赤、緑、青です。
印刷と違って光の色は、重ね合わせると
明るくなります。
パソコンに内蔵されているグラフィック
カードは、このように光を発色させて
表示しています。
光の三原色
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆HTMLでの色の指定の記述例(青色をサンプルとして)

色を指定する方法をHTML4.01の文法に則って記述すると、やはりスタイルシート
になってしまいます。
 スタイルシートの記述では、1998年5月12日に新たにCSS Level2が制定されて
から16進数の6桁表示から、下記のようにさまざまな記述が可能になりました。

#rrggbb:記述例 #0000ff  (通常の6桁記述)
「 # 」 の後に、RGBカラーのそれぞれ2桁の16進数の6桁で記述します。値
はそれぞれ00〜ffの範囲で指定します。1677万色以上が指定できます。

#rgb:記述例 #00f   (3桁の記述)
上記の方法を短縮表記した形で指定する方法です。
 ただし、RGBそれぞれ16個しか指定できず、4096色しか使えません。といっ
ても十分すぎるくらいの値ですが。値はそれぞれ、0〜fの範囲で指定します。

rgb(数値、数値、数値):記述例 rgb(0,0,255)   (数値による記述)
rgb の後に続く( )の中にRGBカラーの値をカンマ「 , 」 で区切ってそれ
ぞれ10進数で指定します。値はそれぞれ0〜255の範囲です。 1677万色以上が指
定できます。

rgb(数値%、数値%、数値%):記述例 rgb(0%,0%,100%)   (%による記述)
RGBの発色の強さをパーセントで表したものです。rgb の後に続く( )の中
に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
◆bgcolor属性を使わない理由
講座の第1号でこのように記述しました。何故これを使わないのでしょう?

<body bgcolor="#00ff00">

画面全体の背景色を緑にする記述です。スタイルシートよりも簡単で楽ですが、HTML4.01Strictの宣言文では使用不可になっています。

W3C(World Wide Web Consortium =Web制作における文法の管理や様々な決まり事、草案などを提起、勧告している非営利組織 )では、HTML4.0以降、下記のように Web制作者に呼びかけています。

●コンテクスト(構造の記述)とビジュアルデザイン
コンテクストとは、見出しや段落などの構造を記述する骨格の部分をいいます。HTML4(HTML4.0およびHTML4.01)では、コンテクストの記述とビジュアルデザインの記述を分離することが推奨されています。これはビジュアルデザインとアクセシビリティを両立させるためといわれているものです。

HTML4 では、HTMLの使用をコンテクストの記述に限るため、ビジュアルデザインを直接コントロールするタグや属性は将来的に使用しないことが望ましいとしています。つまり、記述を分離するためには、コンテクストの記述をHTMLで行い、ビジュアルデザインの記述をスタイルシートで行います。

●アクセシビリティ
制作者が指定したビジュアルデザインは、コンテンツに応じて最適にデザインされたものであるとしても、ユーザによっては利用しづらいものである可能性があります。このとき、ビジュアルデザインの記述が分離されていれば、簡単にデザインを無効にすることができますし、コンテクストの記述にしたがって表示を変更したり、音声ブラウザで読み上げることも出来るようになります。

<body bgcolor="#00ff00"> とはコンテクストに記述するために、HTML4.01で非推奨となっているのです。アクセシビリティについては、講座の中で適時取り上げていきたいと考えています。これはユーザがどのような環境であっても、コンテンツを正しく伝えるためのもので、W3Cが勧告する WAI(Web Accessibility Initiative) の中で制作者に強く求めているものです。



Copyright(C) 2002-2003 banban@scollabo.com