アプリ版：「スタンプのみでお礼する」機能のリリースについて

XMLをXSLTやCSSに変換してHTMLで出力

締切済

  • 質問者：ellarker
  • 質問日時：
  • 回答数：3件

XMLデータ
<?xml version="1.0" encoding="Shift-JIS"?>
<flower>
<naiyou>
本文
</naiyou>
<name>花言葉</name>
<flow><name>あきらめ　</name></flow>
<flow><list>悲しい思い出　</list></flow>
<flow><name>情熱　</name></flow>
<flow><list>独立　</list></flow>
<flow><name>再会　</name></flow>
<flow><list>想うはあなた一人 </list></flow>
<flow><name>また会う日を楽しみに </name>
</flow>
</flower>
を変換したいのです。

XSLTデータ
<?xml version="1.0" encoding="Shift-JIS"?>
<xsl:stylesheet version="1.0" xmlns:xsl="F:\i08i008\I08I008.html">
<xsl:output method="html"/>

<xsl:template match="/">
<html><xsl:apply-templates/></html>
</xsl:template>

<xsl:template match="flower">
<h1>彼岸花</h1>
　<xsl:apply-templates/>
　</xsl:template>

<xsl:template match="naiyou">
<p><xsl:value-of select="."/></p>
</xsl:template>

<xsl:template match="flow">
<xsl:value-of select="name"/>
<table flame="border" width="50%">
<tr><th>彼岸花</th><th>花言葉</th></tr>
<xsl:for-each select="flow">
<tr>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="list"/></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
ここまで作ったのですが、うまくHTMLに出力できません。原因がわかる方、教えてください。

イメージ図
<html>
<head>
<title>彼岸花</title>
</head>
<body>
<div style="font-weight:bold">
彼岸花
</div>
ヒガンバナ科ヒガンバナ属の多年草。別名「曼珠沙華」という別名があるのは有名だが、他にも呼び名があるのは知られていない。<br>
ただ、その名前が「地獄花」、「捨子花」などと縁起でもない名前ばかりである。<br>
その中でも何故「はっかけばばあ」という呼び名があるのかは疑問である。<br>
<img src="http://farm1.static.flickr.com/120/252830085_712 … height="171"><br>
<br>

<table border="1"bgcolor="#b22222">
<tr>
<th colspan="2">彼岸花</th>
</tr>
<tr>
<th colspan="2">花言葉</th>
</tr>
<tr>
<th>悲しい思い出</th>
<th>独立</th>
</tr>
<tr>
<td>独立</td>
<td>諦め</td>
</tr>
<tr>
<td>再開</td>
<td>情熱</td>
</tr>
</table>
</body>
</html>

XSLTについては（CSSもそうですが）、イメージ図の通り、写真を掲載したりや表に配色をしたいとも考えております。そのあたりのアドバイスも頂けると嬉しいです。

あとCSSについてもサイトで色々見たのですが、どれもさっぱり解かりませんでした。初心者な私にでも解かりやすいサイト教えてください。一から勉強しているところです。
CSSはこういう風に記述するんだよ、と簡単に教えて頂ける優しい方もいたら回答お願いします。サイトだけでは悪戦苦闘しそうなもので…。物凄い不安です。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1

まずXML とXSLT を完成させましょうか。

記載の例のXML はイマイチ構造がわからなかったのでサンプル作ってみました。
XML の構造についてもっとシンプルにパターン化できればXSLT もシンプルになりますよ。

#test99.xml

<?xml version="1.0" encoding="Shift-JIS"?>
<?xml-stylesheet type="text/xsl" href="test99.xsl"?>
<flower>
<name>花言葉</name>
<naiyou>本文</naiyou>
<flower>
<name>たんぽぽ</name>
<img>/images/00.jpg</img>
<comment>たんぽぽのコメント１</comment>
<comment2>たんぽぽのコメント２</comment2>
</flower>
<flower>
<name>チューリップ</name>
<img>/images/01.jpg</img>
<comment>チューリップのコメント１</comment>
<comment2>チューリップのコメント２</comment2>
</flower>
</flower>


# test99.xsl
<?xml version="1.0" encoding="Shift-JIS"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="dummy">
<xsl:output method="html"/>
<xsl:template match="/">
<html>
<head>
<title><xsl:value-of select="/flower/name"/></title>
</head>
<body>
<div><xsl:value-of select="/flower/name"/></div>
<div><xsl:value-of select="/flower/naiyou"/></div>

<xsl:for-each select="/flower/flower">
<table border="1">
<tr>
<td rowspan="2">
<img>
<xsl:attribute name="src">
<xsl:value-of select="img"/>
</xsl:attribute>
</img>
</td>
<th colspan="2"><xsl:value-of select="name"/></th>
</tr>
<tr>
<td><xsl:value-of select="comment"/></td>
<td><xsl:value-of select="comment2"/></td>
</tr>
</table>
</xsl:for-each>
</body>
</html>
</xsl:template>

<xsl:template match="text()">
<xsl:copy/>
</xsl:template>

</xsl:stylesheet>

img タグのsrc 属性を動的に生成できている辺り(xsl:attribute)が応用できればイロイロやりたい事が出来るようになるかと。

お役に立てれば幸いです。まずはCSS にまで手を出さずXML→HTML 変換を先に完成させた方が良いですね。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： abacabu
  • 回答日時：

趣味でWEBページを作成している30代男です。


私もXMLの勉強をしたいのですが田舎なもんで
参考書が売ってません…はおいておいて。
XMLからXSLTを使ってHTMLへ変換
これに関してはフリーソフトもあるので手に入れて下さい。
その上でXMLとXLSを用意してその2個をソフトに掛けて
HTMLへ変換させます…知ってますよね?
で、ここで言うXSLというソフトはスタイルシートという役割
なんですが、作業としてはHTML記述その物です。
HTMLの記述知識が無いと掛けないと思います。
（恐らくXML参考書で説明されているとは思いますが）
HTMLで記述しながらそれに与える値をXMLから読み込むという
流れです。
あと、そのHTMLのレイアウトをするCSSについては
原理自体はXSLと同様にレイアウトをする物なんですが、
書き方が全く違います。どちらかというと
プログラム寄り（知識不足で誤った認識の可能性あり）な書き方な
気がします。
CSSに関しては初歩的な解説のあるサイトのURLを参考URLとして
貼っておきました。

簡単に説明すると
適用先｛何を,どうする｝
という事を書くだけです。
HTML記述のレイアウトしたいタグの所に"style="として直接記入するものと
ｈｔｍｌの<head></head>内に記述してそれを適用先（基本的に任意の名前）に
<body class="任意のなまえ">
としてCSSを実行する位置を指定します。
従って最悪、作成したCSSの羅列の上から順々に適応していかなければならない訳でなく
そのclass指定してその位置にいれていくのでCSSの書き方というのは、
適用先｛何を,どうする｝　　　←これだけです。
bodyに指定したい場合はそういう指定もできますが、
ある程度全てのレイアウトが固まっていないと、後々修正する事にもなります。
適用したくない部分が出て来た時等ありますので。
簡単に言うとXSLとCSSの記述の仕方は全く違います。
XSLはHTMLと一緒、CSSはJavaScriptと一緒位に考えて頂くとわかりやすいかと
（かなり偏った考えですがおおむね見た目の印象）

参考URL：http://kumacrow.blog111.fc2.com/blog-entry-260.h …
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

HTMLもXMLも根っこは同じSGMLで構造化言語です。


XMLもきちんと構造化されていないと、ちゃんとしたHTMLが出力できません。
書かれているHTMLも酷いです。
たくさんの花を並べて比較するのでない限り、TABLEでマークアップすべきではないでしょう。
また<br>は強制改行で、この様な文が変わるとき(段落)のマークアップに使うものではありません。<th>は表の見出しですし、<td>はそれに関係したコマです。
また、HTMLの文法としては誤りではありませんが、直接文を入れるのはおかしいです。
<xml>
<document>
　<title>花言葉</title>
　<subtitle>彼岸花</subtitle>
　<alias><word>曼珠沙華</word></alias>
　<caption>
　　<pargraph>
　　　ヒガンバナ科ヒガンバナ属の多年草。別名「曼珠沙華」という別名があるのは有名だが、他にも呼び名があるのは知られていない。
　　</paragraph>
　　<paragraph>
　　　ただ、その名前が「地獄花」、「捨子花」などと縁起でもない名前ばかりである。<br>
その中でも何故「はっかけばばあ」という呼び名があるのかは疑問である。
　　</paragraph>
　</caption>
　<floriography>
　<word>情熱,独立</word>再会,あきらめ,悲しい思い出,想うはあなた一人,また会う日を楽しみに</word>
　</floriography>
</document>
</xml>
とか、これをDOMで見るときちんと階層になっている
document
　|-title
　|-subtitle
　|-alias
　|-caption
　|　　|--paragraph
　|　　|--paragraph
　|-florigraphy
　　　|--word
　　　|--word

その上で、HTMLにするのですが、マークアップは
<h1>花言葉</h1>
<h2>彼岸花</h2>
<div class="article">
<p>
ヒガンバナ科ヒガンバナ属の多年草。別名「曼珠沙華」という別名があるのは有名だが、他にも呼び名があるのは知られていない。
</p>
<p>
ただ、その名前が「地獄花」、「捨子花」などと縁起でもない名前ばかりである。<br>
その中でも何故「はっかけばばあ」という呼び名があるのかは疑問である。
</p>
</div>
<p class="florigraphy">
<word>情熱,独立</word>再会,あきらめ,悲しい思い出,想うはあなた一人,また会う日を楽しみに
</p>

とか。

XMLより前に、HTMLでよいですから、きちんと文書構造に従ったマークアップ
　　<div style="font-weight:bold">
　　　彼岸花
　　</div>
は明らかに間違ったマークアップ
<h2>彼岸花</h2>
ですね。

もっとも重要な部分を抜かして、HTMLましてやXMLなんて無理です。

たのしいXML: XML/XHTML入門ページです ( http://www6.airnet.ne.jp/manyo/xml/index.html )
ここにとても良いマニュアルがあります。
構造化とは何かからはじめるべし!!
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報