iframeで読み込まれているHTMLにCSSを適用させるjQueryiframeで読み込まれているHTMLにCSSを適用させるjQueryFRONTEND2020.01.16とある案件で、iframeで読み込んで表示させるページにCSSを適用させる必要がありました。読み込まれている方のページのHTMLを書き換えることが出来るのであれば、全く問題は無いのですが、今回のケースはGoogleカレンダーの埋め込み。読み込むHTMLを書き換えたり出来るはずがありません。調べてみたら、どうやらjQueryをつかうことでiframeで読み込むページにも自由にCSSを適用させることが出来るとのこと。試してみたら簡単に実装出来たので今回記事にしてみます。昔ほどiframe自体あまりつかわなくなりましたが、あまり知れらていない方法だと思うので(僕が知らなかっただけかもしれないですが・・・)、覚えておいて損は無いかと思います。実装方法html読み込む方のページのHTMLに記述するiframeはこんな感じです。src="~.html"></iframe>jQuery例として「id=”frame”」が振られたiframeに、「style.css」を適用させています。CSSのパス、ファイル名は適宜修正してください。href=”style.css”>」を挿入することが出来ます。});});</script>複数のiframeにもつかえる今回の案件では「埋め込まれた2つのGoogleカレンダーの見た目を同じにする」ということが必要でした。このように複数のiframeに同じCSSを適用させたい場合はidをclassに書き換えてください。