質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1171閲覧

親ページ内のインラインフレームの横幅レスポンシブルについて

mikpi

総合スコア4

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/01/23 08:33

前提・実現したいこと

困っています。もしご存知の方がいらしゃいましたらご教授お願いします。

  • 親ページの解像度(デバイスの画面の大きさ)に合わせ、インラインフレーム内のfloatなどを解除したい
  • インラインフレーム内単体で横幅のcssでレイアウトを変更するレスポンシブは効く
  • なお、インラインフレーム内と親ページがどうしても別ドメインになる条件

発生している問題・エラーメッセージ

  • 親ページに埋め込んだ状態で親ページから見ても、単体では効いていたCSSが効かずにレスポンシブルにならない
  • インラインフレーム内の画面の横幅レスポンシブCSSが親ページからは影響されずに効いていない?
  • iframeとは元々親ページに埋め込むとcssのmin-width, max-widthのCSSが効かない

該当のソースコード

  • この様なものを使ってモバイルデバイスのみfloatを解除してdivや画像を横幅100%表示にしたい。

@media screen and (max-width: 760px) {}

試したこと

CSSはフレームのページに適応し、プレーム内単体は動くけど、親ページの画面サイズに影響しないので動かない

補足情報(FW/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

下記のいずれかでどうでしょうか。

  • メディアクエリを使わない方法を模索する。

レスポンシブ対応は、親ページのiframeで対応し、
子ページは、width: 100%;などのパーセントを使い対応する。

  • 上記に付随してfloatを使わず、flexgridを使う。

(メディアクエリを使わない方法を模索ということ)
floatはものすごく使いづらいので、よほどの理由が無い限り、今後使用すべきではありません。

  • 親ページから、iframeの中身をJavaScriptでコントロールする。

親ページのサイズを元に、子ページのDOMやスタイルをコントロールする、ということです。
しかし、これは、お察しの通り、同ドメインでなければ、セキュリティで弾かれて実行できません。
か、親ページからのアクセスを、子ページから許可してもらう必要があります。
(CORSの設定をしてもらうということ)

投稿2020/01/23 09:23

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikpi

2020/01/24 02:59

ご指示頂きありがとうございます! 最新のCSSに付いて行けてないのでflex, gridなどの新しい情報助かります。 親ドメインにjsを置く事も出来ず、またスクリーンサイズ以外の指定は難しいため、 この環境でフレーム内をレスポンス対応にするのは難しいのかな…と思いました。 インラインフレームは親からだと横幅の影響を受けないのでしょうかね…。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問