XMLによるWebページの構成

2001年4月15日(日)更新


たけち: このコーナーでは、XML(特にXHTML)を使ったWebページの基本的な構成についてお話するね。

さらら: うん。具体的な書き方も教えてくれるんでしょ。 (*^ ^*)

たけち: じゃぁ、さっそくね。下の図を見て。(図-1)HTMLの場合は、CSS(Cascading Style Sheet)でフォントの種類とか文字の大きさや色を指定しているよね。
でも、(図-2)XHTMLの場合には、XSL(eXtensible Stylesheet Language)とCSSを使って、XHTMLで書かれているものをどのように表示するかを決めるんだ。

さらら: えっ〜!! CSSの便利さは分かっているけど、それでも面倒くさいなぁ、って思ってたのに・・・その上、XSLだなんて。。

たけち: う〜ん。じゃあねぇ〜。CSSではできなくてXSLでできることを説明したほうがよさそうだね。

さらら: そっ、そうね・・・

たけち: HTMLとCSSとの関係について確認しておくね。CSSでは、XMLやHTMLに現れるそれぞれの要素について、どのように表示するのかだけを指定できるんだよね。これは知っているよね。

さらら: あっ、そうそう。(本当はあんまり意識したこと無かったけど・・・・ (^ ^; )

HTML, XMLとCSSの対応について

たけち: 図のように、CSSはXMLテキストでもHTMLテキストでも、それぞれの要素をどのように表示するかを指定するんだね。

さらら: CSSで指定しない要素はどうなるの?

たけち: IE(Internet Explorer)などの表示ソフトウェアによって決まっちゃうんだ。

さらら: HTMLテキストのほうの"class"ってどう使うの?

たけち: うん、見てわかるように、XMLだと、「歌の原文(万葉仮名)」を"mkana(manyo-kanaを略しました)"にして「読み」を"yomi"って区別できるけどね。HTMLだと"p"タグくらいしかないから、"CLASS"属性をつけて区別しているんだ。CSSの場合、"p.mkana"のように指定するんだよ。

さらら: そうなんだぁ。。。

たけち: じゃぁ、ここで、図のソースとサンプルを載せておくね。

manyo1.html

<html>
<head>
<title>たのしいXML: CSS</title>
<link rel="stylesheet" type="text/css" href="manyo1.css">
</head>
<body>
<p class="mkana">熟田津尓 船乗世武登 月待者 潮毛可奈比沼 今者許藝乞菜</p>
<p class="yomi">熟田津(にきたつ)に船(ふな)乗りせむと月待てば潮もかなひぬ今は漕(こ)ぎ出(い)でな</p>
</body>
</html>

manyo1.css

p.mkana { font-weight:bold }
p.yomi { color:green; font-style:italic }

manyo1.htmlの表示結果
manyo2.xmlの表示結果

manyo2.xml

<?xml version="1.0" encoding="Shift_JIS"?>
<?xml-stylesheet type="text/css" href="manyo2.css"?>
<poem>
<mkana>熟田津尓 船乗世武登 月待者 潮毛可奈比沼 今者許藝乞菜</mkana>
<yomi>熟田津(にきたつ)に船(ふな)乗りせむと月待てば潮もかなひぬ今は漕(こ)ぎ出(い)でな
</yomi>
</poem>

manyo2.css

mkana { display:block; font-weight:bold }
yomi { display:block; color:green; font-style:italic }

manyo2.xmlの表示結果
manyo2.xmlの表示結果

さらら: そっかぁ。。。で、最初にたけちが描いてくれた図には、XML→XSL→CSSって書いてあったけど、今のサンプルでは、XML→CSSってなってるけど、これはどういうことなの?

たけち: うん。いまの例で見たように、見かけだけについていえばXSLを使わなくってもいい場合もあるんだ。でも、XMLのいい点を生かそうとすると、XSLは必要になってくるんだよ。

さらら: そっかぁ。。。あっ、じゃぁ、さっきたけちが言っていた、XSLがCSSより優れていることってどんなことなの?

たけち: あっ、そうそう。次のようなことが違うんだ。

XSLがCSSより優れていること

  • もとのXMLテキストの構造・内容・属性を変更できる
  • XMLテキストの属性による表示方法の指定ができる

たけち

さらら: へぇ・・でも、まだXSLの使い方も分かっていないからピンとこないわね。もっと分かりやすい言い方は無いの〜

たけち: う〜ん。そういわれるとちょっと困るけど・・・でも、ね。それについては、これからXMLやXSLの書き方や使い方を、少しずつだけど具体的な例を見ながらやっていこうと思うから・・・・分かってもらえると思うよ。

さらら: むふふ、ごめんなさいね。ちょっと、たけちを困らせてみたかったの・・・(*^ ^*)

たけち: そっ、そう。 (^ ^; じゃあ、XMLの書き方の概要を説明するね。。。。それから、XSLとCSSの使い方をもう一度確認しようね。

さらら: は〜い。

→ 次に進む (^ ^)v