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

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

<第66号> 今週のおさらい
                   毎週金曜日配信 What's New 2003/9/12
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   ■ HTML講座  第13回 --- 色の扱い
   ■ XML講座 第4章 --- DTD その2
HTML講座 --- Webで扱う色
ページを鮮やかに彩る色は、実に奥が深く、扱いにくい性質を持っています。ユーザによっては嫌悪感を示す色さえあるわけで、制作者は、どのような場面でどのような色を使うのか、いろいろと迷うことさえあります。
そもそも、Webで扱う「色」というものは、どのような仕組みで、どのようにして指定すればよいのか、この点について学んでいきます。
RGB三原色
コンピュータのデータを表示するディスプレィ・モニターは、グラフィック・カード(ビデオカード)を通じて表示されます。グラフィック・カード(最近はマザーボードのオンボードで提供されている機種もある)は、その性能に応じて、表現できる色数が決まってきます。
いわゆる24ビットフルカラーとは、256X256X256 の 1677万色以上が可能な色数を持っており、特に最近のコンピュータのほとんどで24ビットフルカラーがサポートされています。
光の三原色を示した図 コンピュータの色とは、右の図で示すとおり、RGB(赤緑青)の光の3原色によって構成され、それぞれの色の発光度合いによって、様々な色を表現しています。
光の3原色は、混ぜ合わせれば混ぜ合わせるごとに色が明るくなってきます。逆に、発光の度合いを弱めることで、暗い色になっていきます。色が光の強弱によって表現するという、1つの例であることがお分かりになるでしょう。
RGBの色指定
色の指定は、RGBに対して16進数で記述して行います。
先ほども説明したとおり、色は発色の度合いです。00はまったく発色せず、FFがもっとも強く発色する16進数の数値です。
16進数とは
16進数とは、0から始まってF(16)の次に桁上がりします。10進数では1から始まって9の次に桁上がりすることは言うまでもありません。
10進数  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16  17 …… 128 …… 256
16進数 0 1 2 3 4 5 6 7 8  9  A  B  C  D  E  F  10 ……  80 ……  FF
このように、各色の度合いを 256通りに分けて指定することになります。その数値が発色の度合いになります。
具体的には、16進数の2桁を、ハッシュマーク 「#」 に続けて、RGB順に記述することで、求める色を指定できます。
具体的な色の指定
具体的には、以下に示すように RGB値を記述して、表現したい色を指定します。
#FF0000 #FF9900 #CC0000
#00FF00 #00FF66 #66FF00
#0000FF #0066FF #000099
#800080 #A000C0 #BAABCC
色名による指定
HTMLでは、直接色名を指定することができます。ただし、安全に利用できる色名は、16色しかありません。以下に掲げる色名以外では、ユーザ環境によっては正しく発色しないか、まったく色が表示できない場合がありますので、十分に注意してください。
black #000000 silver #C0C0C0 gray #808080
white #FFFFFF maroon #800000 red #FF0000
purple #808080 fuchsia #FF00FF green #008000
lime #00FF00 olive #808000 yellow #FFFF00
navy #000080 blue #0000FF teal #008080
aqua #00FFFF ここでは実際の色名を使って表現しています。
WebSafeColor
少し古いコンピュータでの色のサポートは 256色の8ビットカラーが主流になっていました。24ビットフルカラーが全盛の現在では、あまり古い環境を意識することがなくなりましたが、今でも現役のマシンは少なくありません。
そうした古い環境でも確実に色を表示できるように決められたのが、「ウェブ・セーフ・カラー = WebSafeColor」です。
WebSafeColorを構成する値は、00、33、66、99、CC、FF の6つで、216色が制定されています。これによって、視覚系ブラウザのほとんどで作者が指定した色を再現することができます。
たった216色しかなくても、ページを彩るには十分な色数であり、全部を使い切ることはまずあり得ないほどです。

WebSafeColorのカラーチャートはこちら → WebSafeColorカラーパレット一覧

HTMLの色指定方法
HTMLでは、色を指定するタグはありません。色を指定できるのは、幾つかのタグで決められている属性を使います。なお、HTML4.01では、すべて 非推奨 扱いとなっています。
<body bgcolor="#ffffcc" text="#000000" link="#0036ff" vlink="#808000">
この記述は、コンテンツを配置する body要素の背景色を薄いクリーム色、文字色を黒、リンクの文字色を青、訪問済みリンクの文字色を紫に指定するものです。ただし、「非推奨」扱いとなっていますので、DTD(文書型定義)の宣言は、Transitional を指定してください。

スタイルシートで表現する色 (詳しい構文は、今週の「第66号」をお読みください。)

XML初級講座 --- DTD その2
前回は DTD(文書型定義)についての概要をお伝えしました。今回は、DTDのお約束事について解説します。
DTDでは、要素の並び順や記述回数を決めることができます。そうした仕様を作者自身の手によって作成し、その仕様の元に XMLインスタンスを作成します。
DTDを作成しなければならない理由とは、その XML文書を他のアプリケーションで利用した場合、記述される要素の並びや構造が示されなければ、データとして再利用することができないからです。そのために、DTDを作成し、「検証済みXML文書」に変換する必要があるためです。
記述順位の規則
XMLインスタンスによる要素中で配置する子要素の記述順位は、DTDの宣言スタイルによって次のように決められます。
<!ELEMENT magazine (book,author,content)>
この子要素の宣言では、必ず、親要素 magazine要素内で、それぞれその順序で1回使わなければなりません。子要素の順序はあくまで、book、author、content の順で記述しなければなりません。同時に、各子要素を省略することもできません。
記述回数の規則
<!ELEMENT magazine (book|author|content)>
子要素にバーチカルバーを付与した場合は、その子要素の中からいずれか1回だけ記述しなければなりません。複数の子要素を配置することはできません。
<!ELEMENT magazine (book?,author?,content?)>
子要素にクエスチョンマークを付与した場合、その子要素は 0回(1度も使わない)、あるいは1回記述することができます。複数使うことはできません。
<!ELEMENT magazine (book,author+,content)>
子要素にプラス記号を付与した場合、その子要素は1回以上記述しなければなりません。省略することはできません。
<!ELEMENT magazine (book,author*,content)>
子要素にアスタリスク記号を用いた場合は、その子要素は 0回以上(1度も使わないを含め何度でも)任意に記述することができます。
複合する記述のパターン
上記の規則を混合して記述することもできます。以下のその1例です。
<!ELEMENT magazine (book,(author|content)*)>
book要素は 0回、あるいは1回以上記述することができます。ただし、その場合、author要素、あるいは content要素の中からいずれか1つを記述しなければなりません。
各記述パターンを複合して、様々な記述回数、記述順位を指定する DTDを任意に作成できる面白さがあります。


This page is Valid HTML 4.01! Copyright(C) 2002-2003 初心者のためのホームページ作り臨時制作委員会 wfb-org@jcom.home.ne.jp