======================================================================
● ● ●●●●● ● ● ● ☆ＨＴＭＬ入門講座☆
● ● ● ●● ●● ● 第13号 98/10/11
● ● ● ● ●● ● ●
●●●●● ● ● ● ● ●
● ● ● ● ● ● 発行人：
● ● ● ● ● ● 池田蛇足 dasoku Ikeda
● ● ● ● ● ●●●●●
Visit Our Web Site About This Magazine and HTML----------------------
http://hp.vector.co.jp/authors/VA014079/study_html/
=====================================================発行部数 2825部=
==PR==================================================================
メールマガジン「SOHO、家庭内向け初心者ネットワーク構築講座」
家庭やSOHOでパソコンを複数利用している方が増えてきています。
でもLAN構築は難しそう。そんなことは無いですよ。簡単です。
HomePage http://www.itsui.com/network/
======================================================================
第10講：色と画像
今日から数回に渡って、色と画像の話をします。今まで勉強したＨＴＭＬでＷ
ＥＢページを作ろうとすると、何かさびしいですよね。背景はＩＥなら灰色、
ＮＮなら真っ白だし、画像もなければ、文字も真っ黒一色です。やっぱり、カ
ラフルに飾りたい、という気持ちはありますよね。・・・たとえＨＴＭＬが見
栄えを記述するためのものではないにしても。
そこでこれから、色や画像をＨＴＭＬでどう扱うかという説明をします。一々
断るのが面倒なので、はじめに宣言しておきますが、以下の二つに関しては常
に念頭においてください。
１：画像を読み込むことができないブラウザもある。コンテンツの内容が、
画像が見えなくても或る程度理解できるように、代替の手段は常に講じ
ておくべき。それはまた、視覚障害者への配慮にも繋がるだろう。また
色も同様である。
２：ＨＴＭＬ４．０では、ドキュメントの見栄えはスタイルシートで指定す
ることが推奨されている。いずれは、ＨＴＭＬで直接見栄えを指定する
タグや属性は廃止されるだろう。
２に関しては、「じゃあスタイルシートも平行して説明すればいいのに！」と
お思いかも知れませんが、残念ながら現時点では、スタイルシート（そのなか
でも特に一般化すると考えられているＣＳＳ）に対応しているブラウザはかな
り少ないです。ＩＥ４が一応フルサポートしていますが、まだどうも出力が不
安定ですし、ＮＮにいたってはまだ全くサポートしていない要素も多いのが実
状です。加えて、二大ブラウザ以外のブラウザでは、殆ど対応していません。
スタイルシートだけに頼って見栄えを指定するのは、もう少し時間をおかなく
てはいけないかも知れませんね。
ではまず色の話から。
色というのは、案外難しいものです。ニュートンがケンブリッジ大学の一室で
プリズムによって太陽光線を分解したことはよく知られています。その七色は
red, orange, yellow, green, blue, indigo, violet
の七色です。イギリスの学生は、これを覚えるのに Richard Of York Gave
Battle In Vain.（ヨークにおけるリチャードの挑戦は空しかった） と覚える
そうです。日本では（今はあまり耳にしませんが）「赤橙黄緑青藍紫」と音読
みで覚えますね。ちなみに「せきとうおうりょくせいらんし」と読みます。
しかし、虹をぱっと見て「七色」に見える人がどれくらいいるかはかなり疑問
です。たとえばインディアンの或る部族は、虹は「三色」だと言います。反対
に「十色」だとする民族がインドにいるそうです。
つまり太陽光線（の可視光線）が七色だというのは、単なる恣意に過ぎないわ
けですね。その証拠に、物理学の観点から光の波長を調べると、だいたい（詳
しくは覚えていないので間違えがあったら指摘してください）４００から７０
０ナノメートルが可視光線の範囲ですが、ニュートンの七色スペクトルは、そ
の４００〜７００ナノメートルの範囲を均等に割ったものにはなりません。た
とえば、「赤」は７００から６００、それに対し「オレンジ」は６００から５
６０くらいの範囲です。
なぜ或る波長を持った光線が、「色」に見えるのか。僕の見ている「青」と、
あなたが見ている「青」は本当に同じなのだろうか。・・・こうなると、もう
認知心理学の世界になります。一般教養で認知心理学を落とした僕にそれを語
る資格はないでしょう。じゃあ、そういう、実に曖昧で、アナログな「色」と
いうものを、デジタルの権現であるコンピュータがどう扱っているかに話を移
しましょう。
色をモデル化する試みは太古からなされてきました。特に近世以降、絵の具を
体系的に作るために、色のモデルは不可欠でした。現代では、ＸＹＺ系と呼ば
れる、三つの色にすべての色の起源を求めるモデルが多用されています。
たとえばカラー印刷では、４つのインクが使われています。黄色、マゼンタ、
シアン、そして黒です。理論的には、三色全てを混ぜると黒になりますが、顔
料の性質の違いなどから黒が奇麗に出ないため、黒はインクを用意し、あとの
色は黄色、マゼンタ、シアンを混ぜて作るのです。これをＣＭＹＫモデルと呼
んだりします。
それに対し、コンピュータではカラーテレビと同じくＲＧＢモデルを使ってい
ます。カラーテレビを間近で凝視した方はよくお分かりのことと思いますが、
カラーテレビの画面は、「赤緑青」の三つの光のセルがたくさん集まってでき
ています。
赤・緑・青の三色がコンピュータの三原色です。赤だけが光ったら「赤」に、
青だけが光ったら「青」に見えます。その両者が同じくらい強く光ったらおそ
らく「紫」に見えるでしょう。また、何も光らなければ「黒」に、全てが最大
に光ったら「白」に見えます。
ＨＴＭＬでの色の指定も、このＲＧＢ（Ｒ＝レッド、Ｇ＝グリーン、Ｂ＝ブル
ー）の三原色指定を使います。
【例１】--------------------------------------------------------------
俺が池田蛇足だ！！
----------------------------------------------------------------------
【例１】では、「池田蛇足」という文字列に対し、FONTタグを適用し、その属
性COLORに、値として"#FF0000"と指定しています。これで、ほとんどのブラウ
ザでは「池田蛇足」の文字列は赤く表示されるでしょう。つまり、へんてこな
「#FF0000」が「赤」を表しているのです。
このような色の指定方法を１６進数指定と呼びます。＃の直後の二桁は「赤」
の、次の二桁は「緑」の、そして最後の二桁が「青」の光り具合を示していま
す。
「＃ ＲＲ ＧＧ ＢＢ」
| | |
| | →Ｂlue＝青
| →Ｇreen＝緑
→Ｒed＝赤
つまり、「#FF0000」は、赤が「FF」、青と緑は「00」（光らない）という指
定です。
でも「FF」って何でしょうか？「00」なら数字として納得できるとして、何で
英文字が出てくるんでしょうか？それは、色の光り具合を指定するのに、１０
進数ではなく１６進数を使うからです。
私たちが普段使っているのは１０進数ですね。１から数えて、１０数えると１
の位がゼロに戻り、２の位が現れます。ところが、色の光り具合は１６進数で
すから、１６数えないと１の位が０に戻らないわけです。どうやって表記する
かと言えば、数字では足らないので英字を借用します。
1,2,3・・・・8,9,10,11,12,13,14,15（１０進数）
1,2,3・・・・8,9,A,B,C,D,E,F,10,11,12・・・19,1A,1B（１６進数）
ＨＴＭＬでは、色の指定を、ＲＧＢ三原色それぞれに１６進数２桁まで指定で
きます。３桁になる直前は「FF」ですから、全てが光った状態は「#FFFFFF」
になります。これは「白」と同義です。
１６進数での「FF」とは１０進数での「255」を意味します。16進数の２桁だ
から 16×16=256 256-1=255 ということですね。これが三色あるのですから、
ＨＴＭＬで指定可能な色の数は次の式で求められます。（２５５までですが、
０もあるので、１色の光り方のパターン数は２５６ですよ）
256×256×256＝ 16777216
つまり、ＨＴＭＬでは１６７７万色をサポートしているわけです。これはもう
フルカラーと言って問題ありません。なぜならば、人間の目では、これほど多
くの色を識別できないからです。
しかし、この16進数によるＲＧＢ指定は、コンピュータにはよく分かっても、
私たち人間には直感的に分かりません。「#50AB22」がどんな色か瞬時に分か
る人がいたらぜひお目にかかりたい。いたとしても、まあ少数ですね。そこで、
人間にも分かりやすい色の指定方法があります。色の名前で指定する方法です。
【例１】--------------------------------------------------------------
俺が池田蛇足だ！！
----------------------------------------------------------------------
あっけなく「red」とすれば、ブラウザは「池田蛇足」を赤く表示してくれる
でしょう。この方法の方が随分簡単なような気がします。しかし、こちらの方
法には若干問題が残ります。
まずＨＴＭＬでサポートされている色の名前が少ないことです。Ｗ３Ｃによる
ＨＴＭＬ仕様に正式にサポートが表明されている色の名前はわずか１６色のみ
です。
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal,white, yellow
この１６色は、ＲＧＢそれぞれが 00, 80, FF の場合の色です。（ただ一つの
例外を除く）
#00FFFF(aqua), #000000(black), #0000FF(blue), #FF00FF(fuchsia),
#808080(gray), #008000(green), #00FF00(lime), #800000(maroon),
#000080(navy), #808000(olive), #800080(purple), #FF0000(red),
#C0C0C0(silver), #008080(teal), #FFFFFF(white), #FFFF00(yellow)
色の名前と実際の色のイメージはしばしば一致しないものですから、注意しま
しょう。ともあれ、上の色の名をじっくり見ていると色々なことに気づきます
ね。#FFFFFF, #C0C0C0, #808080, #000000 が、「白・銀色・灰色・黒」にな
っていることから、「なるほど、ＲＧＢがみんな同じくらい強く光るから、ど
の色も目立たなくなって、つまり色みがなくなるんだな」ということが分かり
ます。
ＨＴＭＬで色の名前で指定することができるのは確かに１６色ですが、マイク
ロソフト社とネットスケープ社で話し合って（？）、両社のブラウザに互換性
のある色の名前が他にも２００くらい増強されています。すべてを挙げること
はできませんが、たとえば ivory, skyblue などの魅力あるカラーネームがそ
のリストには入っています。もちろん、ＩＥとＮＮでの出力は保証されません
けれど。
何か込み入った話が多かったですね、今回は。#RRGGBB方式で自力で色を作る
のははっきり言って不可能に近いので、#RRGGBBを吐き出してくれるカラーピ
ッカーを搭載したＨＴＭＬエディタやフォトレタッチソフトを使うとよいでし
ょう。YUJU HTML Editor1.5 では、#RRGGBB方式をサポートしましたので、Win
環境の人はお使いになってはいかがでしょうか？？
次回に向けて、次回の内容の理解には不可欠な宿題を出しますので、「●宿題」
のところをよく読んでください。
●謝辞
・この号の「色」に関する解説は、金子隆芳著『色彩の科学』（岩波新書）に
負うところが大きいです。この場を借りて御礼申し上げます。
●宿題
・（１）か（２）かの要求を次号までに満たしてください。
（１）このメールマガジンのサイトのトップページから、icon.gif をダウンロー
ドしなさい。icon.gif は男性の横顔の影絵に「HTML magazine」と書かれた
イメージです。
（２）お好きな絵を何らかのイメージエディタ（お絵描きソフト）で描いて、それ
を Gif方式、JPEG方式、PNG方式のいずれかで保存しなさい。
☆画像のダウンロードの仕方☆
(Windows)お好きな画像の上でマウスで右クリック。ポップアップしたメニューか
ら「名前を付けて画像を保存」みたいなのを選び、保存場所を指定して
「ＯＫ」。この場合、画像の名前を変更してもいいが、拡張子は変えな
いように。
(Mac)お好きな画像をドラッグ＆ドロップしておしまい。かんたんだなぁ。
●前回の宿題の解答-------------------------------------------------------
応募者多数のためしばらくお待ちを！
まだ応募ＯＫですよ (^O^)
-------------------------------------------------------------------------
☆ちょっと難しい言葉☆
プラットフォーム
駅の、電車を待つところ。おっさんが痰を吐いたり、傘でゴルフスイングをす
る場所・・じゃない！
コンピュータで「プラットフォーム」と言えば、そのコンピュータの「環境」
のこと。たとえばどんなＯＳ（Ｗｉｎ？Ｍａｃ？Ｕｎｉｘ？？）を使っている
か。どんなＣＰＵか？どんなメモリーか？そんなコンピュータシステムの環境
を総称して「プラットフォーム」と呼んでいます。
ＷＷＷっていうのは、この「プラットフォーム」を問わないから、「クロス・
プラットフォームなメディア」って言われています。
★編集後記★
・YUJU HTML Editor1.5最終ベータテスト中、以下のバグが報告されました。
●ハイパーリンクが作れない。「適用」ボタンを押すと変なことになる。
＞＞正式版で修正しました
●文字コードを指定すると > が抜ける
＞＞正式版で修正しました。
●ヘルプウィンドウの挙動がおかしい
＞＞しばらくお待ちを
・他にも様々なご意見・ご要望をいただきました。
●終了時のウィンドウのサイズを次回起動時に反映させてくれ
＞＞正式版では対応しました
●簡易ＦＴＰ機能もほしい
＞＞現在対応中です
●ドラッグ＆ドロップでも起動してくれ
＞＞現在対応中です・・なかなかうまくいきません ^^;
●ちゃんとしたヘルプがほしい
＞＞頑張ってみます
・多くの方にベータテストに参加していただき、貴重な意見を得ることができま
した。本当に、ご協力ありがとうございました m(__)m
正式版１．５は水曜日にベクターにアップします。ベクターがいつからサイト
に反映させるかは分かりませんが。
・YUJU HTML Editor1.5 のユーザー登録について
よく readme.txt を読んでください。ハードウェアＩＤとは、あなたのパソコ
ンのメーカー名や型番ではありません。登録申し込みが多く、個別に対応しな
ければならないため、「違いますよ。これじゃ登録できませんよ」というメー
ルを出せません。どうも登録が遅いと感じたら、間違っている可能性がありま
すので調べてみてください。
・ポストペットのメール大募集！！
（すみません、前回のアドレス間違ってました。↓こちらにお願いします）
★蛇足のPOSTPET Mailto:dasoku4@geocities.co.jp
すでに送ってくださった人、ゴメンナサイ m(__)m
・今日の【例】のコードはほとんどサイトにサンプルとして掲載してあります。
是非、併せてご覧ください。掲示板にも足跡を残してもらえると嬉しいっす。
★http://hp.vector.co.jp/authors/VA014079/study_html/
♯もっと掲示板使ってねぇーー！ (^O^)
・広告を掲載してみました。メルマガの相互広告です。
・☆ちょっと難しい言葉☆コーナーができました。今まで秘密にしていた、ちょ
っと意味不明の言葉などリクエストをお待ちしています。ＪＡＶＡって何だ？
とかね。
・ふー。忙しい忙しい。堺港にでも寿司を食いにいくかぁ！！
・今、夏目漱石の『夢十夜』を読んでいます。大学で発表しなくちゃいけない
んですが、なかなかの難物です。
・学園祭シーズンが近づいています。何かいつのまにか所属する学生会の、学
園祭の火元責任者（焼き鳥屋を出店）になってしまったので、何だか面倒で
す。読者の皆さんも、もしよろしければ焼き鳥を食べに来てください。読者
特典でお安くしまひょ。
・最近、僕の周囲が騒がしい。就職課が「就職ガイドブック」なんて配り出し
たからだろうか・・・。誰か教えてください。就職活動っていつから始めれ
ばいいんでしょう？？？
・ついでに、誰か僕を雇ってください ^^;
・・・・やっぱり文学部は辛いんだろうなぁ・・・
----------------------------------------------------------------------
●次号は１０月中旬の発行予定です。
●Visit Our Web Site About This magazine and HTML- - - - - - - - - - -
バックナンバーの閲覧、購読解除＆登録、みんなの助け合い掲示板、リンク集
やソフト紹介など、このメールマガジンのサイトです。
★ＨＴＭＬ入門講座 ホームページ
ＧＯ>>http://hp.vector.co.jp/authors/VA014079/study_html/
●YUJU HTML Editor1.0- - - - - - - - - - - - - - - - - - - - - - - - -
ＨＴＭＬをテキストベースで編集することに特化したエディタです。「シェア
ウェア（５００円）」ですが、当マガジン読者には無料で配布します。是非、
ダウンロードしてお使い下さい。なお、無料でお使いになる場合は、下記アド
レスまで一言、お便りくださいね。ちなみに、拙作のソフトです。性能は…そ
んなにすんごいモノじゃありませんので、期待しないように (^O^) あくまで
教育目的の仮バージョンってことで。実用版 2.0 はそのうちリリース。
★なお、このソフトは Windows95 98 NT4.0以上の環境でお使いになれます。
Download URL
http://www.vector.co.jp/vpack/browse/software/win95/net/sn073890.html
Mailto dasoku@geocities.co.jp
最新ベータ版ダウンロード（YUJU HTML Editor1.5β）
Download URL
http://hp.vector.co.jp/authors/VA014079/study_html/
Mailto dasoku@geocities.co.jp
===================================================================
このメールマガジンは、インターネットの本屋さん『まぐまぐ』を利用し
て発行しています。( http://www.mag2.com/ )
===================================================================
----------------------------------------------------------------------
ＨＴＭＬ入門講座 第13号
発行人：池田蛇足 dasoku@geocities.co.jp 10月11日発行 発行部数 2825部