素人なんですがホームページを作っております。

質問

素人なんですがホームページを作っております。

質問の内容が「PCとスマホで違う大きさのバナーを表示したい」という事になります。

ホームページに大きなサイズのバナーを貼っています。
PCで見る分には問題ないのですがスマホで見るとはみ出ています。

なのでスマホで見る時には、別の小さなバナーを表示出来ればと思っております。

ネットで調べて見ると「ifを使うと出来る」「条件分岐でできる」と書いてあったのですがPHPやjavaスクリプトの知識が必要みたいなのです。

ただ素人でプログラムの知識が全く無いので、出来ればHTMLとCSSだけでバナーの条件分岐が出来るセレクタがあればと思うのですが可能でしょうか？

大変申し訳ございませんが宜しくお願いします。

回答No.1

H240S18B73

CSSのメディアクエリですかね

@media(max-width:720px){
........
}

で画面幅720px以下でのみ有効なCSS

@media(min-width:720px){
.......
}

で画面幅720px以上でのみ有効なCSS

って感じで書くことができます
ここでサイズと背景画像を切り替えたりすることで
画面幅で画像・サイズが切り替わるバナーとかができます

display:none;などして表示・非表示を切り替える
という手もあるんですが
そうなるといらないサイズの画像も
読み込みが起こってしまうっぽいので
背景画像切り替え型でやったほうがいいと思います。

お礼

ご親切に教えて頂きましてありがとうございました。本当に感謝しております。

ここ何日か調べていたのですが答えが見当たらなくて途方に暮れていました。

メディアクエリというんですね。
早速勉強してみたいと思います。
ありがとうございました。