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

                    毎週金曜日配信 What's New 2003/9/5
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
       初心者のためのホームページ作り/Web for beginner
           http://www.scollabo.com/banban/

                <第65号>

            wfb-org@jcom.home.ne.jp
        (初心者のホームページ作り臨時制作委員会)

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

 当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格的
な Webページ作成に役立つことを目的に配信されております。

 当講座ではHTML4.01及び XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めるようになり
ます。

  今週のコンテンツ
      ■ Webデザイン 第12回 --- アクセスカウンター
   ■ HTML講座  第12回 --- 余白を使いこなす(画像の利用)
   ■ XML初級講座 第4回 --- DTDの作成
    ■ タグの解説 --- tr要素

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆Webデザイン(第12回 アクセスカウンター

 個人のページでは、少なからずアクセスカウンターを利用しているサイトがあ
ります。カウンターが回るほどに一喜一憂し、ある意味では作者を励まし、制作
意欲を駆り立てるような効果があり、それはそれで大変結構なことです。

 アクセスカウンターには大きく分けて3つに分類されます。

 1.ヒット ページを含め、画像、外部ファイルなどを全部数えます。

 2.プレビュー アクセスカウンターを設置したページを数えます。再読み込
         みすると1回カウントされます。

 3.アクセス ブラウザが起動している間は1回としてカウントします。何度
        リロードしても1回しかカウントされません。ただし、ブラウ
        ザを再起動して訪問すると新たに1回カウントされます。
        訪問者のクッキー(Cookie)を利用しています。

 ヒットをカウンターにするサイトはまずありえないでしょう。ほとんどがプレ
ビュー方式を採用していると思います。厳格なのは、3番目のアクセスですが、
どちらにせよ、訪問者数を数える目安にしか過ぎません。
 より厳格な数字が欲しい場合には、アクセスログを取り寄せると、実際の訪問
者数が判ります。

 しかしながら、初心者にとってアクセスカウンターが回るほどうれしく感じる
ことには違いありません。
 ただし、アクセスカウンターが設置してあるページを訪問しないと数字は変化
しません。直接、他のページに訪問した場合は、カウントされません。

 ちなみに、当サイトでは、アクセスカウンターは(統計を取っていないので詳
しい数字は定かでありません)現在のところ週平均で、5000〜6000程度で推移し
ていますが、実際の訪問者は週平均で、3500〜4000名くらいです。

 アクセスカウンターは、そのほとんどで CGIプログラムを動かして表示してい
ます。大体のプロバイダでは、アクセスカウンターを提供しているので、利用さ
れている方も多いでしょう。

 ただし、問題なのは CGIプログラムの実行速度が遅いということです。アクセ
スが集中した場合、訪問者は待ちぼうけを食らわされます。つまり CGIの順番待
ちをしなければなりません。
 そういった弊害をなくすために、アクセスカウンターは、HTMLの最後の方で記
述するようにしましょう。ほとんどのコンテンツが表示された後で CGIを実行す
ることになりますので、イライラすることが少ないものです。

 なお、MSIE5.0(Mac版5.1)では、一度表示されたアクセスカウンターが回ら
ない(数字が増えない)バグがあります。
 また、ブラウザ側でセキュリティをガッチリ固めておくと Webページのアクセ
スカウンターが正しく表示されない場合もあります。

 ■キリ番報告

  いつのころから始まったのか分かりませんが、悪しき習慣が流行っています。
 この「キリ番」とは、ちょうどキリのいい数字、あるいは語呂のいい数字をあ
 らわし、偶然そのアクセスカウンターの数字になったら、作者に報告するとい
 うものです。
  先ほども述べたとおり、アクセスカウンターは目安にしか過ぎません。その
 気になればキリのよい数字になるまでカウンターを回すことだってできます。
 つまり、ほとんど意味のないことに気がつくでしょう。
  報告したからって、何か貰えるわけでもないので、報告の必要は一切ありま
 せん。第一、そんなのはコンテンツとはまったく関係なのです。

  キリのよい数字とか、語呂合わせ的数字などはどうも日本人が好む傾向があ
 るようです。あまり意味のないことを訪問者に押し付けるのは、決して褒めら
 れることではありません。

 ■企業サイトのアクセスカウンター

 企業のホームページでアクセスカウンターがあったとしたら、それは企業とい
 うよりも、個人ベースの制作環境であることが予想されます。
  企業の多くでは自社内に Webサーバをおいている関係で、非常に詳細なアク
 セスログを取得することができます。その意味からも、アクセスカウンターは
 不要です。
  もし、通販サイトなどでアクセスカウンターが設置してある場合、その利用
 には多少の危険が伴うことでしょう。つまり、個人ベースでは、多少なりとも
 セキュリティに信頼が持てません。

 ■CGIの実体参照
 アクセスカウンターは CGIを利用することは前項で述べたとおりです。大体が
 プロバイダ側で用意したHTML構文を利用することが多いのですが、注意しなけ
 ればならない点があります。

  CGIプログラムを呼び出す構文には、ほとんど & という実体参照符合が利用
 されています。これをこのまま使うのはちょっと問題です。

  つまり CGIを呼び出す URLでは、実体参照文字を使うことができません。こ
 れは、URLは #PCDATA と定義されているためです。この #PCDATAとは、SGML的
 に解釈される文字という意味を持っており、そのまま利用することができない
 のです。
  & は、必ず & という実体参照符号に置き換えなければなりません。
 意外と盲点になっていますので、注意しましょう。

                                       (第13回 URLは変えないにつづく)

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆HTML講座(第12回) 余白を使いこなす(画像の利用)

 今回は、コンテンツを表現する際の、視覚系ブラウザにおける「見せ方」を設
計する上で、大変重要な役割を担っている「余白」について解説し、そのHTMLを
作成します。

 ■余白とは
 コンテンツを表示する Webブラウザの中で、とりわけ視覚系ブラウザでは、特
 に、「余白」という間(ま)を上手にコントロールできれば、コンテンツの表
 現が冴えてきます。見やすい、読みやすいページを作成する上で、余白は非常
 に効果のある「武器」といえるかもしれません。

 ■画像について
 ここまでテキストを中心に解説してきましたが、今回は画像、それも静止画に
 的を当てて説明します。画像を扱うことは楽しいかもしれませんが、使い方に
 よっては厄介な存在でもあります。

  一般的に Webページで利用される静止画の形式は、JPEG、GIF、PNG の3種類
 です。ただし GIFに関しては静止画であってもアニメーションが利用できます。

  デジタルカメラで撮影した画像は、概ねその形式は JPEGです。JPEG は、人
 の目で感じ取れない色を落とし、そのファイルサイズの容量を圧縮する機能を
 持っています。しかし、表示面積が広いと容量があがってしまうことがありま
 すので扱いは慎重になります。
  同時に、思い切り減色してサイズを小さくすると、余計なゴミが出て汚い画
 質になってしまいます。この形式は非可逆圧縮で、修正の際に元の画質を維持
 することができません。

  JPRGの圧縮率は、比較的大きいので利用されている方が多いですが、ダウン
 ロードしてからブラウザ側で解凍するまでの時間が必要なので、結果的にあま
 り圧縮効果を期待できません。画像の容量に気をつけましょう。

  GIF形式は、256色までをサポートし、ベタなイラストに最適化します。これ
 も色数を落とすことによって容量を下げることができます。容量を下げてもゴ
 ミがでないのも特徴です。
  最低1色まで減色することができまが、写真画像には不向きです。写真画像
 を GIF形式にすると恐ろしく容量が上がってしまうので、利用の際には注意し
 ましょう。やはり非可逆圧縮になっています。

  PNG は比較的新しい形式で、古いブラウザではサポートしていないのが難点
 です。1色から24ビットフルカラーまで対応し、可逆圧縮のため、何度もやり
 なおして修正することができます。 GIFよりも若干容量が上がりますが問題に
 なるほどではないでしょう。
  古いブラウザでは、PNGに対応していないものもありますが、W3Cでは GIFに
 代わる形式として、このフォーマットを推奨しています。


◆余白と画像を表現するHTML

 HTMLで画像を表示するために、必ずその画像をあらかじめ用意しなければなり
ません。HTMLは、用意された画像をどのように表示するのかを記述するだけなの
で、HTMLそのものが画像を描くわけではありません。

 さっそく余白の利用と、画像を扱ったHTMLを作成しましょう。なお画像は当サ
イト内で提供している教材を利用しますが、もし、あなたが自分の画像を利用し
たければ、それを用意してください。
 圧縮されたダウンロード画像を解凍し、任意のフォルダ(この講座で練習して
いるHTMLファイルがあるフォルダ)に移動してください。

  第65号講座教材ダウンロード先
  http://www.scollabo.com/banban/daf/material.html

 テキストエディタ(メモ帳、SimpleTextなど)を起動して、以下のようにタイ
プします。スタイルシートを利用しますので、コロン「:」セミコロン「;」を
間違えないようにしてください。
 今回は、京都の「銀閣寺」をテーマにしたページの作成です。

<!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   { 
  margin: 1em 8%; 
  padding: 0 }

h1     { 
  font-size: x-large; 
  color: #009900; 
  text-align: center }

div    { 
  margin: 1em; 
  padding: 1em; 
  line-height: 130%; 
  letter-spacing: 1px; 
  background-color: #ffffcc;
  color: #000000 }

.left  { 
  float: left; 
  margin-right: 1em }

.right { 
  clear: both; 
  float: right; 
  margin-left: 1em }
-->
</style>
</head>

<body>
<h1>銀閣寺</h1>
<div id="division1">
<img src="ginkaku_01.jpg" width="250" height="180" class="left" 
alt="銀閣寺俯瞰の写真">
銀閣寺は、文明14年(1482)足利八代将軍義政公によって造営された山荘東山殿で
あり、義政公の没後、臨済宗の寺院となったものす。
<p>
義政公の法号慈照院殿にちなんで「慈照寺」と名付けられ、三代将軍義満公の
造営による山荘北山殿の金閣寺(鹿苑寺)に対し、銀閣寺と称せられました。
</p>

<p>
<img src="ginkaku_02.jpg" width="250" height="180" class="right" 
alt="銀閣寺と錦鏡池の写真">
銀閣寺の俗称の通り、慈照寺の象徴というべきものが観音殿(銀閣・国宝)です。
「銀閣寺」と言われていますが、銀箔で装飾されているわけではありません。
</p>
<p>
現存する室町期楼閣庭園建築の代表的建造物として名高く、
また、観音殿とともに造営当時の遺構として現存するのが東求堂(国宝)です。
</p>
<p>この堂は持仏堂、すなわち阿弥陀如来を祀る阿弥陀堂でした。堂内の
四畳半書院「同仁斎」は、草庵茶室の源流、また四畳半の間取りの始まりと
言われています。なお、銀閣寺は「世界遺産」にも登録されています。
</p>
</div>
<p class="right">2001年3月、撮影ばんばん</p>

</body>
</html>

 実行結果
 http://www.scollabo.com/banban/magazine/mmsample/sample_65-1.html

 (※ 注意)
 HTML文書と2つの画像は、同じディレクトリ(フォルダ)にあるものとして作
 成しています。また、メールマガジンの横幅制限のため、各コンテンツは改行
 して表現していますが、実際には改行せずにタイプしてください。


◆解説

■<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 HTMLの文書型定義を宣言しています。HTMLでは、どのタイプ(バージョン)の
 要素型を使って記述するのか、必ず文書の冒頭で宣言しなくてはなりません。
  ここでの宣言は、HTML4.01Strict(厳格仕様)を指定しています。

■<html lang="ja">
 htmlは、HTML文書で最上位に位置する要素型で、すべての記述はこの範囲で配
 置されます。
  lang属性は、言語コードを指定します。この文書では「日本語」の言語コー
 ドを指定しています。言語設定は、なるべくここで行いましょう。

■<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
 文書情報をユーザエージェント(ブラウザなど)や、HTTPサーバ(Webサーバ)
 に伝えるのが metaタグです。
  ここでは、文書がテキストベースで記述されたHTML形式であり、その文字符
 号に「シフト JIS:Shift_Jis」を採用していることを伝えています。
  必須の構文ですので、忘れないようにしましょう。なお、日本語を利用する
 場合には、日本語が出現する前で記述しなくてはなりません。特にタイトルを
 設定する titleタグでは、日本語が使われるケースが多いので、その前に記述
 しましょう。

■<meta http-equiv="Content-Style-Type" content="text/css">
 文書中にスタイルシートを使うことを、ユーザエージェントに伝えます。スタ
 イルシートを利用する場合には、必須の構文です。

■<style type="text/css">
 文書中でスタイルシートを設定する場合にのみ使われます。この場合は、必ず
 ヘッダ <head> 〜 </head>内で記述しなければなりません。
  また、スタイルシートに対応していないブラウザへの配慮として、スタイル
 シートの設定は、コメント <!-- 〜 --> の中で配置するようにしましょう。

■body {  margin: 1em 8%; padding: 0 }
 コンテンツを配置するためのタグである、body要素の余白を設定しています。
  margin は、コンテンツの外の余白、padding はコンテンツの内側の余白を設
 定します。margin と、padding の違いは、別途説明します。

■h1 { font-size: x-large; color: #009900; text-align: center }
 第1見出しの文字の大きさや色、位置などを設定しています。

  font-size: x-large  文字の大きさを指定するもので、ここでは通常よりも
   2回り大きく設定しています。

  color: #009900  文字の色を指定するもので、ここではやや濃い目の緑色に
   設定しています。

  text-align: center 文字の位置を指定するもので、ここでは中央揃えで設定
   しています。何も指定しない場合は、初期値である左揃えとなります。
   なお、位置を指定する場合は、ブロックレベルに属するタグでなければなり
   ません。インラインレベル要素では無視されます。

■div {  margin: 1em; padding: 1em; line-height: 130%; 
         letter-spacing: 1px; background-color: #ffffcc }
 汎用的に利用するブロックレベルで、余白、背景色、文字の表示法を設定して
 います。

  margin: 1em このタグの外側の余白を1文字分の広さで設定しています。
  padding: 1em このタグの内側の余白を1文字分の広さで設定しています。
   padding が margin と異なるのは、padding の余白もコンテンツの1部に
   なることで背景色を維持します。
    margin はその外側であるため、背景色は適用されません。

  ↓→ この部分が margin
   ┏━━━━━━━━━━━━━━━━━ div要素━━━━━━━━━┓
   ┃ この部分が Padding                    ┃
   ┃  ┏━━━━━━━━━━━━━━━━━━━━━━━━┓  ┃
   ┃  ┃                        ┃  ┃
   ┃  ┃        コンテンツ           ┃  ┃
   ┃  ┃                        ┃  ┃
   ┃  ┗━━━━━━━━━━━━━━━━━━━━━━━━┛  ┃ 
   ┃                              ┃
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

  line-height: 130% 行間を1文字の30%の広さで設定しています。
   文章が数行に渡って表示する場合には、行間をコントロールすると、読み
   やすくなります。

  letter-spacing: 1px 文字と文字の間を1ピクセル分に設定しています。
   文字情報は重要ですが、なかなか読んでくれないものです。少しでも文字
   を読みやすいようにするためにも、文字間のスペースは威力を発揮します。
   ここでは1ピクセルとしましたが、この設定を変えると面白くなると思い
   ます。

  background-color: #ffffcc 背景色を薄いクリーム色に設定しています。
   スタイルシートでは、ほとんどのタグに背景色を設定することが可能です。

  color: #000000 文字色を黒色に設定しています。背景色を設定した場合に
   は、文字色を設定するようにします。背景色と文字色のコントラストに気
   をつけながら、自由に変えてみてください。

   ※色についての詳しい解説は、次号で予定しています。

■.left  { float: left; margin-right: 1em }
 この設定は、今までと少し異なります。今までは、スタイルシートを設定する
 場合、「セレクタ:選択部」には、直接タグの名前を記述しましたが、ここで
 は、タグの名前ではなく、「クラス名」のみの記述になっています。

 クラスの設定
 ピリオド(.)+クラス名 クラス名は自由に設定できます。できるだけ、設定
 した内容が分かりやすいようにしましょう。

 クラスの使い方
 クラス名で設定したスタイルシートは、ほとんどのタグで利用することができ
 ます。クラスだけの設定は、タグの種類にこだわらず利用できる点にあります。

 クラスの記述法
  タグ名.クラス名 例えば、<p class="left"> という具合で記述します。

  クラス設定の長所は、1つのページに何度でも使うことができます。

  このクラス設定では、このタグのコンテンツの右側に、別のコンテンツが回
 り込む設定にしています。
  そして、回り込んだ右側のコンテンツの間に、1文字分の余白を設定してい
 ます。これによって、コンテンツ同士がくっつき過ぎないようにしました。

■.right { clear: both; float: right; margin-left: 1em }
 ここでもクラス名のみの設定にしています。

  clear: both これは、先に回り込みの設定を解除するものです。解除しない
   限り、コンテンツは回り込みます。
    属性の値は、left  右側の回りこみを解除
          right 左側の回りこみを解除
          both  両方の回り込みを解除

  float: right 先の回り込みを解除した上で、新たにこのタグのコンテンツ
   の左側に、別のコンテンツを回り込みさせています。

  margin-left: 1em この設定をしたコンテンツと、左側のコンテンツの間に
   1文字分の余白を設定しています。

■<img src="ginkaku_01.jpg" width="250" height="180" class="left" 
  alt="銀閣寺俯瞰の写真">

 静止画像を表示させています。
  img 静止画像を表示するために、このタグを使って定義します。終了タグの
  ない「空:エンプティタグ」と呼ばれるタグです。

  src この属性では、画像のパス(場所)を示す URLとファイル名、ファイル
   の拡張子を記述します。そのどれもが抜け落ちても画像を表示することが
   できないので、十分に注意してください。

  width 画像の横幅の設定。
  height 画像の高さの設定。 この2つを設定しておくと Webブラウザの表示
   領域をあらかじめ確保するので、体感的に早く表示させることができます。

  class スタイルシートのクラス名を指定しています。このクラス名のスタイ
   ルが、このタグに適用されます。

  alt 何かしらの理由で画像が表示されない場合の代替テキストを記述します。
   また、画像を表示することができない非視覚系ブラウザでは、この属性で
   記述されたテキストを表示します。
    静止画像を利用する上で、絶対にこの属性を利用して、代替テキストを
   用意しなければなりません。どのような画像なのかを説明した文章を用意
   します。

■<p> 〜 </p>
 段落を定義しています。段落とは、あるまとまった文章を示すものです。

■<p class="right">2001年3月、撮影ばんばん</p>
 段落を表すタグに、スタイルシートのクラス名を指定しています。このクラス
 名のスタイルが、この段落タグに適用されます。


◆まとめ

 画像にテキストを回り込ませるスタイルシート float は、MSIE6.0の場合、背
景色や背景画像を一緒に使っていると、回り込んだテキストが消えてしまうバグ
があります。主にブラウザの幅を広げて閲覧しているときに発生することがあり
ますので、画像にテキストを回り込みを設定する場合の背景の扱いに気をつけて
ください。
 このバグは、スタイルシートだけでなく img要素に非推奨である align属性を
利用した場合にも発生します。MSIE6.0だけの不思議な現象です。

 スタイルシートで設定した余白などを実感する場合には、スタイルシートなし
で表示し、その比較を見てみると理解できると思います。
 また、margin、padding を1つずつ削除してみると、その働きがわかると思い
ます。余白や、文字の行間などの設定が重要な役目を担っているのが、はっきり
と理解できると思います。
 スタイルシートの設定を自分なりに変更してみると面白いと思います。

 次回は「Webで扱う色」について詳しく解説します。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆Tips GIFの特許とその期限切れ

 現在、GIF画像の使用や、GIFを使用するアプリケーションの開発などには、米
国 UNISYS社とのライセンス契約が必要です。これは米国 UNISYS社が GIFで使用
されている LZW(Lempel Ziv Welch)圧縮アルゴリズムの特許を持っているため
で、ライセンス契約なしで GIFを利用した場合、特許を侵害したことになります。

 ところが、UNISYS社は今年6月、米国内における特許ライセンスが切れました。
正確には、特許期間が切れる際に、その延長申請を行わなかったのです。これに
よって、現在米国内では、自由に GIF形式の画像を扱うことができるようになり
ました。

 ただし、日本では来年6月まで制約が残っているので、扱いには気をつけてく
ださい。ある日突然、法外な請求書が届くとも限りません。

 詳しくはこちらで
 GIFの特許問題  http://www.scollabo.com/banban/term/gif.html#patent

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆XML初級入門講座(第4回) DTDの作成

 今回は、前回作成した XML文書を中心に DTDを作成します。

 ■DTD(Document Type Definition:文書型定義)とは
 DTDは、XMLのスキーマ言語(注1)の一種です。XML1.0の仕様書の中で規定さ
 れているため、XMLにおけるもっとも基本的なスキーマ言語と言えます。

  DTDは XMLの前身である SGMLより基本的な構文を受け継いでいるため、他の
 関連技術と比較して長い利用実績があり、長所も短所も明確になっています。
  一方で DTDで満たせないニーズのために、他のスキーマ言語の開発も盛んに
 なっています。しかし、実体参照などは DTDと関連するため、スキーマ言語と
 して DTD以外を使用する場合でも、DTDの知識は必要とされます。

  基本的に DTDは、要素や属性の配列、実体参照や外部ファイルの扱いなどに
 関して、正しい並び方と間違った並べ方をコンピュータ言語として明確に記述
 し定義するものです。
  平たく言えば、タグやその属性の名前、構造の規則を決めます。

 ■何故、DTDが必要なのか?
 作成した XML文書を利用するためには、XMLを扱えるプログラム(XMLパーサ)
 を介して多くのアプリケーション(応用ソフト)で運用されます。
  しかし XMLデータで記述されるタグの意味が分からなければ、まったく利用
 することができません。
  いや、DTDのない XMLデータでは、XMLパーサが受け付けてくれません。前回
 説明したとおり、XMLデータとして 検証済み XML文書になっていないのです。

  作成した XML文書を、検証済み XML文書にするためにも、DTDは必須です。

◆DTDの作成

 前回の XMLデータを再現します。

  <?xml version="1.0" encoding="UTF-8"?>
    <magazineinfo>
   <magazine>
        <book>初心者のためのホームページ作り</book>
        <author>ばんばん</author>
        <content>XML初級講座</content>
      </magazine>
    </magazineinfo>

 ここで現れる要素型は全部で5つです。
  おさらいをします。magazineinfo要素が最上位に位置し、その直接の子要素
 は、magazine要素です。
  また、magazine要素における直接の子要素は、book、author、conntent要素
 の3つになり、それぞれの要素内容にテキストが記述されています。

  これを元に DTDを作成します。大文字と小文字を区別しますので、記述には
 注意してください。

 ■文書型宣言の記述
 この文書の最上位要素(ルート要素)は magazineinfo要素です。
  そして、ルート要素は文書型宣言で定義します。言い換えれば XMLデータに
 は、ルート要素が必要です。ちなみに、HTML文書のルート要素は <html>です。
 
 この XML文書における文書型宣言は、以下のとおりです。

  <!DOCTYPE ルート要素名 [ …… 宣言 ……  ]>

  このようにルート要素を宣言し、その中で各要素タイプを宣言します。
 ちなみに、この XML文書の文書型定義は、以下のとおりです。

 <!DOCTYPE magazineinfo [
   各要素型宣言の宣言を記述
 ]>

  このように文書型宣言し、宣言部には、各要素型の定義を宣言します。

 ■要素型宣言と階層の定義
 続いて各要素型を定義する DTDを作成します。大文字と小文字を区別しますの
 で、記述には注意してください。

  XML文書の構造上を説明すると、
  magazineinfo要素における直接の子要素は、magazine要素です。
  magazine要素の子要素は、book、author、content要素になります。

 つまり、各タグが階層になっていることを理解してください。
  これを DTDで記述すると、

 <!ELEMENT 要素名(子要素名)>
   !ELEMENT 要素型宣言 要素の名前や構造を定義します。
  要素名 要素名を定義します。
  (子要素名)  この要素で配置されるべき子要素(階層順位)を定義します。
        カンマで区切って複数定義できます。

 つまり、magazineinfo要素は、
  <!ELEMENT magazineinfo (magazine)> と記述して定義します。

 この要素型宣言では、子要素として必ず、magazine要素を配置しなければなり
 ません。省略することができないのです。

 これで分かるとおり、magazine要素では、
  <!ELEMENT magazine (book,author,content)> と、記述します。

 この要素型宣言では、子要素として book、author、content要素を配置するこ
 とがお分かりになるでしょう。

 次に、コンテンツを含む最下位に位置する要素の宣言を行います。
  <!ELEMENT book (#PCDATA)>
		<!ELEMENT author (#PCDATA)>
		<!ELEMENT content (#PCDATA)>

 ここに挙げる各要素の内容が、#PCDATA(解釈されるテキスト)で記述すると
 いう意味を持った要素型に定義しています。

◆検証型 XML文書

 上記の文書型宣言、およびその定義を組み込んだ XML文書を作成すると、以下
のとおりになります。

  <?xml version="1.0" encoding="UTF-8"?>

 <!DOCTYPE magazineinfo [
  <!ELEMENT magazineinfo (magazine)>
  <!ELEMENT magazine (book,author,content)>
  <!ELEMENT book (#PCDATA)>
    <!ELEMENT author (#PCDATA)>
    <!ELEMENT content (#PCDATA)>
  ]>

    <magazineinfo>
   <magazine>
        <book>初心者のためのホームページ作り</book>
        <author>ばんばん</author>
        <content>XML初級講座</content>
      </magazine>
    </magazineinfo>

 XMLデータが、DTDで宣言されたとおりの階層・構造で記述されているのがお分
かりと思います。これによって初めて XMLパーサで検証され、データがメモリに
展開できます。
 しかし、まだこのままでは、Webブラウザでは表現することができません。

 XMLが、Webブラウザで表示できるまでには XSL、XSLTという「スタイルシート」
が必要です。それらについては、早いうちに解説する予定です。

 次回は、もう少し DTDについて解説します。

(注釈用語解説)
注1:スキーマ言語(Schema)
   簡単に言えば XMLにおけるスキーマは XML文書における要素の構造を詳細
   に記述したものです。
    要素や属性の配列に関して、正しい並び方と間違った並べ方を、コンピ
   ュータ言語として明確に定義します。
    スキーマを記述するための言語を、スキーマ言語と呼び DTDもその1種
   といえるでしょう。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆HTML、XHTML タグの解説 --- tr要素

 テーブルにおける横方向の行(Table row)を定義します。

 要素タイプ :─(インライン、ブロックレベルに属さない要素)
 仕様 :      HTML4.01Strict、XHTML1.1
 終了タグ :  HTMLでは省略可能、XHTMLでは必須

 属性 :      汎用属性(id、class、lang、titleなど)
        char、charoff、align、valign、bgcolor(非推奨)

 属性値 :    char="位置を指定する文字"
               charoff="位置を指定した文字までの距離"
               align="位置"
               valign="垂直方向の位置"
               bgcolor="背景色" (非推奨)

 子要素として持てる要素: td、th要素のみ

 この要素は、必ず table要素内で配置し、最低1つ以上設定しなければなりま
 せん。また表組(テーブル)のセルはこの中に置かれ、最低1つ以上のセルを
 設定しなければなりません。
  言い換えれば table、td要素と組になって使われる要素であると覚えてくだ
 さい。

 記述法
   <table summary="Sample">
        <tr>
           <td>セル</td><td>セル</td>
        </tr>
      </table>

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆更新情報

 メールマガジン読者の Webサイトのリンク集をアップしました。

  読者のリンク集
  http://www.scollabo.com/banban/tips/readers.html

 掲載希望の方は、簡単な紹介文と URLをメールにてご連絡ください。
なお、公序良俗に反するサイトに関しては、当方の判断により、掲載を見合わせ
る場合があります。ご了承ください。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

今回はここまで、ではでは・・
今週のおさらいは Webページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。

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

 次回予定のコンテンツ(変更する場合があります)
    ■ Webデザイン 第13回 --- URLは変えない
   ■ HTML講座  第13回 --- 色を扱う
   ■ XML初級講座 第5回 --- DTD その2
    ■ タグの解説

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

質問・ご意見ははこちらまで→ 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

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

<編集後記>

 私のメーラーは、HTMLメールを表示できない設定にしています。そのためHTML
メールが来た場合には、テキストが非常におかしな具合で表示されます。

 最近、英文のスパムメール(らしき)が大量に配信されて困っています。もし
かしたら大切な外国の顧客からのメールではないかと、辞書片手に翻訳すると、
そのほとんどが広告(DM)のメールです。
 メーラーのフィルタリングを行っていますが、敵は常にメールアドレスを変更
して送ってくるので、いたちの追いかけっこになっています。

 「2度と送るな!」と返信しても、敵はまったくかまわず大量に送ってくるの
で(1日に平均100通!)、メールボックスがパンクするのではと心配です。

 聞くところによると、アメリカあたりでは受け取るメールの8割が、こうした
スパムメールだといわれ、業務に大変な支障をきたしているそうです。

 また、HTMLメールでは、その陰で悪質なスクリプトを実行し、知らぬ間にある
種のアプリケーションがインストールされ、バックドアから個人情報を盗むもの
さえあります。アメリカではほぼ常識化しています。恐ろしい・・・

 ウィルスが世界的な問題になっている一方で、こうしたスパムメールへの対策
を怠っていると、とんでもないことになりそうです。

〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓

◆著作権について
個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
 なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。

            Copyright(C) 2002-2003  www.scollabo.com/banban/
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓



最新更新日 2003/9/9
Copyright(C) 2002-3003 banban@scollabo.com