iframeタグ レスポンシブ対応 → うまくいかず

HTML ＞ HTML5

iframeタグ内容に応じた分類

　状態:未解決 　閲覧数:2,612 　投稿日:2015-06-17 　更新日:2015-06-17
1.iframeタグ修正可能
2.iframeタグ修正不可

1.iframeタグ修正可能なケース

　閲覧数:807　投稿日:2015-06-17　更新日:2015-06-17

iframeタグをコントロール可能な場合


自分でiframeタグを記述など

遭遇例
・Bootstrap3

試してみるも望む結果を取得できなかった内容
・iframeタグを囲うタグにクラス指定( class="col-xs-12 col-sm-12 col-md-12")
・効果なし

最終的な対応
・iframeタグに直接クラス名を指定
<iframe class="col-xs-12 col-sm-12 col-md-12"></iframe>


2.iframeタグ修正不可なケース

　閲覧数:803　投稿日:2015-06-17　更新日:2015-06-17

JavaScript


JavaScript等で呼び出したレスポンスとしてiframeタグを表示するパターンなど
・iframeタグ広告

実際に試してみたコード
.iframe-content iframe {

    max-width: 100% !important;

}


見た目はOK
・右端に広告が飛び出していない

問題発覚
・うまくいったと思ったのも束の間
・よく見ると、広告の一部が表示されなくなる問題が発生
・レスポンシブでも何でもない
・単に余計な部分を表示しないだけ

最終的に

　閲覧数:728　投稿日:2015-06-17　更新日:2015-06-17

サイズ変更


728×90を諦め、468×60へ変更



サイトへ設置している広告のiframeタグにクラス名を付与したい

HTML5でiframeスクロールバーを表示しない方法が不明

iframe経由で読み込んでいるページへ直接アクセスした場合は、トップページへリダイレクト



類似度ページランキング
順位 ページタイトル抜粋 ％
1 iframeタグ レスポンシブ対応 → うまくいかず 92
2 レスポンシブの margin と width 設定 43
3 テーブルレスポンシブ 33
4 親要素の横幅を越えたヘッダー／レスポンシブ対応 33
5 レスポンシブ画像系用語 32
6 Firefoxだけがログインできない 32
7 レスポンシブ画像実装方式 32
8 Chrome でキャッシュを効かさない 31
9 レスポンシブウェブデザイン 31
10 レスポンシブユーティリティ 31
11 olタグ装飾しようとしたら、「レスポンシブ」と「広告」影響により挫折 30
12 背景CSS シームレスパターン 29
13 HTML5でiframeスクロールバーを表示しない方法が不明 29
14 IrfanView 29
15 キャラクター無料着せ替えジェネレーター Rinmaru Games ／ オンラインサービス 28
16 Illustrator Fireworks 対応バージョン比較 28
17 レスポンシブWebサイトにおけるブレイクポイント 28
18 Chromeをインストール出来ない 28
19 spacer.gif 28
20 Firefoxが重いときの対策（案） 27
2026/5/19 18:23 更新
週間人気ページランキング ／ 5-12 → 5-18
順位 ページタイトル抜粋 アクセス数
1 Design 0 7
2 RGBの種類 ／ ビットカラー | RGB(色) 4
2 「属性」「プロパティ」「アトリビュート」の違い | CSS 4
2 Chromeでmhtml保存を選択できなくなったので、拡張機能「Save Page State」を導入 | Chrome 拡張機能 4
3 HTMLエディタ カテゴリー 3
3 鉄道会社毎のカラーコード | カラーコード(色) 3
3 ICCプロファイル | カラーマネージメント(色) 3
3 CSS 「id」「class」名 に関する調査履歴 1 | 命名規則(コーディングルール) 3
3 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する | CSS 3
3 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 3
3 HSV → RGB 計算方式の違い | 色変換(色) 3
3 アイコン | 3系(Bootstrap) 3
3 ドロワーメニューが表示されない理由 | モバイルデザイン(デザイン) 3
4 CSS カテゴリー 2
4 「position:sticky;」がどうしても効かない →
を一旦削除してみる →
に「display:inline;」を指定 | CSSトラブル対応(CSS)
2
4 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 2
4 RGB ⇔ Lab | 色変換(色) 2
4 画像縦横比の問題 | 画像 2
4 画像大きさ | 他サイト調査(HTML) 2
4 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 | Google Chrome(ブラウザ) 2
2026/5/19 5:05 更新