毎週金曜日配信 What's New 2003/9/12
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第66号＞
wfb-org@jcom.home.ne.jp
（初心者のホームページ作り臨時制作委員会）
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。
当講座ではHTML4.01及び XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようになり
ます。
今週のコンテンツ
■ Webデザイン 第13回 --- URLは変えない
■ HTML講座 第13回 --- Webで扱う色
■ XML初級講座 第５回 --- DTD その２
■ タグの解説 --- link要素
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆Webデザイン（第13回） URLは変えない
既にホームページを立ち上げている方には必読です。
ページ作りをしていくうちに、いろいろと変更が出てきます。多分ほとんどの人
が経験していることと思います。
コンテンツそのものの変更や更新は、まったく問題がありません。問題なのは
ページのファイル名を変更してしまうことです。
ページのファイル名とは、それはまさに URLなのです。ファイル名を変えてし
まうことは、URLも変わってしまうことです。さて、何が問題でしょうか？
多くのロボット型検索サーチでは、ロボット（実体はソフトウェア）を世界中
の Webサイトに派遣し、タイトルやコンテンツの主だった内容とその URLを収集
し、データベースに格納します。
ユーザは、その検索サイト（Googleや AllTheWebなどが有名）で検索するとき
にキーワードを入力し、目的のページを探します。すると、検索エンジンがデー
タベースから入力されたキーワードとマッチしたサイトを探し出し、そのページ
の URLと簡単な内容などを、ページに出力します。
ユーザは、自分の目的を達成してくれるであろう URLをクリックして該当する
ページにたどり着くことができます。
しかし、登録された URLと、作者が変更してしまった URLでは、当然一致しま
せん。そして、悲しいメッセージがユーザのブラウザに表示されてしまい、ユー
ザは「何だ、くそったれ」と、ふてくされます。
当然、ユーザがブックマークしていた場合も同じ結果になってしまいます。
■ディレクトリ名とファイル名の設計
ファイル名と共に重要なのが、ディレクトリ名です。勿論、ディレクトリ名も
同様に URLの一部です。
サイト開設と運営・維持・管理のためにも、ディレクトリ名、ファイル名は
その内容が判断できるような名前を考え、簡単に変更しないようにしましょう。
設計時には、考え抜かれた名前を付けてください。
特に、コンテンツの更新作業時には、すぐに目的のファイルが探せるように
することも大切です。あなたが作ったページの URLは世界中にたった１つしか
存在しないのです。
頻繁に更新・変更作業があっても、たやすくファイル名などを変更しない習
慣を身につけましょう。
ただし、追加のページはその限りではありません。しかし、追加したページ
のファイル名も変更しないように気をつけましょう。
（第14回 スプラッシュページの是非）
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML講座（第13回） 色の扱い
色とは、まさにいろいろです。同時に奥が深く、サイト全体のイメージを決定
するほど重要な役割さえ持っています。今回は Webで利用する色について詳しく
解説します。
■RGB
コンピュータで利用する色とは、光の３原色から成り立っています。一般に私
たちが生活の中で体験する色は、CMYKいう４つの色で構成されたもので、印刷
や絵画などに利用されています。
CMYKとは、C（シアン）、M（マゼンダ）、Y（イエロー）、K（黒）で構成さ
れており、それらの色を混ぜる毎に色が濃くなっていきます。
一方、コンピュータは RGBの三原色、R（Red：赤）、G（Green：緑）、そし
て、B（Blue：青）の光の原色から構成されています。
光の色は、混ぜる毎に明るくなり、３原色全部を混ぜると「白」になります。
つまり、赤、緑、青の原色すべてが「発光」していることになります。逆に、
すべての色を発光しなければ「黒」になります。
■HTMLの RGB設定
HTMLで色を指定するには、上記のとおり RGBをそれぞれ指定しなければなりま
せん。RGBそれぞれの値は16進数で示され、RGBの順で記述します。
16進数とは、なかなか馴染みが薄い進数ですが、コンピュータではごく当た
り前に利用されています。16進数とはコンピュータの元になる基数の８ビット
を表わしています。８ビットとは、２の８乗で 256になります。
つまり、0〜255の 256となります。（コンピュータでは数を数えるとき、必
ず 0 から始まります）。これを16進数で示すと 00〜FF という「２桁の記号」
で表わされることになります。
10進数 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 256
16進数 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 FF
RGB各色に８ビット（256）が割り当てられ、256Ｘ256Ｘ256＝1677万色以上
という色数を指定することができ、これを24ビットフルカラーと呼びます。
色の指定には、RGBの各値の前にハッシュマーク「#」を記述しなければなり
ません。例えば、
黒の指定 #000000 （RGBすべてが発光しない）
赤の指定 #FF0000 （Rの値のみ発光し、GBは発光しない）
紫の指定 #800080 （R と B が 中間の発光で、Gは発光しない）80＝128
このように RGB２桁の数値をそれぞれに設定して記述します。
■WebSafeColor（ウェブ・セーフ・カラー）
最近のコンピュータはエントリー・クラス（入門用）でも、24ビットのフルカ
ラーをサポートしているので、どのような設定でも表示することが可能になっ
ています。本当にいい時代になりました。
しかし、少し古いマシンになると、８ビットしか対応しておらず、色の総数
は、たったの 256色しか表示できません。しかも、そうした古いマシンは今で
も現役で活躍しています。
そこで W3C（注１）は、古い環境のコンピュータでも色を再現できる 216色
で構成された WebSafeColor という指針を打ち出して、その色を使うように強
く推奨しています。
WebSafeColor では基本的に 00、33、66、99、CC、FF の ６つの値で構成さ
れ、６Ｘ６Ｘ６＝216色となります。
WebSafeColor一覧
http://www.scollabo.com/banban/lectur/websafe.html
しかしながら、すべてのデザイン を216色のみを使って制作するのは実際の
ところ大変難しいものです。
現実的にはページ全体のデザインや画像のクオリティそのものを左右するよ
うな大きな単色ベタ面などには、できる限り 216色の WebSafeColor を使うよ
うに気遣いすればいいと思います。
単色ベタ面を多く含む画像の場合は、特にそういった点に関して注意が必要
です。
ただし、写真画像の場合は、フルカラーの画像を８ビットカラー環境で表示
するのもや、あらかじめ８ビットカラーに減色しておくのもなど、どちらでも
結局ディザ（ギザギザ）を施される結果になるため、WebSafeColorに減色する
ことはあまり意味をなしません。
下手に減色せず、最適化したフルカラーのJPEG画像を、ユーザー側のブラウ
ザのディザリング処理に任せるようにするほうがいいでしょう。
■HTMLにおける色指定の問題点
HTMLで直接色を指定する場合、そのすべてが「非推奨扱い」となります。これ
は、色を指定するタグの属性で行います。
例えば、
<body bgcolor="#ffffcc"> 背景色を薄いクリーム色に設定
つまり bgcolor属性が、非推奨となります。では、推奨されるべき設定方法
とは、どのような記述をすればよいのでしょうか。
<body style="background:#ffffcc">
この style属性を利用した記述方法は、スタイルシートの設定の１種で、推奨
されている方法です。この場合、スタイルシート未対応のブラウザでは、この
設定を無視するので「安全」と言われています。
さらに、スタイルシートでは、ほとんどのタグに適用することが可能です。
ちなみに、bgcolor属性で背景の色指定できるタグは、body、table、tr、td
などわずかしかありません。
また、同様に非推奨扱いとなっている、fontタグでは、文字色を指定するこ
とができます。
<font color="#ff0000"> 文字色を赤色に指定（非推奨扱い）
■スタイルシートと WebSafeColor
文字色や背景色を指定できるスタイルシートでは、WebSafeColorを含め、３桁
の記述設定ができます。
例えば赤色を指定する場合には、#f00 だけで #ff0000 と同じ色を指定する
ことができます。
また、RGBを数値で表わし、RGB(255,0,0) 、RGB(100%,0%,0%) という記述指
定もできます。
■色名による指定
16進数を使わない方法として、カラーネーム（色名）を直接指定することがで
きます。ただし、銅のような環境でも正しく色が再現できるのは、16色しかあ
りません。
MEISや、Netscapeでは様々な色名を指定することができますが、環境によっ
ては、必ずしもその色が表示されるとは限りません。16色以外の色は、16進数
を使うように使うように心がけましょう。
（16色のカラーネームは「今週のおさらい」を参照してください。）
◆色を使ったHTMLの作成
様々な指定方法を記述したスタイルシートを使って、HTMLを作成します。以下
のHTMLをタイプして、実際の色がどのように表現できるのか試してみましょう。
なお、スタイルシートを利用しますので、コロン「：」、セミコロン「；」を
間違えないようにしてください。
<!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: #fff;
color: #000 }
h1 {
letter-spacing: 1ex;
text-align: center }
p {
margin: 1em 8%;
padding: 1em;
letter-spacing: 1px;
line-height: 130% }
.param1 {
color: #f00;
font-weight: bold }
.param2 {
color: #090;
font-weight: bold }
.param3 {
color: #00f;
font-weight: bold }
.param4 {
padding: 2px;
background: #000;
color: #fff }
#param5 {
background: #ccc;
color: #000 }
#param6 {
background: #ccf;
color: #000 }
#param7 {
background: #ddd;
color: #fff }
#param8 {
background: purple;
color: #fff }
.param9 {
padding: 2px;
background: #fff;
color: #000 }
#param10 {
padding: 2px;
background: #0f0;
color: #f00;
font-weight: bold }
-->
</style>
</head>
<body>
<h1><span class="param1">色</span><span class="param2">色</span>
<span class="param3">色</span></h1>
<p id="param5">
コンピュータの色は <strong>RGB</strong> による光の３原色で
構成されています。<strong>R</strong> は <span class="param1">赤</span>
を表わし、<strong>G</strong> は <span class="param2">緑</span> 、
そして、<strong>B</strong> は <span class="param3">青</span> を
表わしています。
</p>
<p>
スタイルシートでは、普通の文字列にも
<span class="param4">背景色</span> を表示することができます。
</p>
<p id="param6">
もちろん、このようにブロックレベル要素中でも
<span class="param4">背景色</span> を設定することも可能です。
</p>
<p>
ただし、<span class="param4">背景色</span> を設定する場合には、
コントラストに気をつけましょう。
例えば、このような <span id="param7">背景色</span> は、
環境によっては見えなくなります。
</p>
<p id="param8">
背景色を設定する場合は、色の明るさ、暗さを対照的に使います。
<span class="param4">暗い背景色</span> の場合には
<span class="param9">明るい文字色</span>を配色するようにし、
<span class="param9">明るい背景色</span> には、
<span class="param4">暗い文字色</span> を配色として利用するように
心がけましょう。
</p>
<p>
また、色弱障害者では <span id="param10">背景色</span> は、
まったく見えなくなりますので、色の扱いには十分注意してください。
</p>
</body>
</html>
（ご注意）
メールマガジンの１行の文字数に制限があり、多くの記述で改行しています。
できるだけ改行なしでタイプしてください。
実行結果
http://www.scollabo.com/banban/magazine/mmsample/sample_66-1.html
◆解説
（スタイルシートより）
■body { background: #fff; color: #000 }
すべてのコンテンツを配置する body要素の背景色を白、文字色を黒に設定。
このタグに囲まれる背景色、文字色に適用されます。
ただし、それぞれの要素に色が設定されていた場合には、その色が適用され
ます。何も設定していない場合には、ここの設定が適用されます。
■h1 { letter-spacing: 1ex; text-align: center }
見出しの文字間隔を、小文字の x の高さの幅に、文字位置をセンタリングす
る設定にしました。
■p { margin: 1em 8%; padding: 1em; etter-spacing:
1px; line-height: 130% }
段落を示すタグに、コンテンツの外側の余白の上下に１文字分、左右に画面の
８％分に設定しました。
コンテンツの内側の余白は、上下左右とも１文字分、このタグの中の文字の
間隔は１ピクセル分、行間は文字の高さの30％に設定しました。段落タグすべ
てに適用します。
■.param1 { color: #f00; font-weight: bold }
汎用的に利用できるクラスを設定。このスタイルシートに適用するタグでは、
文字色を赤、文字を強調する設定にしました。
クラス設定のため、<タグ名 class="param1"> と記述して利用します。
■.param2 { color: #090; font-weight: bold }
同じく、クラス設定のスタイルシートです。
文字色を濃い目の緑、文字を強調する設定にしています。
■.param3 { color: #00f; font-weight: bold }
これも同様にクラスによるスタイルシートを設定しています。
文字色を青、文字を強調させています。
■.param4 { padding: 2px; background: #000; color: #fff }
やはり同じようにクラスを設定しています。
コンテンツの内側の余白を上下左右とも２ピクセル分、背景色は黒、文字色
を白に設定しています。
background と、background-color の違いは、前者は色と共にスペースで区
切って背景画像などの設定を行うことができ、後者は背景色だけを設定します。
background属性については、いずれ機会を改めて解説します。
■#param5 { background: #ccc; color: #000 }
このスタイルシートの設定は、idセレクタを意味しています。このセレクタの
原則は、同一ページで１回しか使うことができません。何度も利用する場合に
は、クラスで設定しなければなりません。
idセレクタの利用は、<タグ名 id="param5"> というように id属性を使って
指定します。id のセレクタは、必ずハッシュマーク「#」をつけます。
ここでは、背景色を灰色、文字色を黒色としています。
〜 以下、スタイルシートの解説は省略します。基本的には背景色や文字色
を変えただけです。〜
（HTML文より）
■<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
HTMLがどのバージョンのタグセットを利用しているのかを、明示的に宣言する
文書型定義を宣言しています。ここでは、Strict（厳格仕様）のタグセットを
用いることを示しています。
HTMLを記述する場合には、必ず、文書型定義を宣言しなければなりません。
この宣言がなくても、ブラウザで表示できる場合がありますが、それはあく
までブラウザ側で補完してくれているのであって、すべてのブラウザがそうで
あるとは限りません。
■<html lang="ja">
htmlは、HTML文書の中で、最上位に位置するいわばルート要素です。省略する
ことも可能ですが、正統派を目指す上では、必ず記述するように心がけましょ
う。なお、lang属性は、文書の言語コードを設定するもので、ここでは日本語
を指定しています。
この属性の記述がなくても、ブラウザは日本語を表示してくれる場合があり
ますが、それはあくまで日本語仕様のブラウザを使っている場合に有効であっ
て、すべてのブラウザがそうであるとは限りません。
安全のためにも、lang属性はきちんと記述しましょう。
■<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
この記述は、ユーザエージェント（Webブラウザを含む）や、Webサーバ（正確
には、HTTPサーバ）に対して、文書のMIMEタイプ（注２）を伝えるために記述
します。
文書は、テキスト形式で書かれたHTMLであることと、記述した文字符号コー
ドが「シフト JIS」を使っていることを明確に伝えます。
この記述がない場合には、文字化けを発生する可能性もありますので、必ず
忘れないように書くようにしてください。
■<meta http-equiv="Content-Style-Type" content="text/css">
HTML文書中でスタイルシートを利用する場合に、必ずの構文を記述します。
主に、ユーザエージェントに対する情報を提供します。
■<h1><span class="param1">色</span><span class="param2">色</span>
<span class="param3">色</span></h1>
見出しのテキストを３つに分けて、それぞれ色を設定しています。
spanタグは、それ自体では何もしません。このタグは汎用的に利用するイン
ラインレベル要素で、そのほとんどでスタイルシートを設定して利用されます。
class="param1" とは、スタイルシートで設定したクラス名を指定し、その
スタイルを適応するために呼び出します。
■<p id="param5"> 〜 </p>
段落を表すブロックレベル要素で、スタイルシートの id で示されたスタイル
をこの段落に適用します。idで示されるスタイルシートは、同一文中、１回し
か使うことができません。
■<strong>RGB</strong>
<strong>で囲まれた文字を強調しています。一般的な視覚系ブラウザでは、文
字が強調され、「太字」で表現されます。
〜 以下省略 〜
色の設定を自由に変更してお使いください。特に背景色と文字色のバランスに
は十分注意し、コントラストを際出せるように設定してください。
◆色を扱う場合の注意点
色は、その色彩によって暖かくも寒くも感じます。また、ほのぼのとした雰囲
気や、何となく「とらえどころ」がなかったり、排他的にも写ります。
また、配色の加減１つで、寒々しい色が、若々しくのびのびとした印象にも変
化します。色は、本当に難しく奥が深いものです。
■ガンマ値の違いによる色
ガンマ値とは「明るさ」を表わす単位で、値が大きいと色が暗くなります。
特に OSによる違いが顕著で、Windowsは、Macintosh よりも暗く見えます。
この点を加味して、色を選ぶようにしましょう。特に背景色は難しくなります。
次回のHTML講座は、リストの作成について詳しく解説します。
（注釈用語解説）
注１：W3C（World Wide Web Consortium）
インターネットにおける様々な言語や技術的な仕様を標準化する非営利組織。
HTML、XHTML、XMLを含め、それらに関連した仕様は、すべてこの機関によって
草案が練られ、その後正式に勧告されます。
ソフトウェア、ハードウェアの各ベンダーは、ここで決められた仕様を元に
製品化されています。
注２：MIMEタイプ
MIMEとは、Multipurpose Internet Mail Extensions の略で、インターネット
の電子メールのプロトコル（通信手順）を表します。
もともとインターネットの電子メールでは半角の英数字しか送ることができ
ませんでしたが、MIMEに対応している電子メールソフトを使うと、漢字などの
２バイト文字が扱え、画像や音声などのバイナリデータをやりとりできます。
HTMLでは、その拡張子を示すことで、安全に表現することができます。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆Tips 色とアクセシビリティ
アクセシビリティとは、広範なユーザが差別なく情報にアクセスできることを
意味しています。W3Cでは、WAI（Web Accessibility Initiative）という指針の
中で、色を扱うことの最低限のマナーについて書かれています。
色弱障害者でも理解できる色を用いること、色に頼ったページにしないことな
ど、制作者は色の扱いには、十分考慮したうえで採用するようにしましょう。
特に、赤と緑の扱いは、色弱障害者は区別することができません。また、明る
過ぎるコントラストは、白内障を含め高齢者には目が痛く感じます。色の扱いに
は、配色を十分練り上げて使うようにしましょう。
HTMLでは、プレゼンテーション（視覚的効果）のための記述は、文書構造から
分離し、色の指定はスタイルシートで指定することが求められています。
fontタグや、bgcolor属性を使わない設計を考えて、ユーザ環境に依存しない
正統派を目指してください。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆XML初級入門講座（第５回） DTD（Document Type Definition）その２
前回は XML文書中に直接 DTDを記述する「検証済み XML文書」について解説し
ました。外部ファイルとして DTDを作成する方法もありますが、それについては
いずれ講座の中で解説します。
今回は DTDにおける「記述順序の構成」や「記述回数の構成」などのパターン
について詳しく解説します。非常に重要な、避けて通れない項目です。
■記述順序の基本パターン
実は DTDで示される「要素型宣言」では、子要素の記述順が決められています。
前回お伝えした DTDをもう一度おさらいしてみましょう。
<!DOCTYPE magazineinfo [
<!ELEMENT magazineinfo (magazine)>
<!ELEMENT magazine (book,author,content)>
<!ELEMENT book (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT content (#PCDATA)>
]>
この DTDの中で記述される magazineinfo、magazine要素では、それぞれに
「子要素」が設定されています。
ちなみに、子要素とは、親要素の中で配置される要素という意味を持っており
( ) を使って宣言されます。それぞれの子要素は以下のとおりです。
magazineinfo の子要素 magazine要素
magazine の子要素 book、author、content要素の３つ
要素型宣言で設定した子要素は、必ず１回、使わなければなりません。省略
することが許されないのです。
また、宣言された子要素の記述の順番も宣言どおりに配置することが決めら
れています。
<!ELEMENT magazine (book,author,content)> の宣言では、３つの子要素の
配置順は、必ず、book、author、content の順番でなければならないのです。
つまり、book要素のあとに、author要素が現れ、次に content要素を配置す
るという順番が決められています。
しかも、必ず、これら３つの要素を記述しなければなりません。
（間違った記述順）
<author>ばんばん</author>
<book>初心者のためのホームページ作り</book>
<content>XML初級講座</content>
しかし、データの要素内容に変更が生じた場合、このような規則を変更する
可能性が出てきます。そこで予め、記述順や、回数の指示、あるいは省略でき
るような DTDにするための構成パターンを利用することになります。
■記述回数を変更する構成パターン
子要素を０回、あるいは１回記述するパターンは、子要素を宣言するときに、
クエスチョンマーク（？）を添えます。０回とは省略を意味します。
<!ELEMENT magazine (book?,author?,content?)>
こうすることで、magazineinfo要素内で、子要素を配置しない場合、あるい
は１回だけ使うことが可能になります。
この DTDを使うと XMLインスタンスは、以下のように変更、あるいは追加す
ることができます。
<magazineinfo>
<magazine>
<book>初心者のためのホームページ作り</book>
<magazine>
<magazine>
<author>ばんばん</author>
<content>XML初級講座</content>
</magazine>
</magazineinfo>
※ここで記述した magazine要素は、magazineinfo要素内で以下の構成パター
ンを利用しています。
<!ELEMENT magazineinfo(magazine*)> 詳しい説明は以下の通りです。
■記述回数を変更する構成パターン その２
１つの親要素に子要素を数回利用する場合には、アスタリスク（*）を添えて
子要素を宣言します。
<!ELEMENT magazine (book,author*,content)>
￣￣￣
この宣言では、author要素を０回以上配置することが可能です。以下の XML
インスタンスはその例です。
<magazineinfo>
<magazine>
<book>初心者のためのホームページ作り</book>
<author>ばんばん</author>
<author>臨時制作委員会</author>
<content>XML初級講座</content>
</magazine>
</magazineinfo>
ここで示す０回以上とは、一度も使用しないを含め、何度でも使用すること
を意味し、柔軟な記述が可能になります。
■記述回数を変更する構成パターン その３
宣言された子要素を１回以上記述するパターンは、＋記号を用いて宣言します。
<!ELEMENT magazine (book,author+,content)>
￣￣￣￣
この宣言では、author要素のみ１回以上記述しなければなりません。１回以
上とは、１回を含め複数記述することができるという意味です。
具体的な例は、以下のとおりです。
<magazineinfo>
<magazine>
<book>初心者のためのホームページ作り</book>
<author>ばんばん</author>
<author>臨時制作委員会</author>
<content>XML初級講座</content>
</magazine>
</magazineinfo>
■記述回数を変更する構成パターンその３
定義した子要素をのいずれか１つを記述するパターンで、バーチカルバー (|)
を添えて宣言します。
<!ELEMENT magazine (book|author|content)>
この宣言は、magazine要素の３つの子要素のいずれか１つだけを必ず記述し
なければなりません。以下はその例です。
<magazineinfo>
<magazine>
<book>初心者のためのホームページ作り</book>
</magazine>
<magazine>
<content>XML初級講座</content>
</magazine>
<magazine>
<author>ばんばん</author>
</magazine>
</magazineinfo>
◆まとめ
記述回数と順序を決める DTDの宣言は、大きく分けて以下のとおりです。
記号 詳細
--------------------------------------------------------------------
, １つの親要素内に、定義した順序で子要素を１回記述する
? １つの親要素内に、０回または、１回子要素を記述できる
* １つの親要素内に、０回以上子要素を記述できる
+ １つの親要素内に、１回以上の子要素を記述できる
| 定義した子要素のいずれかを１回記述しなければならない
指定なし 定義した子要素を必ず１回記述しなければならない
DTDでは、要素型宣言内で、子要素を宣言する場合に、必ずこれらの記号を記
述して、その順序、回数を指定しなければなりません。
また、複数の記号を同時に用いることによって回数、順位を指定することも
可能です。
ここが DTDの難しさでもあり、また面白いところでもあります。実は DTDに
は、まだまだ多くの約束事がありますが、講座を進めながら、その都度解説し
ます。
次回は、XMLデータを Webブラウザに表現するためのスタイルシートである
XSL（XML Stylesheet Language）について、詳しく解説します。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆HTML、XHTML タグの解説 --- link要素
現在の文書と、他の文書との関連を示す要素で、ヘッダ部でのみ配置されます。
主に、その文書の前後関係とか、目次やインデックスのある場所などを示し、特
に、非視覚系ブラウザでは、この記述が冒頭にリンクとして表示されます。
また、外部スタイルシートの読み込みや、作者の情報、アイコンなどを指定し
たりします。
要素タイプ ：─（インライン、ブロックレベルに属さない要素）
仕様 ： HTML4.01Strict、XHTML1.1
終了タグ ： なし（エンプティ要素）
属性 ： rel、rev、href、hreflang、charset、type、madia など
属性値 ： rel="リンクタイプ" リンク先の文書と関係を定義する
rev="リンクタイプ" リンク先から見た関係を定義する
href="URI" 関連する文書の位置を定義する
hreflang="言語コード" リンク先の言語を定義する
charset="文字符号" リンク先の文字符号コードを定義する
type="MIMEタイプ" リンク先文書のMIMEタイプを定義する
media="メディアタイプ" リンク先のメディアタイプを定義する
視覚系ブラウザでは、一部の機能しかサポートしておりません。
■ link要素とその属性の機能詳細
rel="リンクタイプ"
この文書から見た、href属性で指定される別の文書との関係を示します。空白
で区切って複数設定できます。
なおリンクタイプについては、下記 URLを参照してください。
http://www.scollabo.com/banban/ref/base.html#subcont8
rev="リンクタイプ"
href属性で指定された文書から見た、この文書との関係を示します。空白で区
切って複数設定できます。
href="URL"
関連する別の文書のURLを指定します。
hreflang="文字コード"
リンク先として指定した場合の関連する別の文書の文字コードを指定します。
charset="文字コード"
文書を読み込む場合の関連する別の文書の文字コードを指定します。
type="MIMEタイプ"
関連する別の文書のMIMEタイプを指定します。ブラウザが対応していない形式
のデータを無駄にロードしてしまうことを避けるためなどの目的があります。
■ 応用
<link rel="stylesheet" href="samplesheet.css" type="text/css">
外部にあるスタイルシート文書を読み込みます。
MIMEタイプはテキストで書かれたCSS（Cascading Style Sheet）であることを
示します。視覚系ブラウザではほとんどがこの機能に対応しています。
<link rel="index" href="sitemap.html" type="text/html">
索引をあらわすページのリンク先を指定します。
<link rel="start" title="HomePage" type="text/html" href="index.html">
一番最初のページを指定します。title属性でページの名前を記述することに
よって、検索エンジンにサーチしてもらうことを期待します。
<link rel="shortcut icon" href="favicon.ico">
ショートカット・アイコンを指定します。MSIEで「お気に入り」に登録したと
きには、このアイコンがブラウザのブックマークに登録されます。
<link rel="contents" href="sitemap.html" type="text/html">
目次のページを指定します。一般的にはサイト全体のリンク先が明確に記述し
てあるページを指定します。
<link rel="alternate" media="print" title="The manual in postscript"
type="application/postscript" href="manual/postscript.ps">
別バージョンの文書をあらわし、プリンターへの出力媒体を指定します。
ここではポストスクリプトによってプリンターへの出力が可能なページである
ページを指定しています。
<link rev="made" title="ばんばん" href="mailto:banban@scollabo.com">
この文書の作成者を示します。一般的にはメールアドレスが値として記述され
ます。
<link rel="prev" title="前のページ" href="back.html" type="text/html">
この文書から見た前のページを指定します。テキストブラウザなどの非視覚系
ブラウザでは title属性で示されたテキストがリンク先として表示します。
<link rel="next" title="次のページ" href="next.html" type="text/html">
この文書から見た次のページを指定します。テキストブラウザなどの非視覚系
ブラウザでは title属性で示されたテキストがリンク先として表示します。
※ 当メールマガジン「第21号」より再掲しました。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/review_066.html
次回予定しているコンテンツ（変更する場合があります）
■ Webデザイン 第14回 --- スプラッシュページ
■ HTML講座 第14回 --- リストの作成
■ XML初級講座 第６回 --- XSL
■ タグの解説
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
質問・ご意見ははこちらまで→ wfb-org@jcom.home.ne.jp
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなると
思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答えて
くれると思います。
発行者 ばんばん、初心者のためのホームページ作り臨時制作委員会
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
当方は著述業やテクニカルライターではないため、誤字・脱字・変換ミス・表
現欠乏などには、平にご容赦願います。
なお、記事に重大な誤りがある場合、叱咤と罵声と共に委員会まで突きつけて
いただくと幸いに思います。
バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
アーカイブ http://www.scollabo.com/banban/daf/archive.html
講座教材 http://www.scollabo.com/banban/daf/material.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196
配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
＜編集後記＞
今週末の３連休を利用して、委員会の親睦会を兼ねた小旅行に行ってきます。
親睦会とは名目で単なる「飲み会」になりそうですが、目的はばんばん氏を見舞
うことです。
ばんばん氏は遠方にある専門のリハビリ施設に移ったので、なかなかその後の
情報が入ってきません。それでも、今週初めに、彼から入院後初めてメールをも
らいました。短い文面でしたが、順調にリハビリが続けられているのだなと感じ
取れます。
お見舞いかたがた、その後の回復具合の様子を見ようと思いつつ「親睦会」を
企画した次第で、委員会12名全員で行ってきます。
次週には、その詳細をお伝えできると思います。
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002-2003 www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
最新更新日 2003/9/17
Copyright(C) 2002-3003 banban@scollabo.com