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

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

ただいまの
回答率

89.10%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 862
退会済みユーザー

退会済みユーザー

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

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

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

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="iframe.css">
    <title>Document</title>
</head>

<body>

    <!-- CONTACT -->
    <div id="contact">
        <div id="contact-top"></div>
        <div class="iframe-wrap">
            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdQk7zyuDI79SyoTAZK_PwATr6paabHzFTxLmR1XoU6_kzagg/viewform?embedded=true"
                width="647" height="1040" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">読み込んでいます...</iframe>
        </div>
    </div>
    <!-- FOOTER -->
    <footer>
        <p>&copy;2019 - saranshodo.</p>
    </footer>
</body>

</html>
@charset "utf-8";

/* FONT  デフォルトで"Noto Sans Japanese" */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);


/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/




/*要素のフォントサイズやマージン・パディングをリセットしています*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    color: #383948;
}

/*行の高さをフォントサイズと同じにしています*/
body {
    line-height:1;
    font-family: "Noto Sans Japanese", sans-serif;
}



/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/*nav要素内ulのマーカー(行頭記号)を表示しないようにしています*/
/*nav ul {
    list-style:none;
}*/
ol, ul {
    list-style: none;
}


/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
    text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}


/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
    vertical-align:middle;
}

/*画像を縦に並べた時に余白が出ないように*/
img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/* CONTACT */
#contact {
    width: 100%;
    /* height: 1147px; */
    height: auto;
    padding-bottom: 110px;

}

#contact-top {
    width: 100%;
    height: 348px;
    /* height: auto;
    padding-top: 27.18%; */
    background: url('img/contact_back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#contact .iframe-wrap {
    position: relative;
    width: 95%;
    height: 0;
    padding-top: 100.74%;
    margin: -235px auto 0;
}

#contact .iframe-wrap iframe {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/* FOOTER */
footer {
    width: 100%;
    height: 100px;
    background-color: #494040;
    text-align: center;
}

footer p {
    font-size: 16px;
    line-height: 100px;
    font-weight: normal;
    color: #ffffff;
    letter-spacing: 0.2em;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • yoshinavi

    2019/01/29 18:32

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/01/29 20:15

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

    キャンセル

  • 退会済みユーザー

    2019/01/30 09:59

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

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

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

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る