---
title: Q. サイト内のCSS・jsがFlipdeskのシナリオに反映されません
description: サイト内のCSS・jsがFlipdeskのシナリオに反映されない事象についてお答えします。
---
[コンテンツまでスキップ](https://support.materialdigital.jp/manual/shadowdom#main-content)
日本語
翻訳のサブメニューを表示
[お問い合わせ](https://support.materialdigital.jp/manual/kb-tickets/new?hsLang=ja)
![typeA-1.png\]](https://support.materialdigital.jp/hs-fs/hubfs/typeA-1.png?height=40&name=typeA-1.png)
メインナビゲーションを開く
メインナビゲーションを閉じる
- 日本語
翻訳のサブメニューを表示
- [お問い合わせ](https://support.materialdigital.jp/manual/kb-tickets/new)
- [サービスサイトへ](https://materialdigital.jp/)
[サービスサイトへ](https://materialdigital.jp/)
お困りのことは何でしょうか？
- 検索フィールドが空なので、候補はありません。
1. [Flipdeskサポートセンター](https://support.materialdigital.jp/manual?hsLang=ja)
2. [よくある質問](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja)
3. [技術的な情報](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E6%83%85%E5%A0%B1)
# Q. サイト内のCSS・jsがFlipdeskのシナリオに反映されません
## A. Flipdeskではサイト内のCSSを受けない仕様となっております
1. [FlipdeskのShadowDOM対応を行いました](https://support.materialdigital.jp/manual/shadowdom#main)
2. [ShadowDOMとは](https://support.materialdigital.jp/manual/shadowdom#shadowdom_about)
3. [flipdesk\_documentの使い方](https://support.materialdigital.jp/manual/shadowdom#flipdesk_document)
### 1. ShadowDOM対応を行いました
#### 背景
- 過去、FlipdeskのバナーやポップアップがサイトのCSSの影響を受けてしまい、管理画面のプレビューとサイト上のバナーやポップアップのデザインが一致しないという問題がありました。
- この課題を解決するために、Flipdeskのバナーやポップアップに対してShadowDOM対応を行いました。
#### これまで
- FlipdeskのバナーやポップアップがサイトのCSSの影響を受ける
- JavaScriptでFlipdeskのバナーやポップアップのDOM操作が行える
#### これから
- FlipdeskのバナーやポップアップがサイトのCSSの影響を受けない
- JavaScriptでFlipdeskのバナーやポップアップのDOM操作を行うには独自のオブジェクトを使用する必要があるため、「[3. flipdesk\_documentの使い方](https://support.materialdigital.jp/manual/shadowdom#flipdesk_document)」をご確認ください。
### 2. ShadowDOMとは
- 特定のDOM要素をカプセル化し、マークアップ構造・スタイル・動作を独立させる技術です。
- 技術的な詳細は [こちらの記事（外部サイト）](https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_shadow_DOM)をご確認ください。
### **3. flipdesk\_documentの使い方**
この操作を行うにはJavaScriptの基礎的な知識を要します。
- JavaScriptでFlipdeskのバナーやポップアップのDOM操作を行うには`flipdesk_document` を利用してください。
- `flipdesk_document`を介してのみFlipdeskのバナーやポップアップに対してDOM操作が行えます。
- Flipdeskのバナーやポップアップに関連しない、サイト上の他の要素に対してはこれまで通り`document.querySelector`等をご利用ください。
```
// ▼flipdesk_documentでFlipdeskのDOM要素を取得できますflipdesk_document// => ...
// ▼例：querySelector()を使用する場合flipdesk_document.querySelector('#flipdesk-html-button-content')// => ...
```
#### 具体例
- 例）HTMLバナー内でFlipdeskのDOM要素に対してjavascriptを書きたい時
- [Flipdeskスタートガイド](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#main-content)
- [初めての方はこちら](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AE%E6%96%B9%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89)
- [初期設定（タグ設置）](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A%E3%82%BF%E3%82%B0%E8%A8%AD%E7%BD%AE)
- [Flipdeskマニュアル](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#main-content)
- [シナリオ](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%82%B7%E3%83%8A%E3%83%AA%E3%82%AA)
- [配信ターゲットの設定](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E9%85%8D%E4%BF%A1%E3%82%BF%E3%83%BC%E3%82%B2%E3%83%83%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A)
- [各種タグの仕様](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E5%90%84%E7%A8%AE%E3%82%BF%E3%82%B0%E3%81%AE%E4%BB%95%E6%A7%98)
- [レポート管理](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88%E7%AE%A1%E7%90%86)
- [各種設定](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E5%90%84%E7%A8%AE%E8%A8%AD%E5%AE%9A)
- [アラート機能](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E6%A9%9F%E8%83%BD)
- [AI機能](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#ai%E6%A9%9F%E8%83%BD)
- [Flipdeskオプション](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#main-content)
- [有人チャット](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E6%9C%89%E4%BA%BA%E3%83%81%E3%83%A3%E3%83%83%E3%83%88)
- [WEBプッシュ](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#web%E3%83%97%E3%83%83%E3%82%B7%E3%83%A5)
- [会員情報連携](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E4%BC%9A%E5%93%A1%E6%83%85%E5%A0%B1%E9%80%A3%E6%90%BA)
- [ヒートマップ](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E3%83%92%E3%83%BC%E3%83%88%E3%83%9E%E3%83%83%E3%83%97)
- [Cross Talk](https://support.materialdigital.jp/manual/cross-talk?hsLang=ja#main-content)
- [スタートガイド](https://support.materialdigital.jp/manual/cross-talk?hsLang=ja#%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89)
- [技術的なマニュアル](https://support.materialdigital.jp/manual/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja)
- [よくある質問](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#main-content)
- [技術的な情報](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E6%83%85%E5%A0%B1)
- [契約・請求関連](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#%E5%A5%91%E7%B4%84-%E8%AB%8B%E6%B1%82%E9%96%A2%E9%80%A3)
[](https://materialdigital.jp/)
Copyright © Flipdesk Inc.
Copyright © 2026, 株式会社マテリアルデジタル