ホームページ レスポンシブ対応 上手くいきません

質問

ホームページのレスポンシブ対応について質問です。ホームは画像のみで作ったのですが、レスポンシブ対応がうまく行きません。

下の写真は左側にHTML右側がCCSコードです。左画像のHTMLの中にある赤い四角で囲ってあるところが画像のコードです。ほとんどはこの画像を貼り付けたホームページです。

レスポンシブ対応で
iPhone6や7では丁度良いのですが、下の写真のようにiPhone5の場合、写真の右下の絵に注目））のところに隙間ができています。また、iPadでは画像が拡大していてほとんど一部しか見えません。

画像をある程度はレスポンシブ対応させたいのですが、どうプログラミングコードを打てばよろしいでしょか？

CCSのコードがおかしいのでしょうか？

回答No.1

LimeGreen5 · ベストアンサー

こんにちは。

どうお伝えしたらいいのか、ちょっと難しいのですけれども。

まずはこんがらがった「よくわからん何か」をほぐすところから始めましょう。

基礎的なことを身につけないと、何がアタリで何かハズレか判断できなくなります。

1）まず、シンプルに考える

メディアクエリをいくつも書かれていますが、やっていることは同じです。

「imgというタグが出てきたら
　『横幅を100%で表示しろ。最大幅は100%だ。天地幅は、なりゆきだ』
　という指定」

を繰り返し書かれているだけです。
控えめに申し上げて、何度も書く意味がありません。

さらに、同じことを書いているけれども同じ記述が重なった場合、エラーが発生する余地を与えます。入力を間違えたとか。よくあります。

ミスタイプでコロンがセミコロンになっているとか。
でも、気づかないことが多いですね。
コーディング専用ツールでも使わないと気づきません。

書き方が1箇所でも間違っていたらすべてが水泡に帰します。
ですから、CSSはシンプルに書く、という不文律があると思っていただければ。

また、画像を見る限りですけれども、
HTMLに謎のスタイルシートが組み込まれていたりしていて
何がOKで何がNGかわかりません。

外部CSS以外に、htmlにもスタイルシートが混在す状況で的確に何かを導き出すのは難しいものです。
2）シンプルに考えるために

imgを、とにかく横幅100%で表示したいと考えるなら、メディアクエリは忘れましょう。

つまり、@media～が書くのは捨てて、まずはimgの挙動を限定します。

img {
margin:0;
padding:0;
border:0;
width:100%;
height:auto;
}

コレだけ書いて保存してみましょう。
@media の記述は、一旦捨ててください。

3）HTMLも余計な記述を捨てる

スマホだろうがPCだろうが、とにかく見た目で横幅100%の画像があればいいのです。
また、モバイルファーストのの考え方からも、メディアクエリは関係なくimgの指定をしておけばいいわけです。

まずは大前提の指定をしておく。

————

@charset "UTF-8";

img {
margin:0;
padding:0;
border:0;
width:100%;
height:auto;
}

————

タブレットとかPCで、違う挙動が欲しければ、そこで初めて@media と書けばいいのです。

そして、HTMLに手を入れます。
おそらくアプリケーションの規定動作で、imgを入力したら当該ファイルのデータを読み込むことになっているのではないかと思います。
ジャマな指定を削りましょう。

<img alt=“画像1” height=“2344” src=“ww1.png” width=“1298” />

という記述の

height=“2344”

と

width=“1298”

を

削除してください。

CSSでサイズを設定しようとしているのに、タグで横幅と天地幅を指定していては本末転倒です。

<img alt=“画像1” src=“ww1.png” />

この状態でもサイズがヘンだとしたら、他にも干渉している何かがあるということです。

ひとつずつ、何がダメなのかを潰していく作業が必要です。
まずはスマホだろうがPCだろうが、横幅に関係なく100%表示される状態を探してください。