書籍で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
サイズを小さくできるようになりますか?
よろしくお願いいたします。
No.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;
}
} /* @ 終了 */
No.2
- 回答日時:
まず、全体の背景画像だとしても、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;
}
No.1
- 回答日時:
ちょっとよくわからないんで確認なんですが、
#indexに背景画像を使用する。
600px以下と601px以上で差し替えしたい。
ということでしょうか?
でも差し替えされてないのはなんでだ?ということですよね?
600px以下の画像はbg-index2.jpgという名前がついている。
601px以上の画像の名前は変えてありますか?
また、1案と2案はまったく同じに見えます。何か変えてますか?
どちらにしても600px以下なのに960pxのwidth指定がされているのはヘンです。600pxを突き破って960pxの横幅で指定されていますから960px幅の画像として配置されます。
仮にデバイスの横幅いっぱいとしたいのであれば
widh:100%;
などの指定に変える方がいいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
form input テキストを上下中央...
-
初心者html・CSS ウィンドウを...
-
CSSで指定した背景画像にリンク...
-
画像だけを端に寄せる方法
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
css初心者 フレックスボックス...
-
div領域をウインドウサイズに合...
-
ライトボックスでスクロールバー
-
HTMLで一部だけスクロールする...
-
表示倍率を変えるとレイアウト...
-
ボックスを中央配置したいです。
-
スクロールボックス内の文字の...
-
スクロールボックスを中央に配...
-
ヘッダーの画像にメインエリア...
-
Safariでheight:100%のボックス...
-
border-style:solidで文字がずれる
-
cssが効かなくて困ってます
-
中点「・」の改行について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
form input テキストを上下中央...
-
スクロールボックスを中央に配...
-
【CSS】ヘッダーの高さが不明の...
-
CSS:animation開始位置の設定
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
CSSで背景画像を一番下にもって...
-
【HTML】【CSS】【Swiper】 元...
-
CSSでボックスのheightが0になる
-
divで囲まれたpaddingの指定を...
-
CSSで指定した背景画像にリンク...
-
【HTML&CSS】フッター下部の余...
-
HTMLのiframeの入れ子について
-
画像と一緒にスライドするリン...
-
ページを拡大縮小でborderが消...
おすすめ情報
どうもすみません
第一案二案は同じものでした。
コピペを間違えたみたいです。
色々と本当にありがとうございます。
今後ともよろしくお願いいたします。
さて
教えていただきました、画像の解像度を「MediBang Paint Pro」
フリーソフト(お勧め)で約200bkまで下げたところ、だいぶ画像が
小さくなりました。 それと「スマホ画面のアスペクト比」
に合う画像をそもそも準備する必要があると思いました。