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

                  毎週金曜日配信 What's New 2002/6/28
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
           初心者のためのホームページ作り
           http://www.scollabo.com/banban/
                <第7号>

  誰でもすぐ分かるHTMLタグを丁寧に解説しながら勉強していく講座です。
  講座をすすめる中で分からない点があったらメールください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

 この講座はタグを覚えてテキストエディタだけでホームページを作るという、
どちらかというとやや専門的な作業が中心になります。

 各種の専用のオーサリングソフトとは一線を画して、思い通りのプロ並みのホ
ームページを作ることが出来ます。

 時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。

 当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンを等幅・等長フォントでお読みいただくと、快適に読めます。文字幅は約36
文字になっています。

 今週の課題■Webで扱う色

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ここのでのおさらい・・・よくある質問から

●テキストエディタについて
HTML文書を作成する上で必ず必要なソフトです。
 Windowsでは「メモ帳」もしくは「ワードパッド」Macintoshでは「SimpleText」
もしくは「TextEdit」など

 決して高価なソフトを利用しなくてもOSに付属しているもので十分です。
なお、テキストエディタを利用する際、「リッチテキスト」形式でなく、標準テ
キストとして保存しますので、お使いのエディタのヘルプを参照して保存方法を
確認しておく必要があります。

 「リッチテキスト」とは、フォントや字体まで保存するワープロ的な使い方で
すので、あくまでプレーンな標準テキストにしておいてください。特に Windows
のワードパッド、Macintoshの TextEditには注意が必要です。

 保存時には、拡張子 .html  と半角小文字で指定して保存します。これでHTML
文書として保存できることになります。多くの間違いに、拡張子を全角英字の小
文字にしてしまったり、htmlの前に「ピリオド」を忘れる場合があります。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆基本・・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〜255)
つまり、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) になります。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆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万色が指定できます。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆色の扱い

  Webページでさまざまな色を配して、見た目に訴える効果を上げることは多く
のサイトで行っています。しかしどのような環境にも指定した色を表示できると
は限りません。

 昨今のパソコンにおけるカラー表示は飛躍的に進歩して、ほとんどが6万5000
色、あるいは、1677万色が表示できるようになりました。しかし、一方で、古い
パソコンでは 256色しかサポートしていないものもあるのが現実です。

 私も1台持っていますが、そりゃ悲しいくらい貧弱なカラー環境で、写真画像
はお粗末な表示しかできません。でも、私がカラー設定する上で、このパソコン
をリファレンスにして、写真以外はこれで表示できない色は使わないというふう
にしています。これをセーフティーカラーと呼び、Webの世界でも、Webセーフテ
ィーカラーが存在します。

 RGB各色に対して6個づつのセーフティーカラーパレットがあり、基本的に
は、00、33、66、99、CC、FF のそれぞれの数値で組み合わせます。総数はたっ
たの 216色しかありませんが、 これをうまく組み合わせれば驚くほどカラフルで
素晴らしいページができます。この 216色をWebセーフティーカラーと呼びます。

 セーフティーの意味合いは、どのようなユーザ環境でも安全で必ず発色すると
いうハードウェアの概念で求められた数値です。ただし、必ずしも指定した色が
再現できるというものではなく、ユーザ環境によって多少色の細かなズレは発生
します。

 ただし 256色環境のパソコンで、それ以外の色を指定した場合は、近似色が選
ばれます。

 WebSafeColorパレット一覧
 http://www/scollabo.com/banban/lectur/websafe.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆カラーネーム(色名:ColorName)による色の指定

 数値のほかに色の名前で指定する方法がありますが、安全に使える色は下記の
ような16色しかありません。Internet Explorerや Netscapeでは、それぞれ独自
に設定した色名がありますが、ユーザビリティを考えるとお勧めできません。
 例えば、IEで指定したカラーネームが他のブラウザでは無視される危険があり
ます。

   色名    16進数表記
    black      #000000  黒
      silver     #c0c0c0  銀色(灰色)
      gray       #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  青緑

 カラーネームのサンプルはこちら
 http://www.scollabo.com/banban/lectur/color.html#colorname

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆色を使ったページの作成

さっそく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: #00f }
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 をダブルクリックします。
表示がうまくいかない場合は、タイプミスが考えられます。もう一度確認してく
ださい。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説

body  { background-color: white }
 画面全体を白色に設定しました。ブラウザによっては、デフォルト(初期設定)
 が必ずしも白とは限りませんので、なるべく使いたい色を設定しておくことを
 お奨めします。

p { font-weight: bold }
 p要素(段落要素)すべてに太字を設定しました。このページに出てくるp要
 素は強調されます。

p.test1 { color: maroon }
 文字色を茶色としました。茶色というよりワインカラー?

p.test2 { color: #090 }
 やや深めの緑色の文字色を設定しました。

p.test3 { color: rgb(255,255,255) ; background-color: yellow }
 背景色に黄色を、文字色には白を設定しました。

span { color: #ff0000 }
 インラインレベル要素の span に文字色赤を設定しました。このタグに囲まれ
 た内容は赤色で表示されます。インラインレベルなので、改行もスペースもあ
 りません。

 色の設定について、ご自分でさまざまな色を使って試してみてください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆色を設定する場合の注意点

 背景色と文字色を設定する上で、近似色を使うのは危険です。ユーザ環境によ
っては、まったく字が読めなくなるという状況が発生します。
 例えば、背景色が白で文字色が黄色だと本当に読みづらいものです。同じよう
に背景色が黒で、文字色が濃い青だとどうなるでしょうか。

 制作者側のグラフィックスカードやモニター環境で色を設定するのはユーザの
立場を無視する場合があります。背景色と文字色の配色に関しては、対象色を選
ぶようにするといいといわれていますが、色弱障害のある方には、青、赤、緑な
どが判別しにくい可能性がありますので、配慮が必要です。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆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)の中で制作者
に強く求めているものです。

WAIについてのサイト(初心者にはちょっと難しいかな)
  http://www.w3.org/TR/2000/REC-ATAG10-20000203/ (英文)
  http://www.scollabo.com/banban/term/wai.html (主だった説明)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆今週のポイント

文字色を設定する  要素 { color: カラーコード or カラーネーム }
背景色を設定する  要素 { background-color: カラーコード/カラーネーム }

色の設定は、ほとんどの要素で使えます。
ブロックレベル要素、インラインレベル要素 ただし<head>内での要素には使え
ません。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆セーフティーカラーでどこまで表現できる?

 ホームページに色を使うことによって、全体の性格付けができますし、雰囲気
を盛り上げる上でも欠かすことができません。

 写真以外で色をふんだんに使うということは非常に稀です。ちなみに私のサイ
トでの色の種類は画像をのぞいて、白黒含めたったの10色です。サンプルを入れ
ても20に満たない少なさです。もし、 216色のセーフティーカラーを全部使った
としたらさぞや賑やかで楽しいページになるでしょうね。そのうち作ってみよう
と思います。

今回はここまで、ではでは・・
今週のおさらいはWebページにも掲載しましたので、是非見ておいてください。
Webページは画像が使えるので、より分かりやすく説明しています。あわせて
過去の記事のおさらいも掲載しています。

 (今週のおさらい)
  http://www.scollabo.com/banban/magazine/backnm_007.html

 次回は、アンカー(リンク)について詳しく解説します。

今後の講座予定(順不同)
パス、画像の扱い、リスト、テーブル、フォーム、フレーム、Java Scriptなど

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、また他に持って
いるブラウザ、使っているテキストエディタなど、なるべく分かりやすく制作環
境を明記していただけると助かります。

発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

バックナンバー こちらで公開しています。
プレーンテキスト  http://www.scollabo.com/banban/magazine/magazine.html
各号のおさらい  http://www.scollabo.com/banban/magazine/
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196

配信の変更・中止はこちらです。個別の手続きは受け付けていませんので、ご面
倒でも各自でお願いします。
当サイトにて http://www.scollabo.com/banban/magazine/magazine.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

<えでぃた〜ず・るーむ>

 念願の新しい Macintoshを購入しました。その速さにビックリです。色の再現
も鮮明で付属しているスクリーンセーバーを見ているだけでも気持ちのいいもの
です。
  OSは最新のもので、インターネットからのアップデートもできるのは、今も使
っているWindowsマシンの、Windows Update と同じ機能を持っています。
 ですが、こちらでは、純正のバンドルソフトのアップデートもしてくれるので
気分がいいものです。

 Macintosh といえばブラウザはNetscapeと思っていたら、なんと、マイクロソ
フト社のInternet Explorer だけしかインストールされていなかったのには少し
驚きでした。バージョンは 5.2でした。

 何年か前に米国マイクロソフトが Apple社に資金援助したのがきっかけになっ
ていつの間にかこうなってしまったんですね。で、早速Netscapeをダウンロード
して標準のブラウザにしました。Netscapeは、早くもバージョンが 7.0になって
おり、WindowsでのNetscape6よりも早く立ち上がります。詳細は今のところ不明
ですが、分かり次第お伝えします。

 同時に Macintosh専用のドイツ製のブラウザiCabもダウンロードしてインスト
ールしたのですが、こちらはスタイルシートが完全に実装されていなくて残念で
した。iCabの特徴はなんと言っても軽い!ことです。

 さて使い勝手ですが、日本語入力がもうひとつかなぁという感じです。慣れて
いない面もありますが、今まで使っていた Macintoshとも少し違うみたいで、不
思議な感覚です。マウスも昔のが良かったと思っています。習うより慣れろです
か、しばらくはこいつと遊んでみます。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆著作権について

個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中のすべての内容についての著作権は放棄していません。
無断で使用することを固く禁じます。

      Copyright(C) 2002  www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■




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