# document.writeでのcssの読み込ませ方

**URL:** <https://community.cybozu.dev/t/topic/6655>\
**Category:** kintone 開発相談\
**Created:** [2020 年 8 月 26 日午後 1:25 UTC](https://community.cybozu.dev/t/topic/6655 "2020-08-26T13:25:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2215](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@Legacy\_Account2215](https://community.cybozu.dev/u/Legacy_Account2215)\
**Post date:** [2020 年 8 月 26 日午後 1:25 UTC](https://community.cybozu.dev/t/topic/6655/1 "2020-08-26T13:25:46Z")

</div>

スペースを配置して作ったボタンクリックで小窓を開いています。  
その小窓にcssを反映させたいのですが，うまくいきません。  
cssファイルのパスが間違っているようです。  
どう修正したらいいのでしょうか。

コード抜粋は以下です。

```
mySpaceFieldButton2.onclick = function () {
//入力用小Windowの設定

(function(){//即時関数 ループ中にデータをうまく取得するようにfunctionを二重に
var swd = window.open("", "_blank","width=540,height=480");
swd.document.open();
swd.document.write("<html><head><script type='text/javascript' src='./Stylesheets/jktable.css'></script></head>");
swd.document.write("<p>タイトル</p><body id='body01'></body></html>");

```

出力されたhtmlコードは以下です。

```
<html>
<head>
<script type="text/javascript" src="./Stylesheets/jktable.css">
</script>
</head>

<body id="body01">
<p>タイトル</p>
</body>
</html>

```

./Stylesheets/jktable.css  
の部分が，「ファイルはみつかりません」となってしまってます。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2020 年 8 月 29 日午前 7:09 UTC](https://community.cybozu.dev/t/topic/6655/2 "2020-08-29T07:09:53Z")

</div>

masuto様

こんにちは。

アプリ設定に読み込んだCSSでしたら、下記で読むことができそうです。

```
mySpaceFieldButton2.onclick = function() {
 var swd = window.open("", "_blank","width=540,height=480");
 swd.document.open();
 swd.document.write("<html><head><link rel='stylesheet' href='ここにCSSのパス'></head>");
 swd.document.write("<p>タイトル</p><body id='body01'></body></html>");
}

```

「ここにCSSのパス」の部分は、デベロッパーツール から取得しました。

Chromeであれば、「Sourcesタブ」からCSSファイル（「download.do?」から始まるものの内の1つ）まで辿り、右クリックで「Copy link address」です。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2215](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@Legacy\_Account2215](https://community.cybozu.dev/u/Legacy_Account2215)\
**Post date:** [2020 年 8 月 31 日午前 4:48 UTC](https://community.cybozu.dev/t/topic/6655/3 "2020-08-31T04:48:06Z")

</div>

\*\*[koichi](https://community.cybozu.dev/hc/ja/profiles/900225082446-koichi)\*\*さま

できました！！  
とてもうれしいですー！！！  
ありがとうございます！！！

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2215](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@Legacy\_Account2215](https://community.cybozu.dev/u/Legacy_Account2215)\
**Post date:** [2020 年 8 月 31 日午前 5:51 UTC](https://community.cybozu.dev/t/topic/6655/4 "2020-08-31T05:51:20Z")

</div>

追記で質問です。

cssの内容を書き換えるたびに，ファイルのパスが変わるようです。。  
これはしかたないのでしょうか？

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2020 年 8 月 31 日午前 7:15 UTC](https://community.cybozu.dev/t/topic/6655/5 "2020-08-31T07:15:12Z")

</div>

masuto様

パスが変わる点は盲点でした。

そうなるとアプリの設定で読み込んだcssを使うというのは少々手間かと思いますので、

document.writeでcssも一緒に記述する方法もご紹介します。

```
swd.document.write("<html><head><style type='text/css'>" +
           "p { " +
    "color: #ffff00; " +
 "}" +
 "</style></head>");
swd.document.write("<p>タイトル</p><body id='body01'></body></html>");

```

改行してcssっぽく記述していますが、下記のように1行で記述しても問題ありません。

```
swd.document.write("<html><head><style type='text/css'> p { color: #ffff00; } </style></head>");
swd.document.write("<p>タイトル</p><body id='body01'></body></html>");

```

&nbsp;

他にも、例えばdropboxなどのクラウドストレージにcssファイルを置いておき、

そこのファイルパスURLをアプリの設定で指定することも可能かもしれません。

cssファイルを改修の度に毎回指定する必要が無くなります。

私の環境で実際に試せていないので、ご参考までです。

\<JavaScriptカスタマイズのデバッグをかんたんにするウラワザ\>

[https://developer.cybozu.io/hc/ja/articles/201308690](https://community.cybozu.dev/hc/ja/articles/201308690)&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2215](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@Legacy\_Account2215](https://community.cybozu.dev/u/Legacy_Account2215)\
**Post date:** [2020 年 9 月 1 日午前 12:16 UTC](https://community.cybozu.dev/t/topic/6655/6 "2020-09-01T00:16:54Z")

</div>

\*\*[\>koichi](https://community.cybozu.dev/hc/ja/profiles/900225082446-koichi)\*\*さま

&nbsp;

ありがとうございます！！！  
どちらの方法もとても参考になります！

短いcssだったら  
\>document.writeでcssも一緒に記述する方法  
の方法でやるのが簡単でいいですね！

社内でdropbox使用しているので  
\>dropboxなどのクラウドストレージにcssファイルを置いておき  
もできそうです！

いろいろな場面で使い分けします。  
ありがとうございました！

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 12 月 3 日午前 5:55 UTC](https://community.cybozu.dev/t/topic/6655/7 "2024-12-03T05:55:50Z")

</div>

クローズされました: 2024 年 12 月 3 日午前 5:55 UTC

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。