HTML内部のXMLデータにスタイルシートを適用する方法

#前提・実現したいこと

行政が公開しているxmlデータをAPI経由で取得して、それに一定の処理を加えて表示するアプリを開発しています。

今のところ、取得してきたxmlデータが、アプリ画面（html）にそのまま羅列されるだけなので、css等のスタイルシートで見やすく加工したいと考えています。

#発生している問題・やってみたこと

html内のxmlデータに対してcssを適用する方法がわかりません。

xml部分が独立したxmlファイルであれば、xsltスタイルシートで加工できそうですが（下記url）、上記で取得したデータは独立したxmlファイルではなく、html内にxmlデータが埋め込まれているだけである（拡張子はhtml）ため、xsltスタイルシートでは加工できなさそうです。

XSLTスタイルシートプログラミング

xmlデータを取得・表示した後のhtmlは以下のようになっています。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Result</title>
8    <link rel="stylesheet" href="css/reset.css">
9    <link rel="stylesheet" href="css/style.css">
10</head>
11<body>
12    <div id="result">
13    <!-- ここから下に取得してきたxmlデータが表示されます。 -->
14        <ApplData>
15           <hoge>
16               <hogehoge>AAAA</hogehoge>
17               <hogehoge>BBBB</hogehoge>
18               <hogehoge>CCCC</hogehoge>
19           </hoge>
20           <hoge>
21               <hogehoge>DDDD</hogehoge>
22               <hogehoge>EEEE</hogehoge>
23               <hogehoge>FFFF</hogehoge>
24           </hoge>
25　　　　　　・・・
26      </ApplData>
27    </div>
28
29<script src="js/jquery-3.3.1.min.js"></script>
30<script src="js/script.js"></script>
31</body>
32</html>

html内部のxmlデータにスタイルシート（css等）を適用する方法はないでしょうか？？
アドバスいただけますと大変助かります。。

kei344

2019/01/16 15:59

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

nekonyangon

2019/01/16 16:31

アドバイスありがとうございます。コードを掲載いたしました。

行動規範の内容に同意します

回答2件

ベストアンサー

肝心のjs/script.jsが提示されていませんが、多分受け取ったXMLをそのまま#resultに追加しているのでしょう。tanatさんの回答と同じくJavaScriptでXMLをパースして、HTMLにするのが良いです。

一応無理やり書けないことも無いですが。

CSS
1ApplData hoge {
2  display: block;
3  padding: 1em;
4  background: #f98;
5}
6ApplData hoge:nth-child(2n) {
7  background: #89f;
8}
9hogehoge {
10  display: block;
11  padding: 1em;
12  margin: 1em;
13  border: 1px solid;
14}
15```**動くサンプル：**[https://jsfiddle.net/fmdve8n1/](https://jsfiddle.net/fmdve8n1/)

投稿2019/01/17 15:05

kei344

総合スコア69407

nekonyangon

2019/01/17 15:15

ありがとうございます！ 5万行を超える膨大かつ複雑なXMLデータなので、パースするのがやや難しく、データをまるごと取得してきて表示し、cssである程度体裁を整えることを想定していました。ご教示いただいた方法で無理やりかけそうでしたので、その方向でいくことにします！大変助かりました。どうもありがとうございました。

行動規範の内容に同意します

XMLをそのまま使うのではなく、
javascriptでXMLをパースして、見やすい形のHTMLで再描画してあげると自分で好きな形に加工出来ます。

jQueryを使用しているのであればjQuery XML パース辺りで調べてみてください。

投稿2019/01/16 17:02

tanat

総合スコア18713

nekonyangon

2019/01/17 15:16

ありがとうございます！ 5万行を超える膨大かつ複雑なXMLデータなので、パースするのがやや難しく、データをまるごと取得してきて表示し、cssである程度体裁を整えることを想定していました。 kei344さんにご教示いただいた方法で無理やり書けそうなので、その方向でいくことにします！どうもありがとうございました。

行動規範の内容に同意します

あなたの回答