HTML色の扱い及びXML講座 DTDその２/メールマガジン第66号今週のおさらい

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

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

＜第66号＞今週のおさらい 　　　　　　　　　　　　　　　　　毎週金曜日配信　What's New 2003/9/12 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓　　　■ HTML講座第13回 --- 色の扱い　　　■ XML講座　第４章 --- DTD その２

◆ HTML講座 --- Webで扱う色

ページを鮮やかに彩る色は、実に奥が深く、扱いにくい性質を持っています。ユーザによっては嫌悪感を示す色さえあるわけで、制作者は、どのような場面でどのような色を使うのか、いろいろと迷うことさえあります。

そもそも、Webで扱う「色」というものは、どのような仕組みで、どのようにして指定すればよいのか、この点について学んでいきます。

■ RGB三原色

コンピュータのデータを表示するディスプレィ・モニターは、グラフィック・カード（ビデオカード）を通じて表示されます。グラフィック・カード（最近はマザーボードのオンボードで提供されている機種もある）は、その性能に応じて、表現できる色数が決まってきます。

いわゆる24ビットフルカラーとは、256Ｘ256Ｘ256 の 1677万色以上が可能な色数を持っており、特に最近のコンピュータのほとんどで24ビットフルカラーがサポートされています。

コンピュータの色とは、右の図で示すとおり、RGB（赤緑青）の光の３原色によって構成され、それぞれの色の発光度合いによって、様々な色を表現しています。

光の３原色は、混ぜ合わせれば混ぜ合わせるごとに色が明るくなってきます。逆に、発光の度合いを弱めることで、暗い色になっていきます。色が光の強弱によって表現するという、１つの例であることがお分かりになるでしょう。

■ RGBの色指定

色の指定は、RGBに対して16進数で記述して行います。

先ほども説明したとおり、色は発色の度合いです。00はまったく発色せず、FFがもっとも強く発色する16進数の数値です。

16進数とは

16進数とは、0から始まってF（16）の次に桁上がりします。10進数では１から始まって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進数の２桁を、ハッシュマーク「#」に続けて、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色の８ビットカラーが主流になっていました。24ビットフルカラーが全盛の現在では、あまり古い環境を意識することがなくなりましたが、今でも現役のマシンは少なくありません。

そうした古い環境でも確実に色を表示できるように決められたのが、「ウェブ・セーフ・カラー＝ WebSafeColor」です。

WebSafeColorを構成する値は、00、33、66、99、CC、FF の６つで、216色が制定されています。これによって、視覚系ブラウザのほとんどで作者が指定した色を再現することができます。

たった216色しかなくても、ページを彩るには十分な色数であり、全部を使い切ることはまずあり得ないほどです。

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

■ HTMLの色指定方法

HTMLでは、色を指定するタグはありません。色を指定できるのは、幾つかのタグで決められている属性を使います。なお、HTML4.01では、すべて 非推奨 扱いとなっています。

<body bgcolor="#ffffcc" text="#000000" link="#0036ff" vlink="#808000">

この記述は、コンテンツを配置する body要素の背景色を薄いクリーム色、文字色を黒、リンクの文字色を青、訪問済みリンクの文字色を紫に指定するものです。ただし、「非推奨」扱いとなっていますので、DTD（文書型定義）の宣言は、Transitional を指定してください。

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

◆ XML初級講座 --- DTD その２

前回は DTD（文書型定義）についての概要をお伝えしました。今回は、DTDのお約束事について解説します。

DTDでは、要素の並び順や記述回数を決めることができます。そうした仕様を作者自身の手によって作成し、その仕様の元に XMLインスタンスを作成します。

DTDを作成しなければならない理由とは、その XML文書を他のアプリケーションで利用した場合、記述される要素の並びや構造が示されなければ、データとして再利用することができないからです。そのために、DTDを作成し、「検証済みXML文書」に変換する必要があるためです。

■ 記述順位の規則

XMLインスタンスによる要素中で配置する子要素の記述順位は、DTDの宣言スタイルによって次のように決められます。

<!ELEMENT magazine (book,author,content)>

この子要素の宣言では、必ず、親要素 magazine要素内で、それぞれその順序で１回使わなければなりません。子要素の順序はあくまで、book、author、content の順で記述しなければなりません。同時に、各子要素を省略することもできません。

■ 記述回数の規則

<!ELEMENT magazine (book|author|content)>

子要素にバーチカルバーを付与した場合は、その子要素の中からいずれか１回だけ記述しなければなりません。複数の子要素を配置することはできません。

<!ELEMENT magazine (book?,author?,content?)>

子要素にクエスチョンマークを付与した場合、その子要素は 0回（１度も使わない）、あるいは１回記述することができます。複数使うことはできません。

<!ELEMENT magazine (book,author+,content)>

子要素にプラス記号を付与した場合、その子要素は１回以上記述しなければなりません。省略することはできません。

<!ELEMENT magazine (book,author*,content)>

子要素にアスタリスク記号を用いた場合は、その子要素は 0回以上（１度も使わないを含め何度でも）任意に記述することができます。

■ 複合する記述のパターン

上記の規則を混合して記述することもできます。以下のその１例です。

<!ELEMENT magazine (book,(author|content)*)>

book要素は 0回、あるいは１回以上記述することができます。ただし、その場合、author要素、あるいは content要素の中からいずれか１つを記述しなければなりません。

各記述パターンを複合して、様々な記述回数、記述順位を指定する DTDを任意に作成できる面白さがあります。

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

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