CSS, 画像の可変がききません。

###前提・実現したいこと
既存のHTMLサイトをレスポンシブ対応化しているのですが、
画像サイズが変わりません。
以下に貼付けますが、どのような問題点があると想定できるでしょうか。
当方、まだコーダーとして初心者であるため、
疑問点などありましたら迅速に回答致しますので、
どうぞよろしくお願いいたします。

###該当のソースコード

    		<div class="top">
        <img src="img/imagebanner.png" width="1178" height="390" alt=""/>
        </div>
        <div class="digicatalog">
        <img src="img/dicatalogbtn.png" width="334" height="70" alt=""/>
        </div>      
</header>

@charset "UTF-8";
/* CSS Document */

/* pc */
@media screen and (min-width: 961px) {
ul, li {
	list-style: none;
}

h2{
	margin-top: 80px;
}

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

body { 
	-webkit-text-size-adjust : 100% ; 
}

.header {
	width: 80%;
	margin: 0 auto;
	width: 1181px;
}

.top {
	position:relative;
	width: 1181px;
	top: 0;
}

.digicatalog {
	position: absolute;
	width: 1181px;
	top: 255px;
	left: 820px;	
}
 
/* tablet  */
@media only screen and (min-width: 641px) and (max-width: 960px) {
ul, li {
	list-style: none;
}

h2{
	margin-top: 80px;
}

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

body { 
	-webkit-text-size-adjust : 100% ; 
}

.header {
	width: 80%;
	margin: 0 auto;
	width: 1181px;
}

.top {
	position:relative;
	width: 1181px;
	top: 0;
}

.digicatalog {
	position: absolute;
	width: 1181px;
	top: 255px;
	left: 820px;	
}
 
/* smartPhone */
@media screen and (max-width: 640px) {
ul, li {
	list-style: none;
}

h2{
	margin-top: 80px;
}

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

body { 
	-webkit-text-size-adjust : 100% ; 
}

.header {
	width: 80%;
	margin: 0 auto;
	width: 1181px;
}

.top {
	position:relative;
	width: 1181px;
	top: 0;
}

.digicatalog {
	position: absolute;
	width: 1181px;
	top: 255px;
	left: 820px;	
}

kei344

2016/07/01 12:19

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、HTMLも最低限追記ください。

行動規範の内容に同意します

回答2件

ベストアンサー

HTML
1<div class="top">
2        <img src="img/imagebanner.png" width="1178" height="390" alt=""/>
3        </div>
4        <div class="digicatalog">
5        <img src="img/dicatalogbtn.png" width="334" height="70" alt=""/>
6        </div>      
7</header>

まずこちらのHTML、</header>に対応する開始タグがありません。（多分<header class="header">が抜けてる？）

また、CSSの方で

CSS
1.top {
2    position:relative;
3    width: 1181px;
4    top: 0;
5}
6
7.digicatalog {
8    position: absolute;
9    width: 1181px;
10    top: 255px;
11    left: 820px;    
12}

のように、全てのサイズでwidth:1181pxに固定されていますので、当然のことながら子要素の画像は伸縮しません。

あとコードの書き方として、メディアクエリでPCサイズ・タブレットサイズ・スマホサイズの３段階に完全に分断し、
それぞれの中で重複したコードを記述していますが、この書き方は無駄が多いのでオススメできません。

既存のサイトをレスポンシブ化しているとのことですので、既にPC向けのレイアウトを実現するためのCSSは存在していると思います。これをレスポンシブ化する際には、

CSS
1/*ベースのCSS（PC向け・及び全サイズ共通の指定）*/
2
3@media screen and (max-width: 960px) {
4/*タブレットサイズ用の差分指定*/
5}
6
7@media screen and (max-width:640px){
8/*スマホサイズ用の差分指定*/
9}
10

のような形で、まずPC向けの基本スタイルを指定しておき、画面サイズが小さくなるにつれて必要な差分指定だけをメディアクエリで上書きする手法の方が一般的です。（デスクトップファースト方式）

参考までに。

投稿2016/07/01 13:35

aKusano

総合スコア3763

まずhtmlの方のimgタグについているwidth, heightの属性を削除しましょう。
これらの属性はレスポンシブデザインをする上では足を引っ張ります。

提示されてるサンプルコードだとこんな感じです。

html
1<header><!-- 開始タグがなかったのでこの行は追記しました。 -->
2    <div class="top">
3        <img src="img/imagebanner.png" alt=""/>
4    </div>
5    <div class="digicatalog">
6        <img src="img/dicatalogbtn.png" alt=""/>
7    </div>
8</header>

それからCSSの方で
各ブラウザサイズのimg向けにスタイル指定していきましょう。

css
1/* PC向け */
2@media screen and (min-width: 961px) {
3    .top img {
4        width: 1178px;
5        height: 390px;
6    }
7    .digicatalog img {
8        width: 334px;
9        height: 70px;
10    }
11}
12
13/* タブレット用 */
14@media only screen and (min-width: 641px) and (max-width: 960px) {
15    .top img {
16        /* タブレット用のwidth, heightを入れて下さい */
17    }
18    .digicatalog img {
19        /* タブレット用のwidth, heightを入れて下さい */
20    }
21}
22
23/* スマホ用 */
24@media screen and (max-width: 640px) {
25    .top img {
26        /* スマホ用のwidth, heightを入れて下さい */
27    }
28    .digicatalog img {
29        /* スマホ用のwidth, heightを入れて下さい */
30    }
31}

これで画像の幅や高さは変更出来ると思います。
確認してみてください。

投稿2016/07/01 13:26

yudai524

総合スコア37

yudai524

2016/07/01 13:45

初心者とのことなので老婆心ながらアドバイスさせて頂くと htmlのインデントを綺麗にする習慣をつけましょう。他の人がhtmlを読むときや、後で自分で書いたhtmlを見返す必要があるときに格段に見やすくなります。書いてすぐは構造を覚えていますが半年とか経つとすっかり忘れているので、後からメンテナンスやデザイン修正の依頼が来た時に対処しやすくなります。また、CSSに関しては aKusanoさんが書かれている回答のように既存のPC向けサイトをレスポンシブデザインにする場合はデスクトップファーストが効率的です。僕も2年前は質問者さんと同じぐらいのレベルだったので質問者さんもすぐわかるようになると思います。頑張ってください！

行動規範の内容に同意します

あなたの回答