- 締切済み
XMLをXSLTやCSSに変換してHTMLで出力
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_712ffd338b.jpg"width="171" 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はこういう風に記述するんだよ、と簡単に教えて頂ける優しい方もいたら回答お願いします。サイトだけでは悪戦苦闘しそうなもので…。物凄い不安です。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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 ) ここにとても良いマニュアルがあります。 構造化とは何かからはじめるべし!!
- abacabu
- ベストアンサー率37% (250/663)
趣味で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と一緒位に考えて頂くとわかりやすいかと （かなり偏った考えですがおおむね見た目の印象）
まず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 変換を先に完成させた方が良いですね。
