AIと戦って、あなたの人生のリスク診断 >>

下記のXML画像データををHTMLで簡単に表示する方法をご教授下さい。

<?xml version="1.0"?>
<photos>
<photo url="http://www.kahokanko.com/demo/10.jpg"/>
<photo url="http://www.kahokanko.com/demo/19.jpg"/>
<photo url="http://www.kahokanko.com/demo/31.jpg"/>
</photos>

このQ&Aに関連する最新のQ&A

A 回答 (1件)

HTMLと同様にスタイルシートで指定します。

XMLですから、XSLTスタイルシートでHTMLに変換して、デザインはCSSに分担させても良いでしょう。

★タブは全角スペースに置換してあるので、タブに戻すこと。

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="style.xsl"?>
<photos>
 <photo url="http://www.kahokanko.com/demo/10.jpg"/>
 <photo url="http://www.kahokanko.com/demo/19.jpg"/>
 <photo url="http://www.kahokanko.com/demo/31.jpg"/>
</photos>

とします。
[style.xsl]
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:template match="/">
 <html>
  <head>
   <title>サンプル</title>
   <link rel="styleSheet" type="text/css" href="./xx.css" />
  </head>
  <body>
   <h1>画像を表示してみよう</h1>
   <div>
    <xsl:apply-templates />
   </div>
  </body>
  </html>
 </xsl:template>
 <xsl:template match="photo">
  <p class="album">
   <img>
    <xsl:attribute name="src">
     <xsl:value-of select="@url" />
    </xsl:attribute>
   </img>
  </p>
 </xsl:template>
</xsl:stylesheet>

[xx.css]
@charset "UTF-8";
html,body{margin:0;padding:0;}
p.album img{display:block;float:left;width:360px;height:auto;margin:10px;}
    • good
    • 0
この回答へのお礼

解りやすい回答ありがとうございました。

お礼日時:2012/11/04 08:26

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QHTMLとXMLの違いがよくわからないのですが

HTMLとXMLの違いがよくわからないのですが、
HPを作る分にはHTMLの知識があれば十分ですか?
XMLも必要なのでしょうか?

Aベストアンサー

さかのぼると、SGMLという軍事目的で定められた規格があります。たとえば、ある軍艦のWordで作成されたマニュアルを数十年経って読もうとしたら、すでにこの世に、当時の古いWordを扱えるコンピューターが無かったら・・。そのために純粋なテキストだけで作成されたデータに、段落や題字を示すタグと、それぞれのタグがどういう意味であるかなどをも規定--「インスタンス・DTD・SGML宣言」--しておけば、何年後でも使えます。
 ただ、SGMLは膨大で複雑なため、簡略化されたXMLが考案され広く使われています。

 一方HTMLは、このSGMLを参考に---ときもりではない---作られたもので、後になってSGMLらしくはなりましたが---、DTDという文書規定とタグ付けされたテキストのセットで利用されるものです。
 一時期、HTMLはHTML4.01を最後にXMLに合わせて書き直された、XHTMLに完全移行する予定でしたが、やはり複雑で受け入れられにくく、結局HTML5として再び歩み始めることになりました。
 XHTML(XMLの文法で書かれたHTML)とHTMLには、いくつか違いがあります。
・XHTMLは、要素名、属性名は小文字で書くこと
・XHTMLは、属性値は""で囲むこと
・XHTMLは空要素は/>で閉じること
  空要素とは、タグに括られた内容を持つ得ない要素--IMG,BR,HRなど
 が大きな違いです。この違いはXMLとの比較にもあてはまりますが、XMLはタグを自在に設定できるのが異なります。
<document>
 <midashi>なんたらについて</midashi>
 <p>なんたらかんたら・・・・</p>
 <photo>
  <path>/images/photo/abc.jpg</path>
  <data k="date">2112.12.01</data>
・・・とか。
 ブラウザで表示するためには、別途スタイルシート(XSLT)が必要ですが・・

 ⇒XML画像データををHTMLで簡単に表示する方法 - HTML - 教えて!goo( http://oshiete.goo.ne.jp/qa/7779854.html )
 ⇒XSL変換したが画像が表示できません - HTML - 教えて!goo( http://oshiete.goo.ne.jp/qa/7782480.html )
 XMLとHTMLの関係は、上記を見れば分かるでしょう。

 なお、次期バージョンのHTML5には、XML(XHTML)として記述する方法もあります。
 ⇒Polyglot マークアップ: HTML 互換の XHTML 文書( http://standards.mitsue.co.jp/resources/w3c/TR/html-polyglot/ )

[HTML4あたり]
・HTMLとXHTMLは異なる。一方に従えば一方ではエラー
・XHTMLはHTMLをXML文法であらわしたもの
・XMLはHTMLのみならず、様々なものに使われる。最新のwordやexcelのファイルはXMLです。
[HTML5]
・HTMLであってもXML的な書き方が出来る。エラーにならない
・mathMLやSVGのようなXML要素をそのまま埋め込むことができる。

さかのぼると、SGMLという軍事目的で定められた規格があります。たとえば、ある軍艦のWordで作成されたマニュアルを数十年経って読もうとしたら、すでにこの世に、当時の古いWordを扱えるコンピューターが無かったら・・。そのために純粋なテキストだけで作成されたデータに、段落や題字を示すタグと、それぞれのタグがどういう意味であるかなどをも規定--「インスタンス・DTD・SGML宣言」--しておけば、何年後でも使えます。
 ただ、SGMLは膨大で複雑なため、簡略化されたXMLが考案され広く使われています。

 ...続きを読む

QXMLのHTMLへの変換 (初心者)

例えば、以下のようなsample.xmlをWebブラウザで表示する為には
どのようにするればよろしいのでしょうか。どなたか教えてください。


 <?xml version="1.0" encoding="Shift_JIS" ?>
- <cars>
- <car>
<name>乗用車</name>
<price>150</price>
 </car>
</cars>

Aベストアンサー

こんにちわ。
もう1ヶ月以上たっているから、遅いかもしれませんが
現在私も同じような勉強をしていて、難しいことはわからないけど
質問内容を見て「私もこのレベル!!」と思ったので参加してみます。

まず、XMLってそのままではブラウザーに表示できないようです。
HTMLと違って表示機能はもっていなくて、質問に書かれていたものは
単なるデータのみのようですね。
 他に方法はたくさんあるのかもしれませんが、私の勉強したところによると
XMLをブラウザーに表示する為には、他にXSLと言われるスタイルシートを
用意して、XML(データ)+XSL(スタイルシート)の2ファイル(この場合は)
を元に、XSLT(extensible Stylesheet Language Transformation)と呼ばれる
変換ツールを使って、HTMLや他の形式に変換して初めて表示できる
(スタイルシートによっては、音声として聞ける)状態のファイルに
なるようです。
 このXSLTというツールは、無料でダウンロードできるものが多数あるようです。
ちなみに私はApache(アパッチ)のサイトからダウンロードしました。


質問のXMLには、以下の2行と、下の1行をかぶせて、

<?xml version="1.0" encoding="Shift_JIS" ?>
<PAGE>
・・・・・・・・・・・・・・・・・・・・・・
</PAGE>


別に用意するスタイルシートは以下のような感じに作るのかなぁ。。。。

<?xml version="1.0" encoding="Shift_JIS"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/
1999/XSL/Transform" version="1.0">
<xsl:output method="html" encoding="Shift_JIS"/>

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

<xsl:template match="PAGE">
<HTML>
<BODY>
<xsl:apply-templates/>
</BODY>
</HTML>
</xsl:template>

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

<xsl:template match="car">
<xsl:value-of select="name"/><BR/>
<xsl:value-of select="price"/><BR/>
</xsl:template>

</xsl:stylesheet>

そして、XSLTツールで変換するとHTMLができると思いますよ。

http://www.atmarkit.co.jp/fxml/tanpatsu/xslt/xslt00.html
には、XMLをHTMLに変換する方法について、サンプルをもとにやり方とか
書かれています。結構参考になるので覗いてみてはいかがですか?

参考URL:http://www.atmarkit.co.jp/fxml/tanpatsu/xslt/xslt00.html

こんにちわ。
もう1ヶ月以上たっているから、遅いかもしれませんが
現在私も同じような勉強をしていて、難しいことはわからないけど
質問内容を見て「私もこのレベル!!」と思ったので参加してみます。

まず、XMLってそのままではブラウザーに表示できないようです。
HTMLと違って表示機能はもっていなくて、質問に書かれていたものは
単なるデータのみのようですね。
 他に方法はたくさんあるのかもしれませんが、私の勉強したところによると
XMLをブラウザーに表示する為には、他にXSLと言われるス...続きを読む

QXMLデータってなんですか?

XMLデータとは、なんでしょうか?初歩的な質問かもしれませんが、教えてください。あまりわからないので、専門用語をできるだけ使わずに、教えて欲しいです。宜しくお願いします。

Aベストアンサー

何をごらんになっていたときに見つけられたのか分かりませんが、
テキストで羅列されたデータのことです。
この場合のテキストというのは、notepadでも読める、という意味だと思ってください。

たとえば、このページを右クリックして「ソースの表示」(Macの場合は分からないので、HTMLのソースをみてください)をしてみると、
このページをつくっているテキストのデータが表示されます。

<html>とか<head>とか。
XMLは、この<と>で囲まれた「タグ」というものを使って必要な情報を蓄えたものです。
このタグは、<html></html>とか、<head></head>のようにワンペアがあって、これで囲むことによって1区切りをあらわすんですね。
今見ているデータはHTMLファイルというので出来ているんですが、これもXMLデータの1種なんです。

世の中にはいろんなデータを扱うデータ形式(ファイル)があって
たとえばEXCELとかACCESSとかですが
これを見るのに専用のソフトが必要なんですよね。
だから、誰かとやり取りをするときにテキスト形式(CSVとかXMLとか)はとっても便利なのです。

・・・なんかややこしい言葉を使いましたでしょうか。

「誰かとデータをやり取り」するだけじゃなく、
ほかにも有利な点はあるんですが、とりあえず分かりやすいところで。

何をごらんになっていたときに見つけられたのか分かりませんが、
テキストで羅列されたデータのことです。
この場合のテキストというのは、notepadでも読める、という意味だと思ってください。

たとえば、このページを右クリックして「ソースの表示」(Macの場合は分からないので、HTMLのソースをみてください)をしてみると、
このページをつくっているテキストのデータが表示されます。

<html>とか<head>とか。
XMLは、この<と>で囲まれた「タグ」というものを使って必要な情報を蓄えたものです。
こ...続きを読む

Qxhtmlで画像が表示されない

microsoftFrontPageにてフォルダに新しく入れた画像が表示されないので質問します。
オープンデザインの雛形を使い、日本語にしたところまではうまくいきました。ですがダウンロードした最初から入っている画像は表示されても新しくフォルダに入れた自分の画像が表示されません。記述は「img/aaa.jpg」のようにして、スペルミスは無いと思うのですが・・・。

僕は自分の店・会社が持ちたく活動しています。コスト面を考え独学でhtmlを勉強し公開していまして今回xhtmlでの記述に挑戦していたところこの問題にぶつかってしまいました。xhtmlの挑戦は初めてです。

pcはDELLのvostro。ソフトはoffice2000。

どなたか、詳しい方、教えてください。

Aベストアンサー

画像に欠陥がある場合もたまにありますね。
画像がたくさんある場合はdownsizeallなどのフリーソフトを使用して
一括保存で短時間で処理できるかもしれません。

ともあれ、
前進できてよかったです★


人気Q&Aランキング