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

                  毎週金曜日配信 What's New 2003/10/10
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  ┏┏┏┏   初心者のためのホームページ作り/Web for beginner
  ┏┏┏         http://www.scollabo.com/banban/
  ┏┏
  ┏              <第69号>

                banban@scollabo.com

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

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

  今週のコンテンツ
      ■ Webデザイン 第15回 --- Webの理念
   ■ HTML講座  第15回 --- 定義リストの作成
   ■ XML初級講座 第7回 --- XSLの作成
    ■ HTML属性の解説(第1回) --- href属性

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

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

  今週のコンテンツ
      ■ JavaScript講座 第13回 --- 時間の計算
   ■ インターネット用語解説  第2回 ---  Java仮想マシン
      ■ お知らせ

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆Webデザイン(第16回) Webの理念

 インターネットの発展は私たちの生活を便利にする手段になっています。1998
年を境に、日本でも爆発的に普及し、一生かかっても閲覧できないほどの Webサ
イトが立ち上がっています。

 こうした Webの目的は、ネット上の情報を簡単に利用できるようにすることで
もともと Webは、

 ・誰もが利用できるシステムであること
 ・どのような受信環境でも情報を得ることができること
 ・誰もが簡単に情報を発信できること
 ・ハイパーリンクによって相互に参照可能であること

 といった理念を持って作られました。逆な見方をすれば、誰もが利用できなけ
ればなりません。どんな受信環境でも情報を得られなければなりません。

 インターネットの爆発的な普及は、ややもすると、こうした理念を忘れてしま
っているのではないかという危惧を感じざるを得ません。

 ■ユニバーサルデザインとページ作り
 このコラムで、誰もが容易にアクセスすることができるユニバーサルデザイン
 について何度か述べました。
  ユニバーサルデザインとは、身体に何かしらの不自由がある人でも、不便を
 感じることなく社会参加できるようにするための考え方として、広く社会に浸
 透しつつあります。

  例えば駅などの交通機関で、目の不自由な人でも容易に切符を購入でき、改
 札や階段にも不自由しない、安全に電車に乗れるなど誰もが快適に利用するこ
 とができるユニバーサルデザインの思想は、多くの施設や建物、社会インフラ
 の中で取り入られつつあります。

  特に高齢化を迎えた今の時代には、そうした考え方に沿った設計は、あらゆ
 る分野で普及することが強く望まれています。
  それを達成するためには、莫大な経済的負担と時間が必要で、実に困難なこ
 とです。

  しかし、私たちがホームページ作りを行う上で、ユニバーサルデザインの考
 え方を取り入れたページを作ることは、それほど大変なことではありません。
  ほんの少しタイプする手間さえ惜しまなければ、誰でもアクセシブルな優し
 いページに作り変えることができます。

  1つの例として、標準的な視覚系ブラウザでは、リンクを示すテキストに、
 未訪問と訪問済みの色を変えています。また、リンクのテキストに下線を表示
 します。訪問者は、直感的にその意味を知ることができるでしょう。
  これもユニバーサルデザインの一環です。リンクに用いる色は、作者が自由
 に変更することができます。その場合、未訪問と訪問済み、リンクであること
 などが閲覧者に理解できる工夫を考えることが大切です。

 ■ハードウェアとソフトウェア
 技術革新は日進月歩の目覚しい躍進を遂げています。そうした技術は身体障害
 者でも情報を操作したり、自動車を運転したり、広く社会参加できるようにな
 りました。
  もはや障害を持つことは、生きていく上でハンデにならないくらい、革新技
 術がサポートしています。

  しかし、ハードウェアの進歩と共に、それを運用するソフトの部分では、ま
 だまだ足りないことが多いようです。
  ソフトの部分とは、それを運用する人間の振る舞いです。せっかくの便利な
 技術であっても、使い方を誤ると大変なことになります。

  インターネットはもはや一部の「オタク」の世界だけではなくなりました。
 欲しい情報が誰でも自由に取り寄せ、自由に発信することができるようになり
 ました。ブロードバンド化に伴い Webは急速に生活の中に溶け込んでいます。
  そうしたインフラとハードウェアの進歩は、本当に目覚しいものです。

  本来の Webが持つ理念は、そうした便利さの中でより一層重要になってきま
 す。環境が整備されつつある今こそ、もう一度原点に戻って、誰もが、どんな
 環境でも、どこでも、いつでも、情報に触れるようにしなければなりません。

  インターネットは、私たちが世界に情報発信できる唯一のメディアであるか
 らこそ、その振る舞いに細心の注意を払わなければなりません。

  ・万人が情報を得られるようにすること
  ・受信環境に依存しない設計を心がけること
  ・互いを尊重し、有益な情報にハイパーリンクできること
  ・新技術は常に仕様書を尊重し、環境による違いを克服すること

  難しい問題ではありますが、思いやりをもって接することで、解決できる手
 段はたくさんあります。もう一度真摯に、Webの理念を思い起こしてください。
  Webデザインの根幹は、すべてそこに答えがあります。

                    (第17回 検索エンジンにつづく)

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆HTML講座(第16回) 定義リストの作成

 リストを構成する要素は、前回まで述べたとおり、ol、ul要素がありますが、
もう1つ、少し変わったリストがあります。それが「定義リスト」です。

 定義リストという言葉が適当かどうかわかりませんが、仕様書によれば、この
リストを、Definition List と記述しています。(定義リストの意)

 平たく言えば、あるタームとその定義した内容、あるいは説明が交互に出現す
るブロックレベル要素として分類されたリストです。
 もっと噛み砕いて言えば、「見出し」とその「段落」がリストで構成されてい
ると言っても過言ではないでしょう。非常に応用範囲の広い使い方が可能な要素
です。ちなみに、当サイト内の最新ページは、すべてこのリストによって記述し
ています。(今週のおさらいなど)

 定義リストを構成する要素は以下の3つです。

  dl要素 定義リストを定義する (Definition List)
  dt要素 定義する用語     (Definition Term)
  dd要素 定義した用語の内容  (Definition Description)

 これを、ばんばん風に解釈すると

  dl要素 リストであることを示す要素
  dt要素 見出しとなる部分のテキストを書く
  dd要素 見出しの内容をより詳細に示す段落

 つまり、

  <dl>
     <dt>見出し</dt>
      <dd>見出しの内容を説明する段落</dd>
    </dl>

  というような解釈が成り立ちます。(あくまで独自の解釈です、念のため)
 なおリストであっても、ol、ul要素のように、行頭にマーカーは表示しません。
  一般的な視覚系ブラウザでは、dd要素にインデントを設けて表示します。
 また、dt、dd要素は終了タグを省略することが可能です。(ただし XHTMLでは
 省略することができません、念のため。)

  dd要素内には、他のブロックレベル要素を配置することが可能で、自由度の
 高い使い方ができます。この要素内に入れ子で、dl要素も配置できます。

  dl要素には直接テキストなどを配置することができません。この要素内には
 最低1個以上の、dt、dd要素を配置しなければなりません。

  配置できる子要素とコンテンツ
   dl要素 1個以上の dt要素、及びdd要素のみ
   dt要素 インラインレベル要素のみ、テキスト、オブジェクトなど
   dd要素 ほとんどの要素、テキスト、オブジェクトなど

◆dl要素を使ったHTML文書の作成

 上記の説明を踏まえて、実際に定義リストを作成します。
なお、画像は「第65号」で利用したものを使います。画像は「教材」にて提供し
ていますので、ご利用ください。

  教材の提供  http://www.scollabo.com/banban/daf/material.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   { margin: 1em 8%; 
         padding: 0 }

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

dt {     margin: 1em 0; 
         padding: 3px; 
         letter-spacing: 1px; 
         background: #06c; 
         color: #fff; 
         font-weight: bold; 
         text-indent: 1em; }

dd {     margin-bottom: 1ex; 
         padding: 0; 
         text-indent: 0; 
         ine-height: 130%; 
         letter-spacing: 0 }

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

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

.clear { clear: both }
-->
</style>
</head>

<body>
<h1>銀閣寺</h1>
<dl>
<dt>国宝銀閣寺</dt>
<dd>
<img src="ginkaku_01.jpg" width="250" height="180" class="left" 
alt="銀閣寺俯瞰の写真"><!-- 改行せずに1行で記述 -->
銀閣寺は、文明14年(1482)足利八代将軍義政公によって造営された
山荘東山殿であり、義政公の没後、臨済宗の寺院となったものす。
</dd>

<dd>
義政公の法号慈照院殿にちなんで「慈照寺」と名付けられ、三代将軍義満公の
造営による山荘北山殿の金閣寺(鹿苑寺)に対し、銀閣寺と称せられました。
</dd>

<dd>
銀閣寺の俗称の通り、慈照寺の象徴というべきものが観音殿(銀閣・国宝)です。
「銀閣寺」と言われていますが、銀箔で装飾されているわけではありません。
</dd>

<dt class="clear">東求堂</dt>
<dd>
<img src="ginkaku_02.jpg" width="250" height="180" class="right" 
alt="銀閣寺と錦鏡池の写真"><!-- 改行せずに1行で記述 -->
現存する室町期楼閣庭園建築の代表的建造物として名高く、
また、観音殿とともに造営当時の遺構として現存するのが東求堂(国宝)です。
</dd>

<dd>
この堂は持仏堂、すなわち阿弥陀如来を祀る阿弥陀堂でした。
堂内の四畳半書院「同仁斎」は、草庵茶室の源流、また四畳半の間取りの
始まりと言われています。なお、銀閣寺は「世界遺産」にも登録されています。
</dd>

<dd class="right">2001年3月、撮影ばんばん</dd>
</dl>

</body>
</html>

 dl要素サンプル実行結果
 http://www.scollabo.com/banban/magazine/mmsample/sample_69-1.html

 <注意>
 HTML構文は読みやすくするために、全角・半角のスペースを多用しています。
 そのままコピーして用いた場合、表示に難があります。また、メールマガジン
 の1行の文字数に制限があるため、各コンテンツを改行して表示しています。


◆解説

■<!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 の違いについては、本誌「第65号」にて
 詳しく解説していますので、バックナンバーをお読みください。

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

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

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

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

■dt { margin: 1em 0; padding: 3px; letter-spacing: 1px; background: #06c; 
       color: #fff; font-weight: bold; text-indent: 1em; }

 定義用語を設定するための dt要素を設定しています。
  上下に1文字分の余白を設定し、コンテンツの内側に3ピクセル分の余白を
 設定しました。この要素に囲まれるテキストの文字と文字の間に1ピクセル分
 の間隔を持たせています。
  背景色は、やや濃い目の青色、文字色を白色としました。文字を強調して1
 文字分インデント(字下げ)しています。

■dd { margin-bottom: 1ex; padding: 0; text-indent: 0; ine-height: 130%; 
       letter-spacing: 0 }

 定義用語を説明する dd要素を設定しています。
 この要素に囲まれるテキストの下側に、小文字 x の高さの幅で 余白を設定し
 ました。また、標準でインデントされるために、コンテンツの内側の余白を無
 くしてインデントを回避しています。
  この要素に囲まれるテキストの文字間隔を1ピクセル、行間を文字の高さの
 30%に設定して、読みやすくさせています。

■.left  { float: left; margin-right: 1em }
 この設定は、タグの名前ではなく、「クラス名」のみの記述になっています。
 クラス名のみの設定は、固定したタグだけではなく、多くのタグに適用するこ
 とができます。
  クラス設定の長所は、1つのページに何度でも使うことができます。

  このクラス設定では、この要素内容(コンテンツ)の右側に、別の要素内容
 を回り込ませる設定にしています。(フローティング:浮遊)
  そして、回り込んだ右側のコンテンツの間に、1文字分の余白を設定してい
 ます。これによって、コンテンツ同士がくっつき過ぎないようにしました。

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

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

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

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

■.clear { clear: both }
 回りこみを解除するためのクラス設定です。回りこみを設定した場合、いつま
 でも回りこもうとします。それを防止するための設定です。

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

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

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

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

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

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


◆まとめ

 「定義リスト」という言葉が難しくさせているのだと思います。しかし、今回
 学んだように、非常に利用範囲が広い特徴をもっており、多くのシーンで利用
 できる便利なリストです。
  スタイルシートを駆使することで、その応用に自由度が広がります。是非、
 あなたのページにもご利用ください。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆Tips

 dl要素は、定義した用語とその概要で成り立っていますが、必ずしも定義用語
 を利用したリストでなければならない、というわけではありません。
  dl要素は応用範囲が広く、他の要素を利用できない場合など、用語の定義に
 限定せず使用することができます。

  また、dt要素と、dd要素が必ず対にならなければならないという原則もあり
 ません。どちらかの要素を連続して記述する場合も許されています。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

 ■XML講座について

  私が病気療養中に始まった XML講座について、私なりの所感と方針について
 触れておきます。
  この XML講座は、「初心者向けのホームページ作り」という当初の目的から
 は、かなり逸脱している感があります。おそらく読者の皆様の中には、その難
 解さに戸惑っていることでしょう。

  確かにネットは XMLを主体とした新たな時代の幕開けを告げ、今までにない
 斬新なサービスを提供できるようになりました。各ベンダーが提供する各種の
 アプリケーションさえも XML対応という文字が目立つようになりました。

  私は自分の仕事で XMLに関わっています。少なくともそれなりの知識を持っ
 ており、メールマガジンでそれを紹介することは難しいことではありません。
  しかし XMLは奥が余りに深く、ある程度のスキルを必要としています。場合
 によっては、データベースや他の開発言語にも精通している必要があります。

  また、XMLを学習するための、ある程度の環境も必要です。XMLはメモリを食
 います。アプリケーションも XMLに対応していないと動いてくれません。

  そのような理由により決して初心者向きではない XML講座は、適当な時期に
 打ち切る予定です。

  XMLについては、それ専用にターゲットを絞ってメールマガジンを発行する必
 要があります。しかし、現状の私の環境を考えると、新たなメールマガジンの
 発行は無理があります。いずれ遠い将来には考えられるかもしれませんが、今
 は、初心者向けのホームページ作りに集中したいと思っております。
 (実際に、2つ発行しようと原稿を書いたこともありましたが、いかんせん時
  間が足りませんでした。)

  決して読者の皆様方のスキルが足りないというのではありません。決して皆
 様方が XMLを理解できないというのではありません。
  当メールマガジンの主旨を考えると XMLは初心者向けではないということを
 ご理解してください。ただし、HTMLの正しいマークアップ(意味付け)が可能
 になれば XMLに挑戦することは、やぶさかではありません。

  なお、近日中に Webサイト上にて XMLに関する詳細なページを予定しており
 ますが、そのターゲットは中級者以上を想定した内容となります。
  今後 XML講座は、属性リスト、エンティティ宣言、外部ファイルの扱いなど
 について解説し、年内には終了する予定です。

  当面は、HTML4.01、XMHTML1.1、CSS、JavaScriptなどに重点を置いて発行し
 ていく方針です。ご理解の上、ご了承ください。

   ※ XML講座についての、皆様のご意見をお寄せください。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆XML初級入門講座(第7回) XSLの作成

 今回は「第64号」で作成した XMLインスタンスを Webブラウザで表示させるた
めの簡単な XSLスタイルシート作成とその機能について解説します。

 今回利用する XLS要素は大きく分けて4つです。それらの要素型は以下の通り
です。少し難しいと思いますが、基本ですので、しっかり覚えてください。

 ■ xsl:stylesheet要素
 この要素型は、スタイルシートのルート要素を定義し、必要とする名前空間を
 定義します。
   XSLも XMLと同様に、1つの文書として作成する必要があるため、ルート要
 素(文書の最上位要素)が必要ですが XSLの場合は、要素名が固定となってい
 ます。つまり、この要素型が XSL文書におけるルート要素として定義します。

  名前空間とは、文書中で利用するボキャブラリ(注1)について、その規格
 (仕様)を示す URIを参照します。

  例えば、JavaScriptでは、関数を設定することにより、HTML文書から自由に
 その関数を呼び出して何度も利用することができます。
  同じように、名前空間で示された仕様書を参照することで、予め定義してい
 ないボキャブラリを利用することが可能です。

  XSLの名前空間は、W3Cが勧告した XSL仕様を利用する関係で、その名前空間
 を示さなければなりません。また、XSL文書中で利用する HTMLのボキャブラリ
 も必要になりますので、あわせて設定します。

  xsl:stylesheet要素の記述
  <xsl:stylesheet xmlns:xsl="http;://www.w3.org/TR/WD-xsl" 
         xmlns="http://www.w3.org/TR/REC-html40"> (改行せずに記述)

  この名前空間の指定は、W3Cの規格である XSLと、HTML4.0を参照し、その仕
 様を使うために設定します。

  xmlns属性は、名前空間の指定に用います。
 基本的に名前空間を示す URIとは、必ずユニーク(絶対唯一)でなければなり
 ません。名前空間の仕様とは、その仕様に則した記述(スキーマ)であると考
 えてください。

 XSL文書は XML文書と結合して利用することになる関係で、文書の冒頭で、XML
 宣言を行わなければなりません。基本的には XSLが XMLのサブセットとして定
 義されています。

 ●名前空間と接頭辞
 構文の通り、名前空間は2つ利用しています。2つの名前空間を利用する場合
 どの要素型がどの名前空間に一致するのかを明示的に区別しなければなりませ
 ん。Webブラウザが正しくレンダリングするためにも必要な処置です。

  XSLを指定する名前空間に「xsl:」という接頭辞を設けて、HTMLの名前空間と
 区別しています。
  つまり、XSLの名前空間で定義されている ボキャブラリを利用するときに、
 その要素型の前に接頭辞を付けて、HTMLの名前空間と区別しています。

  下記 XSL構文を見ていただければお分かりになると思いますが、HTMLの、要
 素型と XSLの要素型が接頭辞の有無によって区別されているの理解できること
 でしょう。

 ■ xsl:template
 この要素型は、スタイルシートで扱う要素に対して、テンプレートの定義を行
 います。テンプレートとは書式(フォーマット)とお考えください。

  この要素型は XSL文書が対象とする XML文書内の要素を特定するために必ず
 記述する必要があります。

  xsl:template要素の記述
  <xsl:template match="/">

  属性値で示されるスラッシュ「/」は、基本的にルート要素を意味しており、
 これによって XML文書全体がテンプレートの対象となります。
  macth属性のデフォルト値は「*」です。また、この要素に適応するノードの
 デフォルト値は「node()」です。
  (ここで言うノードとは、子要素を含めた1つの要素内容すべて)

 ■ xsl:templates
 XML文書中の特定の要素を選択し、適切なテンプレートの定義を行います。
  この要素型は XSL文書の一部で対象とする XML文書内の要素を特定します。

  xsl:templates要素の記述
    <xsl:templates select="XML文書中の要素名">

 このように「select」属性で示す XML文書の要素名を指定してテンプレートの
 対象とします。select属性のデフォルト値は「node()」です。

 ■xsl:value-of要素
 対象となる要素の値を、テキストデータで返す際に利用済ます。
  この要素型を使うことにより、要素の内容を取り出すことができます。

  xsl:value-of要素の記述
  <xs:value-of select="要素名">

 このように「select」属性で示す XML文書の要素名を指定して、その内容を取
 り出し、テキストとして返されます。デフォルト値は "." です。

 ■xsl:apply-templates要素型
 XML文書の特定の要素を選択し、適切なテンプレートを定義します。

  xsl:apply-templates要素の記述
  <xsl:apply-templates select="要素名">


◆XSL文書の作成
 上記4つの要素型を使って、XSL文書を作成します。
  以下のようにタイプしてください。また外部 CSSスタイルシートを利用しま
 すので、これも後ほど作成します。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" 
  xmlns="http://www.w3.org/TR/REC-html40">  (改行せずに)

	<xsl:template match="*">
		<xsl:apply-templates/>
	</xsl:template>
	<xsl:template match="text()">
		<xsl:value-of select="."/>
	</xsl:template>

<xsl:template match="/">
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css"/>
<title>XMLデータをWebブラウザで出力する</title>
</head>

<body>
<h1>sample_xml</h1>
<dl>
  <dt>誌名</dt>
    <dd>
    <xsl:apply-templates select="/magazineinfo/magazine/book"/>
    </dd>

  <dt>作者</dt>
    <dd>
    <xsl:apply-templates select="/magazineinfo/magazine/author"/>
    </dd>

  <dt>内容</dt>
    <dd>
    <xsl:apply-templates select="/magazineinfo/magazine/content"/>
    </dd>
</dl>
</body>
</html>

</xsl:template>
</xsl:stylesheet>


 入力が終わりましたら保存します。保存の際の拡張子は「.xsl」です。
  ここでは「sample.xsl」と名付けて保存してください。保存場所は XML文書
 と同じディレクトリ(フォルダ)にします。

 外部に置く CSSスタイルシートを作成します。以下のようにタイプしてくださ
 い。コロン「:」、セミコロン「;」を間違えないように注意してください。

@charset "Shift_Jis";

body { 
  margin: 0;
  background: #fff; 
  color: #000 }

h1 { 
  margin-left: 8%;
  color: #069 }

dl { 
  padding: 1em 8% }

dt { 
  margin-top: 1em; 
  font-weight: bold }

dd { 
  margin: 0;
  text-indent: 1em }

p { 
  margin-top: 4em;
  font-weight: bold;
  text-align: center }


 入力が終わりましたら保存します。拡張子は「.css」です。
  ここでは「sample.css」と名付けて XML文書と同じディレクトリに保存して
 ください。

 最後に、XML文書中に、XSL文書を読み込む構文を挿入します。

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="sample.xsl"?>

<!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>


 DTDと、XMLデータの間の1行に注意してください。入力が終わりましたら、そ
 のまま「上書き保存」します。
  XML文書を MSIE5.0以降の Webブラウザで開いてください。

  XSLを利用した XML文書のサンプル(MSIE5.0以降のみ有効)
  http://www.scollabo.com/banban/magazine/mmsample/sample_69-2.xml

 ■何故 MSIEなのか?
 Webブラウザの中で XSLをサポートしているのは、残念ながら今のところ MSIE
 だけです。(Macintosh版 Safari については未確認)ご了承ください。

 ■XMLにおける ? と !
 XML文書中で記述されるクエスチョンマーク ? は、処理命令を意味しています。
 また、エクスラメーション ! は、宣言を意味しています。
  これらの記述は、時折 HTML、あるいは XHTMLでも利用されます。

◆XSL文書解説

<?xml version="1.0" encoding="UTF-8"?>
 XML宣言を行っています。この宣言は必須です。
  文字符号コードは Unicode のサブセットである UTF-8 を使用しています。

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" 
  xmlns="http://www.w3.org/TR/REC-html40">
 先ほども説明したとおり、XSL文書のルート要素として xsl:stylesheet要素を
 定義し、必要な名前空間を用いています。

<xsl:template match="*"><xsl:apply-templates/></xsl:template>
<xsl:template match="text()"><xsl:value-of select="."/></xsl:template>
 これは、スタイルシートのテンプレートの書式を定義しています。この順序と
内容で、XML文書を Webブラウザに出力します。この書式を省略すると、XMLデー
タが正しく表示できません。書式はすべてデフォルト値で定義します。
 終了タグを記述しない場合には、その要素の行末でスラッシュを記述します。

<xsl:apply-templates select="/magazineinfo/magazine/book"/>
 magazineinfo要素内の各子要素を示し、最終的に book要素のデータをHTMLの書
 式である、dl要素内のdt要素に適合させています。


 ■XSLの意義
 たったこれだけの内容を Webブラウザに表示するまでの労苦を考えれば、最初
 から HTML で記述すればいいのではないか、という声が聞こえそうです。

  確かに「たったこれだけ」のことであれば、その通りだと思います。しかし
 元のデータとなる XMLデータを多くのアプリケーションで利用することができ
 るなら、XMLや XSLは非常に有効な手段となります。

  また、XMLデータの内容が変わった場合や、他のXML文書をこの XSLに当ては
 めたりすることも容易です。基本的に XSLの内容が変わることはありません。
  データベースから抽出したデータを1つの XSL文書を適用することで、文書
 作成の作業効率を高め、そのコストを大幅に削減することができます。

  あるいは、XMLデータを変更せず、別の XSL文書や XSLT文書などにも適応す
 ることが考えられます。つまり XMLデータの出力先に応じて柔軟な対応が可能
 になる利便性も併せ持っています。

  XSLは他の言語、とりわけ Java言語との親和性が高く、様々なシーンでの利
 用が期待されています。データの印刷フォーマットさえも可能です。
  XSLは、今後のWebサービスや、Webページの制作環境でも1つの革命を起こ
 すことが考えられています。

 次回は、XMLデータの要素に付加情報を加える「属性」について解説します。


(注釈用語解説)

 注1:ボキャブラリ(語彙:ごいと読む)
  XML文書を記述するためには、要素や属性を使用します。要素や属性は、利用
 目的に応じて、意味のあるまとまりとして規定されます。この意味のあるまと
 まりを、ボキャブラリと呼び、ある種のスキーマを指します。
  異なる規定や仕様に属する要素や属性を一つの XML文書内で使用できる XML
 という技術の出現によって、ボキャブラリという用語は頻繁に利用されるよう
 にりました。
  通常、ボキャブラリを明確に規定するためには、スキーマを記述します。
 XMLで利用されるボキャブラリには、SVG、MathMLなどがあります。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆HTML XHTML 属性の解説 --- href属性

 今回より、HTMLタグで利用される属性について解説します。属性とは、要素の
補足的な機能を補完するために利用され、ある意味では、属性が記述されないと
機能しないタグさえあります。
 タグの意味だけでなく、その属性の機能を理解することも、ホームページ作り
のポイントといえるでしょう。

 ■ href属性
 属性値:  URI
 記述法:  href="URI"
 関連要素: a、area、base、link

 関連する文書、あるいは場所のリンク先リソース、つまり URIを示します。
  この属性を指定することで、要素自体をリンク元、属性の値をリンク先と
 してのリンクが定義されます。 
  なお、base要素では必須の属性です。属性が示されないと、構文エラーとな
 ります。

  URIは URL、URN を含みます。(URLは URIのサブセット)
 基本的に URIは、大文字と小文字を厳格に区別します。なお URIは、日本語で
 指定することが困難です。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

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

 次回は、10月17日に配信を予定しています。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

質問・ご意見ははこちらまで→ banban@scollabo.com

 なお、ご質問の際には、あなたがお使いのOSや Webブラウザ、テキストエデ
ィタなど、なるべく分かりやすく制作環境を明記していただけると回答しやすく
なると思います。
 ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答えて
くれると思います。

発行者 ばんばん
協 力 スズキ・コラボレーション 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://backno.mag2.com/reader/Back?id=0000090196

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

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

 久しぶりに(約4ヶ月ぶり)メールマガジンの原稿を書きました。私なりに、
とても新鮮な気持ちで執筆しました。入院中は、あれはこう書けばよかったとか
反省することがたくさんあり、いずれにしても新たな企画を立て、もう一度やり
直す意気込みで準備しています。

 このところの涼しさに、不覚にも風邪を引き熱を出してしまいましたが、あの
大きな病気の後では、「風邪くらい、いくらでも罹ってやるわい」という気持ち
になっています。
 多分、脳障害という重い「厄」を払ったので、開き直っているのかもしれませ
ん。大きな勘違いでなければいいのだが・・・

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

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



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