XHTMLを書いてみましょう:補足　(CSSだけでできること)

2001年1月1日(月)更新

■XHTMLを表示する(5): CSSだけでできること

たけち: 今回は、ちょっと補足としてXSLを使わないでCSSだけを使ってどのくらいのこと(XHTMLの表示)ができるかをやってみよう。

さらら: えっ、これまでの話だとXSLを使わないとXML/XHTMLの表示がうまくできないって思ってたけど?

たけち: うん。実用上はそうなんだけど、テキストだけでとりあえず簡単に見たいってときには、CSSだけでできることもあるんだ。たいしたことはできないけどね。

さらら: へぇ〜、そうなんだぁ。。。。。

たけち: じゃぁ、サンプルを作りながら考えてみようね。通常のHTMLに適用するCSSのときと違って注意点が一つだけあるんだ。

■Namespace(名前空間)に対応したCSSの指定

たけち: xml/xhmlテキストの要素にCSSを適用する場合は次のように、Namespaceとタグ名を指定するんだ。

xhtmlを表示するxslの作成

さらら: あっ、manyo\:bookみたいに書くのね。あとは、CSSの本を引きながら書けばよいのね。

たけち: そうだね。じゃぁ、実際にやってみようね。まず、xhtmlテキストのサンプルのリストを載せるね。前回のサンプルと中身は一緒なんだけど、タグ名は全部英字にしてあるんだ。

■xhtmlサンプルテキストと対応したCSSサンプルテキスト

(1) xhtmlサンプルテキスト

<?xml version="1.0" encoding="Shift_JIS"?>
<?xml-stylesheet type="text/css" href="sample.css"?>
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:manyo="http://www6.airnet.ne.jp/manyo"
        xml:lang="ja" lang="ja">
<head>
</head>

<body>

<h3>XHTMLのサンプル-2</h3>
<p>XHTMLの簡単な例です。万葉集の歌を載せますね。</p>

<manyo:book volume="1">
    <manyo:poem>
      <manyo:no>8</manyo:no>
      <manyo:original>熟田津尓 船乗世武登 月待者 潮毛可奈比沼 今者許藝乞菜
</manyo:original>
      <manyo:poet>額田王(ぬかたのおおきみ)</manyo:poet>
      <manyo:yomi>
熟田津(にきたつ)に、船(ふな)乗りせむと、月待てば、潮もかなひぬ、今は漕(こ)ぎ出(い)でな
      </manyo:yomi>
      <manyo:image>image/m0008.jpg</manyo:image>
      <manyo:mean>熟田津(にきたつ)で、船を出そうと月を待っていると、いよいよ潮の流れも良くなってきた。
さあ、いまこそ船出するのです。
      </manyo:mean>
    </manyo:poem>
*** リストが長くなるので、歌のところは省略しますね。　(^ ^;

</manyo:volume>

</body>
</html>

(2) CSSサンプルテキスト


/*	HTML部のスタイル指定です	*/
body 	{ 
	display:block;
	background-color:#CCCCCC;
	
	}
h3 { 
	display:block;
	text-align:center;
	font-size:14pt;
 }
p  { 	
	display:block;
	text-align:center;
	font-size:12pt;
	color:green;
	}
/*	namespaceがmanyoの部分に適用したいスタイルです	*/
manyo\:book { 
	display:block;
	margin-top:5mm;
	margin-left:10mm;
	font-size:11pt;
	}
manyo\:poem { 
	display:block;
	}
manyo\:no { 
	display:inline;
	font-weight:bold;
	}
/*	原文は強調しましょう	*/
manyo\:original { 
	display:block;
	font-size:12pt;
	color:navy;
	font-weight:bold;
	}
manyo\:poet { 
	display:block;
	font-size:12pt;
	font-style:italic;
	color:navy;
	}
/*      読みは一文字下げましょう	*/
manyo\:yomi { 
	display:block;
	margin-left:11pt;
	color:navy;
	}
/*      イメージのURIは表示しないようにしましょう	*/
manyo\:image { 
	display:none;
	}
/*      意味は一文字下げましょう	*/
manyo\:mean { 
	display:block;
	margin-left:11pt;
	}　　　　　　　　

さらら: 名前の指定が違っているだけで、スタイルの指定そのものは普通といっしょね。

たけち: じゃあ、このCSSテキストを"sample.css"というファイルにして、実際にどうなるか見てみようね。今回は、XHTMLテキスト("xhtml2.xml")の２行目は として、"xhtml2.xml"というファイルを作成しているからね。

万葉集第1巻抜粋のxhtmlファイル xhtml2.xml(上記説明のCSS適用)

下の図のように表示されます。

IE 5.5による表示結果です

さらら: CSSだけだと、こんな感じのことになるの?

たけち: うん。CSSだけだと、全体のレイアウトやそれぞれのタグのテキストをどのように表示するか(文字の色や大きさなど)を決められるだけなんだ。XSLだと、テーブルやリストに変換したり、リンクを作ったり、いろいろなことができるんだけどね。

さらら: じゃあ、やっぱりきちんとした表示をしたいときには、XSLとCSSの両方を使うしかないのね。

たけち: そうだね。両方をうまく使うのがいいんだね。XML, XSL, CSSのバランスの取れた使い方が大切なんだ。それぞれのだいたいのことは理解できたから、あとはもう少し詳しい本などで勉強するといいよ。

さらら: うっ、うん・・・・それはそうなんだけど・・・やっぱり私、たけちに教えて欲しいわ。

たけち: そっ、そう?

→どっ、どうしましょうか・・・・・ (^ ^;