
下記の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>
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;}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
フォームのボタンをsubmitから...
-
zoomについて質問です。
-
【HTML/CSS】ボタンの枠が伸び...
-
XML画像データををHTMLで簡単に...
-
html の divとtable の役割
-
含む含まないという概念自体の...
-
html/cssの、navを2段にする...
-
htmlの文字が縦書きになる
-
CSSで改行後の行間調整
-
疑似クラス :activeが効きません
-
画像イメージの上下左右、欲し...
-
訪問済のリンク色を変えない方法
-
CSS(0の単位)について
-
<h1>、<h2>と<p><div>の行間を...
-
smartyテンプレートの<style></...
-
外部スタイルシートで定義した...
-
htmlのolやulなどlistにtitleや...
-
検索結果がツリー状に表示され...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
FC2カートのテンプレートでの商...
-
htmlで画像を2個ずつ並べていき...
-
並べた画像ファイルに不要なス...
-
フレームを使わずに右側だけを...
-
table で画像をピッタリとくっ...
-
XML画像データををHTMLで簡単に...
-
画像の横にテキスト
-
ポップアップウィンドウのサイ...
-
HTMLのIMAGEに。。
-
画像を固定したい
-
【HTML・CSSについて】Web初心...
-
CSS実装されない
-
htmlについて
-
flex の各子要素を横幅 100% に...
-
UDP通信を使うチャットプログラ...
-
img_cmnフォルダって何ですか?
-
FC2ショッピングカートのカスタ...
-
画像をクリックして元に戻すには
おすすめ情報