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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

iframe

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

Q&A

0回答

1842閲覧

iframeのレスポンシブ化が上手く行きません

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

iframe

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

0グッド

0クリップ

投稿2019/01/29 08:51

編集2022/01/12 10:55

ifarameのレスポンシブが上手行きません。paddingの影響で画面を最大にした時に大きく余白があいてしまいます。

縮めた時
イメージ説明     埋め込みが切れてしまう

大きくした時
イメージ説明     paddingが大きい

html

1 2<!DOCTYPE html> 3<html lang="ja"> 4 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <link rel="stylesheet" href="iframe.css"> 10 <title>Document</title> 11</head> 12 13<body> 14 15 <!-- CONTACT --> 16 <div id="contact"> 17 <div id="contact-top"></div> 18 <div class="iframe-wrap"> 19 <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdQk7zyuDI79SyoTAZK_PwATr6paabHzFTxLmR1XoU6_kzagg/viewform?embedded=true" 20 width="647" height="1040" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">読み込んでいます...</iframe> 21 </div> 22 </div> 23 <!-- FOOTER --> 24 <footer> 25 <p>&copy;2019 - saranshodo.</p> 26 </footer> 27</body> 28 29</html> 30

css

1 2 3@charset "utf-8"; 4 5/* FONT デフォルトで"Noto Sans Japanese" */ 6@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); 7 8 9/* 10html5doctor.com Reset Stylesheet 11v1.6.1 12Last Updated: 2010-09-17 13Author: Richard Clark - http://richclarkdesign.com 14Twitter: @rich_clark 15*/ 16 17 18 19 20/*要素のフォントサイズやマージン・パディングをリセットしています*/ 21html, body, div, span, object, iframe, 22h1, h2, h3, h4, h5, h6, p, blockquote, pre, 23abbr, address, cite, code, 24del, dfn, em, img, ins, kbd, q, samp, 25small, strong, sub, sup, var, 26b, i, 27dl, dt, dd, ol, ul, li, 28fieldset, form, label, legend, 29table, caption, tbody, tfoot, thead, tr, th, td, 30article, aside, canvas, details, figcaption, figure, 31footer, header, hgroup, menu, nav, section, summary, 32time, mark, audio, video { 33 margin:0; 34 padding:0; 35 border:0; 36 outline:0; 37 font-size:100%; 38 vertical-align:baseline; 39 background:transparent; 40 color: #383948; 41} 42 43/*行の高さをフォントサイズと同じにしています*/ 44body { 45 line-height:1; 46 font-family: "Noto Sans Japanese", sans-serif; 47} 48 49 50 51/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/ 52article,aside,details,figcaption,figure, 53footer,header,hgroup,menu,nav,section { 54 display:block; 55} 56 57/*nav要素内ulのマーカー(行頭記号)を表示しないようにしています*/ 58/*nav ul { 59 list-style:none; 60}*/ 61ol, ul { 62 list-style: none; 63} 64 65 66/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/ 67a { 68 margin:0; 69 padding:0; 70 font-size:100%; 71 vertical-align:baseline; 72 background:transparent; 73 text-decoration: none; 74} 75 76/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています 77また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/ 78mark { 79 background-color:#ff9; 80 color:#000; 81 font-style:italic; 82 font-weight:bold; 83} 84 85/*テキストに打ち消し線が付くようにしています*/ 86del { 87 text-decoration: line-through; 88} 89 90/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています 91また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/ 92abbr[title], dfn[title] { 93 border-bottom:1px dotted; 94 cursor:help; 95} 96 97 98/*縦方向の揃え位置を中央揃えに指定しています*/ 99input, select { 100 vertical-align:middle; 101} 102 103/*画像を縦に並べた時に余白が出ないように*/ 104img { 105 vertical-align: top; 106 font-size: 0; 107 line-height: 0; 108} 109 110/*box-sizingを全ブラウザに対応*/ 111*, *:before, *:after { 112 -webkit-box-sizing: border-box; 113 -moz-box-sizing: border-box; 114 -o-box-sizing: border-box; 115 -ms-box-sizing: border-box; 116 box-sizing: border-box; 117} 118 119/* CONTACT */ 120#contact { 121 width: 100%; 122 /* height: 1147px; */ 123 height: auto; 124 padding-bottom: 110px; 125 126} 127 128#contact-top { 129 width: 100%; 130 height: 348px; 131 /* height: auto; 132 padding-top: 27.18%; */ 133 background: url('img/contact_back.jpg'); 134 background-repeat: no-repeat; 135 background-size: cover; 136} 137 138#contact .iframe-wrap { 139 position: relative; 140 width: 95%; 141 height: 0; 142 padding-top: 100.74%; 143 margin: -235px auto 0; 144} 145 146#contact .iframe-wrap iframe { 147 display: block; 148 position: absolute; 149 top: 0; 150 left: 0; 151 width: 100%; 152 height: 100%; 153} 154 155 156 157 158/* FOOTER */ 159footer { 160 width: 100%; 161 height: 100px; 162 background-color: #494040; 163 text-align: center; 164} 165 166footer p { 167 font-size: 16px; 168 line-height: 100px; 169 font-weight: normal; 170 color: #ffffff; 171 letter-spacing: 0.2em; 172} 173 174

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

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

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

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

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

yoshinavi

2019/01/29 09:07

どこの部分でしょうか?スクリーンショット等で図示してもらうと、回答がつきやすいかと思います。
退会済みユーザー

退会済みユーザー

2019/01/29 09:13

編集しました。ありがとうございます。
yoshinavi

2019/01/29 09:32

Chromeのデベロッパーツールで確認してみると、Googleフォームの影響のように見えます。再度Googleフォーム設定を確認されてはいかがでしょうか?
退会済みユーザー

退会済みユーザー

2019/01/29 11:15

単に大きさだけならviewportである程度なんとかできます。 そちらは試されましたか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問