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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

6361閲覧

iframeで外部htmlを埋め込み対応でデザイン崩れが起きます。

chika-chika

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2017/05/17 02:10

編集2017/05/17 02:14

###発生してる問題
レスポンシブ対応でテキストエリアのデザインが横にはみ出てしまいます。
ifreneで外部LPサイトを埋め込みをしています。
androidでははみ出ないですが、iphone5s以降の画面で表示するとフォームのデザインが崩れています。

###前提・実現したいこと
レスポンシブ対応でテキストエリアが横にはみ出ないようにしたいです。
###htmlは以下のように組んでいます。

<!DOCTYPE html> <!-------- ▼変更しないでください▼ --------> <html lang="ja"> <head> <meta charset="utf-8"> <title>Curebo</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="robots" content="noindex,nofollow,noarchive"> <link rel="icon" type="image/vnd.microsoft.icon" href="./images/icon/16.ico" sizes="16×16"> <link rel="icon" type="image/vnd.microsoft.icon" href="./images/icon/32.ico" sizes="32x32"> <link rel="icon" type="image/vnd.microsoft.icon" href="./images/icon/48.ico" sizes="48x48"> <link rel="icon" type="image/vnd.microsoft.icon" href="./images/icon/128.ico" sizes="128x128"> <link rel="apple-touch-icon" href="../images/icon/curebo_touch_icon.png"> <link rel="stylesheet" href="style.css"> <script src="./js/jquery-1.12.4.min.js"></script> <script src="./js/script.js"></script> <script src="./js/jquery.scrolldepth.min.js"></script> </head> <body> <!-- インクルード --> <div id="frame_area"> <iframe src="https://lp.cola100.jp/afc29_sp_8100n?affId=2_1492516872_f7h3lex5NFwTILWJ"></iframe> </div> <!-- iframe hight調整 --> <script> $('iframe') .on('load', function(){ try { $(this).height(this.contentWindow.document.documentElement.scrollHeight); } catch (e) { } }) .trigger('load'); </script> </body> </html> ###cssは以下のように対応しています

cssは以下のように対応しています

#frame_area { width: 100%; height: 100%; } iframe { border: 0; width: 100%; height: 100%; }

デザイン崩れするサイト

![イメージ

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

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

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

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

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

guest

回答1

0

ベストアンサー

原因は iframe まわりのスタイルではなく、
読み込み先の外部サイト側の問題かと思います。

外部LPとの記載ですので、質問者様がそのソースを触れるのかわかりませんが、

その現象を治す対処方法としては、
おそらく、<input> に対するwidth:100% と 左右の margin または padding が同時指定される事による、幅の増幅現象が原因(特定のブラウザ環境で起こるCSSの幅認識のバグというか仕様)と思われるので、

それを回避するための CSS3 の素敵なスタイル box-sizing:border-box を指定してあげる事で解決できるのではと思います。

CSS

1input { 2-moz-box-sizing: border-box; 3 box-sizing: border-box; 4}

外部LPサイトを直接触れない場合は、どうしようもないですね。
指摘してあげて修正されるのを待つくらいでしょうか。

投稿2017/05/17 07:44

iss

総合スコア506

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問