• ベストアンサー

XML画像データををHTMLで簡単に表示する方法

下記の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>

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.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;}

murakami5656
質問者

お礼

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

すると、全ての回答が全文表示されます。

関連するQ&A