PCページの iframe 作成について。

Question

度々の質問、誠に申し訳御座いません。

現在、楽天のPC用GOLDページに iframe を読み込ませてショップを構築しています。

御社で制作された出荷日バナー



はPC、タブレットの大きさに関わらず、高さまでぴっちり綺麗に収まっています。

一方弊社で自作した



はPC、タブレットなど、画面の大きさによって下段の途中で切れてしまっていたり、タブレットを縦画面で見た際にはiframe下に妙なスペース(意図していない最下段の空白)が生じてしまいました。

以前教えて頂いた スマホの vw でも対応出来ず(上記と同じように意図していないスペースが出来る為)困っています。

ご面倒をお掛け致しまして誠に恐縮では御座いますが、解決法をご教授頂きたく存じます。

弊社でも調べましたが、時間を掛けたにも関わらず解決する事が出来ませんでした。

何卒宜しくお願い申し上げます。

Answer

ECマスターズの伊藤です。

> 
> 
> はPC、タブレットなど、画面の大きさによって下段の途中で切れてしまっていたり、タブレットを縦画面で見た際にはiframe下に妙なスペース(意図していない最下段の空白)が生じてしまいました。

頂いておりましたページが
存在しないとのことで、確認することができませんでした。

実際のページを拝見させていただきたいので
お手数ですが、URLをご連絡いただきますよう
お願いいたします。

なお、ページの構成によっては
縦横比が固定とならず
解決できない場合がございますので
予めご了承いただきますよう
お願いいたします。

Answer

伊藤様

ご連絡有難う御座います。

>なお、ページの構成によっては
>縦横比が固定とならず
>解決できない場合がございますので
>予めご了承いただきますよう
>お願いいたします。

上記の件、承知致しました。

また、ご確認出来ない状態について、大変失礼致しました。



となります。

埋め込み場所はヘッダー上部、御社のイベント告知君(R)の真上に設置しております。

以上、お手数をお掛け致しますが、何卒宜しくお願い申し上げます。

Answer

ECマスターズの伊藤です。

> 埋め込み場所はヘッダー上部、御社のイベント告知君(R)の真上に設置しております。

URLのご連絡ありがとうございました。

確認させていたところ、こちらは、vwを利用して
高さを変更するのは難しそうです。

かわりに、下記に変更していただけますでしょうか。

＝＝＝＝　以下に変更 ＝＝＝



.hader_height{
　　height:470px;
}
@media only screen and (max-width : 750px) {
　　/* 画面幅が750px以下のときの設定 */
　　.hader_height{
　　　　height:100px;
　　}
}

＝＝＝＝　以上に変更 ＝＝＝

@media only screen and (max-width : 750px) {

の部分で、画面幅が750px以下の場合
という設定をし

.hader_height{
    height:100px;
}

の部分で
class="hader_height"
の付与されている要素の
高さを100pxにする
設定をしています。

数値の部分は自由に変更いただけますので
文字の折返しのタイミングなどに合わせて
修正をしてください。
（750、100は仮で入れた数値です）

＝＝＝＝
@media only screen and (max-width : 750px) {
    .hader_height{
        height:100px;
    }
}
@media only screen and (max-width : 500px) {
    .hader_height{
        height:200px;
    }
}
＝＝＝＝
のように、複数追加をすることも可能です。
※@media only screen and (max-width : 750px) は
数字が小さいものを下に記述して下さい。
↓↓ですと、300の設定が効かない場合があります。
＝＝＝＝
@media only screen and (max-width : 300px) {
}
@media only screen and (max-width : 500px) {
}
＝＝＝＝

すべて解説しますと長くなってしまいますので

https://sole-color-blog.com/blog/71/

など、
レスポンシブ CSS media screen
で検索されて、参考サイトをご覧いただければと思います。

Answer

ご連絡有難う御座います。

お教え頂いた通り




.hader_height{
　　height:470px;
}
@media only screen and (max-width : 750px) {
　　/* 画面幅が750px以下のときの設定 */
　　.hader_height{
　　　　height:100px;
　　}
}


に変更し、

max-width : や
.hader_height{
　　　　height:100px;
　　}

の数字も変えてみましたが、上記の記述にすると今度は全て表示されず、1枚目のバナー辺りで表示が切れてしまいました。

ちなみに、

https://item.rakuten.co.jp/auc-state/alumni-0058/

のスマートフォン用商品説明文



でも似たような(縦画面と横画面で空白の大きさが異なり、レスポンシブルになっていない？) 現象が起きました。

最初の質問では PC ページにで使用した Flexbox が原因かと考えておりましたが、使用していないスマホ用ページでも似たような現象が生じてしまい…

共通している事と言えば、共にバナーの下に文字を入力している事です。

それが原因なのでしょうか…。

お手数をお掛け致しますが、ご確認の程何卒宜しくお願い申し上げます。

Answer

ECマスターズの伊藤です。

> 数字も変えてみましたが、上記の記述にすると今度は全て表示されず、1枚目のバナー辺りで表示が切れてしまいました。

大変失礼いたしました。
一部、全角が入力されていたため、
CSSが適用されずにいました。

下記に修正していただき、お試しいただけますでしょうか。

＝＝＝＝ 以下に変更 ＝＝＝



.header_height{
  height:470px;
}
@media only screen and (max-width : 750px) {
  /* 画面幅が750px以下のときの設定 */
    .header_height{
      height:100px;
    }
}

＝＝＝＝ 以上に変更 ＝＝＝


> 共通している事と言えば、共にバナーの下に文字を入力している事です。
> 
> それが原因なのでしょうか…。

こちらについては、ご認識されている通り
文字（と画像）が入力されているためとなります。

vwは横幅に対する比率となります。

たとえば、
height="200vw"（＝ 画面幅の２倍）
としていただいた場合
375 x 812pxのスマホでは

縦持ち
375 x 2 = 750px

横持ち
812 x 2 = 1624px

となりますが

テキストの場合
横持ちのほうが、改行される回数が減り
高さ小さくなります。

対して画像は
縦横比を維持しますので
横持ちのほうが、高さが大きくなります。

そのため、画面幅に対する高さが
合わず、余白ができてしまっています。

Answer

ご連絡有難う御座います。
先程、




.header_height{
height:470px;
}
@media only screen and (max-width : 750px) {
/* 画面幅が750px以下のときの設定 */
.header_height{
height:100px;
}
}


に修正を行い、CSSの数値を変更する事でPC 並びに所有のタブレットで空白を消すことが出来ました。

また、別の場所でも class 名を変更し、適用する事が出来ました。

お忙しい中ご対応下さり感謝申し上げます。

解決済にする前に1つだけ確認させて頂きたく存じます。

https://item.rakuten.co.jp/auc-state/alumni-0058/

のスマートフォン用商品説明文


の空白は伊藤様のお話を総合するとスマホでは

例えば

@media only screen and (max-width : 750px) {
/* 画面幅が750px以下のときの設定 */
.smp_test{
height:250vw;
}
}

@media only screen and (max-width : 500px) {
/* 画面幅が500px以下のときの設定 */
.smp_test{
height:310vw;
}
}

のようにCSS ファイルを作成し、




※●●●名は後日外部ファイルで作成する予定のファイル名です。



と読み込めばスクリーン幅によって生じる空白を消す事が可能でしょうか。

お手数をお掛け致しますが、ご確認の程何卒宜しくお願い申し上げます。

Answer

ECマスターズの伊藤です。

> スクリーン幅によって生じる空白を消す事が可能でしょうか。

はい、頂いております通りのコードで
スクリーン幅によって、高さを切り替えるようにできますので
余白を消していただくことができます。