XML + XSLT によるHTML変換 完全サンプル
2つのファイルを用意します：
students.xml：生徒情報を格納する元データのXML文書transform.xsl：XMLをHTMLページへ変換するXSLスタイルシート
ブラウザがstudents.xmlを読み込むと、自動的にXSLTルールを参照しWebページとして描画します。
XMLファイルの文字コードが
ISO‑8859‑1（西ヨーロッパ文字セット）に指定されている場合、英語以外の文字が正常に保存できず文字化けが発生します。コード側でUTF‑8へ統一することで文字化けを根本的に解消できます。
students.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
<class>
<student>
<name>Tom</name>
<age>12</age>
<height>145</height>
</student>
<student>
<name>Jack</name>
<age>16</age>
<height>175</height>
</student>
<student>
<name>Smiths</name>
<age>22</age>
<height>245</height>
</student>
</class>Code language: HTML, XML (xml)主なポイント：
<?xml-stylesheet ... ?>処理命令：transform.xslを使用して現在のXMLを変換するようブラウザへ指示encoding="UTF-8"：多言語の文字に対応し文字化けを防ぐ
transform.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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Student List</title>
</head>
<body>
<h3>Student Name List</h3>
<ul>
<!-- class/studentノードをすべてループで読み込む -->
<xsl:for-each select="class/student">
<li>
<xsl:value-of select="name"/>
</li>
</xsl:for-each>
</ul>
</body>
</html>
</xsl:template>
</xsl:stylesheet>Code language: HTML, XML (xml)主要構文の解説
<xsl:stylesheet>：XSLTのルートタグ、名前空間を宣言<xsl:template match="/">：XMLルートノードにマッチ、変換処理の入口<xsl:for-each select="class/student">：各studentノードを繰り返し処理<xsl:value-of select="name"/>：<name>ノードのテキスト内容を取り出す
3、実行手順
- 2つのファイルを同一フォルダに配置
- ブラウザで
students.xmlを直接開く - XSLTエンジンが自動的に変換を実行しHTMLリストページが表示される
文字化けが発生する場合
- XML先頭が
encoding="ISO‑8859‑1"になっており、英語以外の文字に対応していない； - HTMLのmetaタグの文字コードとファイル実際のコードが不一致；
- ファイル保存時のエディタ文字コードがUTF‑8ではない；
生徒情報をすべて表示する
氏名、年齢、身長をまとめて表示したい場合は、ループ部分を置き換えてください：
<xsl:for-each select="class/student">
<li>
Name: <xsl:value-of select="name"/> ,
Age: <xsl:value-of select="age"/> ,
Height: <xsl:value-of select="height"/>
</li>
</xsl:for-each>Code language: HTML, XML (xml)
XSLTサンプル