サイドバナーのレスポンシブ

Question

https://www.rakuten.ne.jp/gold/dreamhats/openprice/coupon.html

こちらのページはレスポンシブで作っているのですが
左側につけているサイドバナーがPCサイズで大きくしたいのですが、
どのように組めばうまく行くかわかりません。

教えていただけると助かります。

Accepted Answer

失礼いたしました。

私がお送りしましたのcssのコードに
記入漏れがございましたので、
.side_bunnerの横に半角スペースをあけて、
imgを記入していただけますでしょうか。

imgを入れていただくとこのようになります。

@media screen and (max-width:768px) { 
.side_bunner img{
width:70px;
height:70px;
}

}

ｄｈさんからいただきましたコードにつきましては、
が抜けておりましたので、
以下のコードにご変更お願いいたします。

















大きさにつきましては、
150pxを指定していただくこと自体は問題ございませんが、
htmlのコードには

width="150px"

とピクセルは指入れず、

width="150"

と数字のみのご記入でお願いいたします。
私の説明が足らず申し訳ございません。

一点確認ですが、
「３日間限定選べるクーポン」と書かれているバナーの
指定のみwidth="70"になっております。
もし画像の大きさを揃えたい場合には
こちらもwidth="150"指定でお願いいたします。

ご確認の程よろしくお願いいたします。

Answer

ECマスターズの田辺です。

左側のサイドバナーについてのご質問ですが、
右側についてでお間違いないないでしょうか。

サイドバナーをPCで大きく見せたいとのことでしたが、
元が小さい画像を大きく見せてしまいますと
画像が崩れてしまいますので、

まずはPCで表示したい大きさのバナーを用意していただく必要があります。

そうしましたら、現在設定しているバナーと用意していただいたバナーを
差し替えていただきます。

これによって大きい画像が表示されますので、
ここからスマホとタブレットで見たときに小さく見える設定します。

https://www.rakuten.ne.jp/gold/dreamhats/openprice/css/style01.css
の一番下に

@media screen and (max-width:768px) { 
    .side_bunner{
	width:70px;
	height:70px;
}
 
}

を追加記入していただきますと、
タブレットとスマホ画面で小さくなります。


スマホのみ小さくしたい場合には(max-width:480px)に
変更していただけば条件が変わります。

タブレットとスマホをそれぞれ違う大きさに指定したい場合には、
(max-width:480px)と(max-width:768px)にそれぞれ大きさ指定をお願いいたします。

それぞれの画面で指定を変えたい場合の詳しい書き方は、

https://sole-color-blog.com/blog/71/

上記のサイトの
○スタイルシートに指定する場合
が参考になるかと思います。


補足ですが、元々のstyle01.cssの一番下に
}
が抜けておりましたのでご記入お願いいたします。


先程の記述と合わせますと

}
@media screen and (max-width:768px) { 
    .side_bunner{
	width:70px;
	height:70px;
}
 
}

という追記が新たに必要になります。

Answer

返信ありがとうございます。
トライしてみたのですが、うまく行きません。。

この場合コードは












Widthが150と設定しているのでうまくレスポンスになりません。
%で表記したら、さらにおかしいことになりました。

教えていただけると幸いです。

Answer

うまくできました！
ありがとうございます。