レスポンシブデザイン化で画像の大きさが変化しない

前提・実現したいこと

PCで表示できるHPを作成しました。
3個の画像を同じ場所に表示を2秒おきに切り替える仕組みを作りました。
また、別の場所にサムネイルアイコンをクリックすると画像が表示される仕組みを作るなどしています。（ギャラリーと呼びます）
他にも静止画の画像を張り付けてある状態です。

このページをレスポンシブデザインにさせたいのですが、画像の大きさがスマホの横幅にあわせて変化してくれません。大きくも小さくも変化せずです。

発生している問題・エラーメッセージ

エラーメッセージは特に表示されていません。
HPページ右クリック→検証で確認しましたが特にエラーは発生していません。

該当のソースコード

HTML
1</style>
2
3
4    <head>
5    <title>レシピ</title>
6    <meta charset="UTF-8">
7    <meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
8    <link rel="stylesheet" href="style.css">
9    </head>
10
11    <script>
12 
13        const img = ["hoge.png", "foo.png", "bar.jpg"];
14       
15        let count = -1;
16       
17        const hoge = () => {
18          count++;
19          // カウントが最大になれば初期値に戻す
20          if (count == img.length) count = 0;
21          //画像選択
22          pic.src = img[count];
23          //1秒ごとに実行    
24          setTimeout(() => { hoge(); }, 2000);
25        }
26       
27        window.onload = () => {
28       
29          hoge();
30       
31        }
32       
33      </script>
34
35<body>
36    <h1><font color="#EEEEEE">レシピ ～ カルボナーラとペペロンチーノ</h1>
37    <br>
38    <hr width="700" align="left">
39    
40    
41    <!--- html ----->
42     
43    <img id="pic" src="hoge.png" width="600" height=auto class="top">  
44     
45
46
47
48    <p>
49        <table>
50             
51        <tr><th class="fixed"><img src="calbo150.png" class="calbo"></th>
52        <td style="background-color:#476072">
53            ちょっとしたひと工夫で普通の手作り<br>
54            カルボからお店風本格カルボに。<br>
55            失敗もしない簡単レシピ<br><br>
56            <a href="calbo.html" class="calbo" style="background-color:#476072">カルボナーラのレシピ</a>
57            
58        </td>
59        </tr>
60        
61        <tr><th class="fixed"><img src="pepe.jpg" class="pepe"></th>
62        <td style="background-color:#476072">
63            簡単だけど難しいペペロンチーノ。<br>
64            材料と水分調整がうまくいけば本格的な<br>
65            ペペロンチーノに仕上がります。<br><br>
66            <a href="pepe.html" class="pepe" style="background-color:#476072">ペペロンチーノのレシピ</a>
67        </td>
68        
69        </tr>
70        </table>
71        
72    </p>
73<!-- JavaScript -->
74<div id="gallery">
75    <div class="main">
76    </div>
77    <div class="thumb">
78    </div>
79</div>
80<script src="js/app.js"></script>

CSS
1.under {
2  border-bottom: dotted 2px #87cdfa
3}
4
5.fixed {
6  width : 300px;
7  height : auto;
8}
9
10img.calbo {
11  width: 100%;
12  height:auto;
13}
14
15img.pepe {
16  width: 100%;
17  height:auto;
18}
19
20
21#gallery {
22  margin: 0;
23  padding-top: 40px;
24  width: 700px;
25}
26
27#gallery .main img {
28    border:4px solid #fff;
29    box-shadow: 0;
30}
31
32#gallery .main p {
33  color:#bbb;
34  font-size:20px;
35  font-weight:bold;
36}
37
38
39
40#gallery .thumb img {
41  border:4px solid #fff;
42  border-radius: 400px;
43  box-shadow: 0px 0px 10px #000;
44  height: 60px;
45  margin: 10px;
46  width: 60px;
47  cursor: pointer;
48}
49
50
51
52@media screen and (max-width: 480px)　{
53
54  test {
55    float: none;
56  }
57  
58  img {
59    width: 100% ;
60   }
61  }

JavaScript
1//アルバムデータの作成
2let album = [
3    {src: 'img/1.png', msg:'さまざまな形のパスタと自然の恵みを生かしたイタリアン'},
4    {src: 'img/2.png', msg:'パスタだけでなく軽食やスイーツも'},
5    {src: 'img/3.png', msg:'肉料理やピザもイタリアン料理を彩ります'},
6    {src: 'img/4.png', msg:'豊富な種類のピザ'},
7    {src: 'img/5.png', msg:'チーズが主役だったり生ハムが主役だったり、ピザの種類は豊富です'}  
8];
9
10//最初のデータを表示しておく
11let mainImage = document.createElement('img');
12mainImage.setAttribute('src', album[0].src);
13mainImage.setAttribute('alt', album[0].msg);
14
15let mainMsg = document.createElement('p');
16mainMsg.innerText = mainImage.alt;
17
18let mainFlame = document.querySelector('#gallery .main');
19mainFlame.insertBefore(mainImage, null);
20mainFlame.insertBefore(mainMsg, null);
21
22//サムネイル写真の表示
23let thumbFlame = document.querySelector('#gallery .thumb');
24for (let i=0; i< album.length; i++) {
25    let thumbImage = document.createElement('img');
26    thumbImage.setAttribute('src', album[i].src);
27    thumbImage.setAttribute('alt', album[i].msg);
28    thumbFlame.insertBefore(thumbImage, null);
29}
30
31//クリックした画像をメインにする
32thumbFlame.addEventListener('click',function(event) {
33    if (event.target.src) {
34        mainImage.src = event.target.src;
35        mainMsg.innerText = event.target.alt;
36    }
37});

試したこと

ネット検索で見つけた方法で、viewportを追加し、imgタグのwidthを100％にすれば実現っできると思ってやってみているのですが、ダメでした。

どうぞよろしくお願いいたします。

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

回答3件

ベストアンサー

ダブルクォーテーションが全角のようです。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
↓
<meta name="viewport" content="width=device-width,initial-scale=1.0">

投稿2021/07/27 04:36

Lhankor_Mhy

総合スコア36163

oshko03

2021/07/27 05:06

ありがとうございました。表示が変わるようになりました。助かりました。

Lhankor_Mhy

2021/07/27 05:24

お役に立てたようで何よりです。このようなtypoで時間を浪費するのはもったいないので、コードエディタを使うことをおすすめします。

oshko03

2021/07/27 07:55

実はVS code使っていたのに、気が付きませんでした。該当の個所はどこかのホームページからコピペしたもので、うっかりあっていると信じ切ってしまって、エディタでつく色すら未確認で原因を探しておりました…

Lhankor_Mhy

2021/07/27 08:59

すでにご利用でしたか。それは失礼しました。

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

このような感じでもダメでしょうか？

HTML
1<div id="gallery">
2    <div class="main">
3      <img src="...">
4    </div>
5</div>

CSS
1#gallery {
2    width: 700px;
3}
4
5@media screen and (max-width: 480px)　{
6    #gallery {
7        width: 100vw;
8    }
9
10    #gallery img {
11        width: 100%;
12    }
13}

投稿2021/07/26 04:24

tabuu

総合スコア2456

oshko03

2021/07/26 04:49

HTMLの<img src="．．．">のところは表示する画像を固定することになってしまうと思うので、記述できないと思っています。参考までにサイトのURLをお送りするので見てみてください。今はなしているGalleryの場所は、ページ一番下の四角い画像で、一番下にある丸いサムネイルボタンをクリックすると、Galleryの画像の表示がかわるといった動きです。なお、<img src="．．．">以外のところはいただいたアドバイス通り変更してみましたが、挙動は変わりませんでした。 http://oshko03.html.xdomain.jp/index.html

tabuu

2021/07/26 07:42

>HTMLの<img src="．．．">のところは表示する画像を固定することになってしまうと思うので、記述できないと思っています。 imgは動的に作成しsrcは可変となっていますが、できあがるタグはsrcのurl以外は固定されますのでスタイルも固定で置いておくことはできます。 >http://oshko03.html.xdomain.jp/index.html 試しにデベロッパーツールでgalleryとimgのwidthを先に書いたように直接変更してみたらビューポートの幅(ディスプレイ幅)いっぱいに広がりましたよ。

oshko03

2021/07/27 02:44

ありがとうございます。やってみたのですが、ダメでした。記述した内容を下記に記述します。 ‘‘‘HTML <div id="gallery"> <div class="main"> <img src="img\1.png"> </div> ‘‘‘ ‘‘‘CSS #gallery { /* margin: 0;*/ /* padding-top: 40px; */ width: 700px; @media screen and (max-width: 480px)　{ #gallery { width: 100vw; } #gallery img { width: 100%; } img { width: 100% ; } } ‘‘‘ 謝っている点にお気づきになられましたら、ご指摘いただければと思います。お時間を取って大変申し訳ございませんが、どうぞよろしくお願いいたします。

K_3578

2021/07/27 03:22

回答とは関係ありませんが気になったので。 >質問者さんコメント欄では不便ですがMarkDown記法は使えません。見やすさを考慮するなら本文に追記した方が良いです。それと、コードブロックを形成するのは‘‘‘(シングルクォーテーション)ではなく、 ```(バッククォーテーション)です。

tabuu

2021/07/27 03:30

HTMLのdivの閉じタグが足りません。 CSSの#galleryの閉じるカッコがありません。 CSSの@media行に全角スペースがあります。

oshko03

2021/07/27 04:26

K_3578さん、ご助言ありがとうございました。 tabuuさん、チェックありがとうございます。タグが足りないことや、カッコがなかった点はコピペでもらしておりました。こちらのコードでは、それらは存在しております。全角スペースは半角スペースに修正しました。しかし、デベロッパーツールでの表示はかわらずPCでの表示のままで、画像は画面幅いっぱいに表示されません。tabuuさんのところでは期待した動きをしているということなので、何か単純なミスを僕がしているのだろうなぁとは思うのですが。。。

tabuu

2021/07/27 04:45

おそらく単純な記述ミスだと思いますので、質問文のソースコードを完全な形に修正するか、どこかにアップして確認できるようにしてもらえませんか？

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

width:100% は親要素に対してです。
width:100vw とするとビューポートに対して100%となります。

ただしgalleryのwidth:700pxとなっているのでこちらを100vwとする方がよいかと思います。

投稿2021/07/26 02:56

tabuu

総合スコア2456

oshko03

2021/07/26 03:15

CSSのimgのwidthを100vwにしてみましたが、変わりありませんでした。 #galleryのwidthも700pxから100vwにして動作を見てみましたが、挙動に変わりがありませんでした。ご指摘いただいたことを、私が適切にくみ取れていないようでしたら、もう少し詳細をいただけませんでしょうか。どうぞよろしくお願いいたします。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！