プロが教える店舗&オフィスのセキュリティ対策術

書籍でCSSでのホームページ作成を勉強中です。
一冊全部やりました。
 それで、7ページ.htmlファイルができました。
 CSSの書籍には最後から二番目に「マルチデバイス対応・・・」
とあり、レスポンシブル関連はたった 1ページ分し解説がなくて

 問題のindex.html のレスポンシブルへの変換コードがないので
 応用するしかないのですが、しかし画像関連がありません!
 
 それで全ページ共通のソースコードである以下ですが施してい
ます。
 「メディアクエリを記述する」
CSS側です。
 @media screen and (max-width:600px) {
/* 画面サイズ600px以下の場合に適用 */

7ページあるhtml の全ページ共通のソースコード
<meta name="viewport" content="width=device-width,initial-scale=1">

以上ですが、問題の以下のbg-index2.jpg画像ですが
書籍~引用した画像の余計な部分を他の画像ソフトで
切り取り、それを使ったところ、
元が画像が884kb(JPG)
加工後が591KBと(JPG)
とサイズは小さくなりましたが
スマホ画面に切り替えると、以上のどちらの画面も
バカでかくて、もっと小さくしないと全く見栄が良くありません
以下が問題のコードです。
#index {
background-image: url(../images/bg-index2.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}

それで 適当に
 CSSの他に使われていた
以下を張り付けてみましたが、全く変化なしでした。

1案)
 #index {
 width: 960px;
margin: 150px auto 0 auto;
background-image: url(../images/bg-index2.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}

2案)
 #index {
 width: 960px;
margin: 150px auto 0 auto; 
background-image: url(../images/bg-index2.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
以上ですが
どうしたら bg-index2.jpg
 サイズを小さくできるようになりますか?
 よろしくお願いいたします。

質問者からの補足コメント

  • どうもすみません
    第一案二案は同じものでした。
    コピペを間違えたみたいです。

      補足日時:2021/04/23 18:14
  • うれしい

    色々と本当にありがとうございます。
    今後ともよろしくお願いいたします。
    さて
    教えていただきました、画像の解像度を「MediBang Paint Pro」
    フリーソフト(お勧め)で約200bkまで下げたところ、だいぶ画像が
    小さくなりました。 それと「スマホ画面のアスペクト比」
    に合う画像をそもそも準備する必要があると思いました。

      補足日時:2021/04/24 05:43

A 回答 (3件)

#2です。

更に追記しますが、

そこだけ修正してもダメで、
その外枠が、600px以上の枠幅を指定しているのなら、その内枠も広がってしまうので、
その外枠自体の全ての枠幅が100%になるように作らなきゃダメだし、
内部コンテンツも100%に収まるようにしないと,はみ出してしまい、枠が崩壊して、その#index枠も広がってしまいますよ・・・

あくまで、例を挙げます。自分の環境で合わせる事!

@media only screen and (max-width: 600px){ /* @ 開始 */
body > div{ width:100% !important;} /* ←このような100%を設定 */
#index {
margin: 150px auto 0 auto;
background-image: url(../images/bg-index2.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: contain;
}
} /* @ 終了 */
    • good
    • 1
この回答へのお礼

ありがとうございます。
今後ともよろしくお願いいたします。

お礼日時:2021/04/24 05:44

まず、全体の背景画像だとしても、591kbはデカすぎです!


せいぜい、200kbに抑えるばきかなぁ
だって、背景画像なんてそんな鮮明じゃなくても良いでしょ!

指摘:
1,
各所に全角スペースが入ってないか? ここでのインデントのつもり? そんなもんは不要だし、実際のCSSではエラーになるよ・・・(初心者や中級者でも良く犯す、初歩的なミス)
2,
#1さんにも指摘されてますが、600px以下なのに、width: 960px;は矛盾だから削除!
3,
background-sizeは、coverじゃなく、containでどうだろう? 両方試してみて!
4,
background-position: center center;は不要な気がするが・・・削除して、その差は眼視での判断でしょうね。

#index {
margin: 150px auto 0 auto;
background-image: url(../images/bg-index2.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: contain;
}
    • good
    • 1

ちょっとよくわからないんで確認なんですが、



#indexに背景画像を使用する。
600px以下と601px以上で差し替えしたい。

ということでしょうか?

でも差し替えされてないのはなんでだ?ということですよね?

600px以下の画像はbg-index2.jpgという名前がついている。
601px以上の画像の名前は変えてありますか?

また、1案と2案はまったく同じに見えます。何か変えてますか?
どちらにしても600px以下なのに960pxのwidth指定がされているのはヘンです。600pxを突き破って960pxの横幅で指定されていますから960px幅の画像として配置されます。

仮にデバイスの横幅いっぱいとしたいのであれば

widh:100%;

などの指定に変える方がいいと思います。
    • good
    • 1

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!