レスポンス対応について HP作成

質問

ホームページのレスポンス対応について

ホームページを作ったのですが、その作ったホームページがほぼ全て画像を繋ぎ合わせて横幅のサイズも統一して、一つにして完成させたのですが、ccsで下の写真のようにコードを書いたのですが、ipadは全くサイズが合いません。また、iPhone6や7なども白い隙間が出来ます。確認はグーグル クロームにあるレスポンス対応の機種別の確認で確かめています。
どうしたら良いでしょうか？　
ccsコードの数字は何度か変えているのですが、なかなかうまく合ってくれません。
ちなみにホームページは全部画像です。　ソフトはマイクロソフトのExpressionWeb4を使っています。
回答よろしくお願い致します。

回答No.1

LimeGreen5

こんにちは。

ブラウザ独自のスタイルシートというものがありまして。

わかりやすくいうと、ブラウザごとに「このタグはこのように表示するべし」と決められているのですが、これは業界では統一されていないんです。
そこでウェブ関係者はCSSをリセットするスタイルシートを読み込んだうえで、新たにCSS指定をする、というようなことを行なっています。

normalize.css

とか

reset.css

とか

そんな名前で公開されていますが、ブラウザを作っている人たちの心配りを「一旦なかったことにする」CSSを、事前に読み込んでおきましょうという工夫です。
それをベースにして、自分に合った設定を行うケースがとても多い。そう思っていただいていいと思います。

ですから、指定がうまくいかない場合、ブラウザ独自の挙動を知ることも合わせてお勉強していただければ、なんとかなることが多いです。

さて。

添付画像を見た限りですが、けっこう間違っているというか、意味がない指定をされているように思います。

基礎をおさらいしていただければ、たぶんお気づきいただけると思いますので深く言及するのは避けますが、とりあえずお伝えしたいことをまとめてみました。

1）拝見したCSSは、メディアクエリが効かない書き方になっています。

@media (max-width: 670px) {
}

img {
width:100%;
max-width: 100%;
height: auto

}

と書かれていますが、

@media (max-width: 670px) {
}←コレよりも前にimgのプロパティを記入しなければ効きません。クエリが閉じた後に書かれているので、肝心なところで効かない指定になっています。

@media (max-width: 670px) {

　ここに書く

}

{ と } の間に記述することを意識してください。

2）見た限り、同じ指定を何度も書かれています。

3つあるメディアクエリのすべてに下記の記述を施そうとされていますが、

img {
width:100%;
max-width: 100%;
height: auto;

}

これはどれも同じことですので、メディアクエリ以前の指定にいれておけば記述は一つで済みます。

3）HTMLとCSSを見ないと、何が引っかかってるかは判断できない。

わたしたちはご質問を拝見して答えを想像するのですが、imgのCSS指定だけを見て判断できないことも知っています。
HTMLとCSSは2つで1セットですので、より正確な回答をお求めの場合、両方を記載していただくと話が早いです。

4）なんとなく、コレを書いておけばイケるような気がする。

メディアクエリで指定するよりも前に記述しておくと、うまくいく（ような気がする）CSSの指定がありますので、一度お試しください。

img {
margin: 0;
padding: 0;
border: 0;
}

スキマがあったり、線が表示されたり、いろいろ勝手に（いや、気を利かして）表示してくれるブラウザの特性をちょっと黙っていただくための記述です。