WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： mane
カテゴリー： マークアップ >CSS

Webサイトを制作していると、外部サービスから提供されたコードを設置する機会があります。
先日、提供されたコードをWebサイトに設置したところ、「iframe」を使ってコンテンツが表示されました。
見た目を少し調整しようとCSSを書いてみたものの、iframeの中身にはCSSが効かない……。

そこで今回は、iframeとはどのような仕組みなのか、なぜCSSが効かないのか、デザインを変更したい場合はどうすればいいのかをまとめてみます。

iframeとは？

iframeは「inline frame（インラインフレーム）」の略で、現在表示しているWebページの中に、別のHTMLページを埋め込んで表示するためのHTMLタグです。
例えば、以下のように記述します。

<iframe
  src="https://example.com/form/"
  title="お問い合わせフォーム">
</iframe>

これによって、https://example.com/form/のページを現在のページ内に表示できます。

Googleマップや動画、外部サービスのフォームなどをWebサイトに埋め込む際にも利用されています。

見た目としては1つのWebページに見えますが、実際には、

• iframeを設置している親ページ
• iframe内に読み込まれているページ

は、それぞれ別の文書として扱われます。

ここが今回のポイントです。

iframeの中身にCSSを指定しても効かない

例えば、iframe内にあるinputのデザインを変更したいとします。

親ページのCSSに、

iframe input {
  border-radius: 10px;
}

と書けば変更できそうな気がしますが、これではiframe内のinputには反映されません。
iframeの中に表示されているページは、親ページとは別の文書だからです。

親ページに読み込まれているCSSは、iframe内のHTML要素にはそのまま適用されません。
そのため、CSSの指定方法が間違っているのではなく、そもそも親ページ側のCSSではiframeの中身を変更できないというケースがあります。

iframe自体のデザインは変更できる

iframeの「中身」に親ページのCSSを適用することはできませんが、親ページに設置しているiframe要素自体にはCSSを指定できます。

例えば、

iframe {
  width: 100%;
  height: 600px;
  border: none;
}

とすれば、iframeの幅や高さ、枠線、余白、配置などを調整できます。

つまり、

• iframeそのものの見た目 → 親ページから変更できる
• iframeの中に表示されている要素 → 親ページのCSSでは変更できない

という違いがあります。

iframe内のデザインを変更するには？

では、iframe内の文字色やボタン、フォームなどのデザインを変更したい場合はどの様にすればよいのでしょうか。
いくつか方法があります。

1. iframeで読み込んでいるページを直接編集する

iframeで読み込んでいるページのHTMLやCSSを編集できる場合は、そのページ側のCSSを修正します。

例えば、

<iframe src="https://example.com/form/"></iframe>

となっている場合、https://example.com/form/側のHTMLやCSSを編集します。
親ページからCSSを適用するのではなく、表示元のページを修正するという方法です。

今回私が遭遇したケースも、iframeの読み込み先は別のドメインでしたが、そのサーバーのFTP情報は共有されていました。
そのため、技術的には読み込み先のファイルを修正できる可能性がありましたが、ここで注意したいのが「編集できる」と「編集してよい」は別ということ。
自分が管理していないiframeの場合は、修正する前に管理者へ確認しておくと安心です。

2. 外部サービスのカスタマイズ機能を利用する

フォームなどの外部サービスをiframeで読み込んでいる場合、サービス側にデザインを変更する機能が用意されていることがあります。

例えば、

• 管理画面から色を変更する
• テーマを選択する
• カスタムCSSを登録する

などです。
iframe先のHTMLやCSSを直接編集できない場合は、まずサービス側にカスタマイズ機能がないか確認してみましょう。

3. iframe先を編集できない場合

iframe先のページを自分で管理しておらず、サービス側にもカスタマイズ機能がない場合は、親ページからiframe内のデザインを変更することは基本的にできません。
さらに、親ページとiframeの読み込み先が異なるオリジンの場合は、「同一オリジンポリシー（Same-Origin Policy）」というブラウザのセキュリティ上の仕組みによって、JavaScriptからiframe内部へアクセスすることも制限されています。

ここでいう「オリジン」は、主に

• プロトコル（http / https）
• ホスト（ドメイン）
• ポート番号

の組み合わせによって判断されます。
外部サイトの内容を別のサイトから自由に読み取ったり、操作できてしまうと、セキュリティ上の問題につながるため、このような制限が設けられています。

同一オリジンなら変更できる？

親ページとiframeの読み込み先が同一オリジンの場合は、JavaScriptを使ってiframe内のDOMへアクセスすることができます。
ただし、同一オリジンだからといって、親ページのCSSがiframe内へ自動的に適用されるわけではありません。
自分で管理しているページ同士であれば、iframe側のCSSを直接修正した方がシンプルなケースも多いでしょう。

つまり、「iframeだから絶対に変更できない」というわけではなく、
「iframe先のページを編集できるのか」
「親ページとiframe先が同一オリジンなのか」
といった点を確認することが重要です。

CSSが効かないときの確認ポイント

iframe内のデザインを変更したいときは、次の順番で確認すると原因を切り分けやすくなります。

1. 変更したいのはiframe自体か、iframeの中身か
2. iframeの中身なら、読み込み先のページを編集できるか
3. 外部サービスの場合、デザイン変更やカスタムCSSの機能があるか
4. iframe先のファイルを編集する権限があるか

iframe自体のサイズや余白であれば、親ページ側のCSSで調整できます。
一方、iframe内のボタンや文字、フォームなどを変更したい場合は、基本的にiframe先での対応が必要になります。

まとめ

今回は、iframe内のコンテンツにCSSが効かない理由と、デザインを変更したい場合の対処方法についてまとめました。

iframeはページの中に別のHTML文書を表示する仕組みのため、親ページに書いたCSSはiframe内にはそのまま適用されません。

「CSSの指定が間違っている？」と思ってしまいがちですが、まずは対象のコンテンツがiframeで読み込まれていないか確認してみると、原因がすぐに分かるかもしれません。

iframe内のデザインを変更したい場合は、
「どのページが表示されているのか」
「そのページを編集できるのか」
を確認するのがポイントです。

外部サービスから提供されたコードを設置した際などに、「CSSを書いたのに全然効かない！」となったときは、ぜひiframeの存在もチェックしてみてください。