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.3
- 回答日時:
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 )
ここにとても良いマニュアルがあります。
構造化とは何かからはじめるべし!!
No.2
- 回答日時:
趣味でWEBページを作成している30代男です。
私もXMLの勉強をしたいのですが田舎なもんで
参考書が売ってません…はおいておいて。
XMLからXSLTを使ってHTMLへ変換
これに関してはフリーソフトもあるので手に入れて下さい。
その上でXMLとXLSを用意してその2個をソフトに掛けて
HTMLへ変換させます…知ってますよね?
で、ここで言うXSLというソフトはスタイルシートという役割
なんですが、作業としてはHTML記述その物です。
HTMLの記述知識が無いと掛けないと思います。
(恐らくXML参考書で説明されているとは思いますが)
HTMLで記述しながらそれに与える値をXMLから読み込むという
流れです。
あと、そのHTMLのレイアウトをするCSSについては
原理自体はXSLと同様にレイアウトをする物なんですが、
書き方が全く違います。どちらかというと
プログラム寄り(知識不足で誤った認識の可能性あり)な書き方な
気がします。
CSSに関しては初歩的な解説のあるサイトのURLを参考URLとして
貼っておきました。
簡単に説明すると
適用先{何を,どうする}
という事を書くだけです。
HTML記述のレイアウトしたいタグの所に"style="として直接記入するものと
htmlの<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 …
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>たんぽぽのコメント1</comment>
<comment2>たんぽぽのコメント2</comment2>
</flower>
<flower>
<name>チューリップ</name>
<img>/images/01.jpg</img>
<comment>チューリップのコメント1</comment>
<comment2>チューリップのコメント2</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 変換を先に完成させた方が良いですね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
XSLで、XMLの空タグを制御したい。
-
ノードの並び替え
-
タグの有無の判定
-
xslでの最小値、最大値の取得
-
xmlのテキストにリンクを張りた...
-
XMLのHTMLへの変換 (初心者)
-
CPUの考え方を教えてください ...
-
XMLで要素が記述された順番に意...
-
バッチファイルでテキストファ...
-
昔Winnyってありましたけど、あ...
-
あせんうぶり言語
-
VB6でXMLを作成しているのです...
-
SNMP リンクダウンとノードダ...
-
あるノードリストに、特定の名...
-
HTTPステータス 404 - There is...
-
コンテキストメニュークリック...
-
Listからのnull要素を削除方法は?
-
ルート要素ノードが2個ある場合?
-
ノードとは
-
このエラー、何とかなりません...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
XSLで、XMLの空タグを制御したい。
-
タグの有無の判定
-
XSLでXMLデータをタブ区切りデ...
-
XSLTで固定長データファイルを...
-
XSL中の改行、タブを無効にした...
-
xmlのテキストにリンクを張りた...
-
重複するものを消したい
-
XSLTがブラウザで表示されません。
-
うまく表示されない
-
文字列の取得
-
xsl:param要素をxsl:templateの...
-
value-ofの値を属性値とするには
-
XMLをXSLを使いHTMLに変換した...
-
XMLから指定テキストのみを抜き...
-
ある文字列を含むノードが存在...
-
VBAからxml・スタイルシートを...
-
xsl、xpath式の書き方について
-
XSLで特定のタグだけを出力する...
-
XSL内でJavaScriptを記述し、Ja...
-
XSLTで直下のテキストのみ取得...
おすすめ情報