レスポンシブ　画面縮小

レスポンシブ対応について学習中で、実際にページを作成しています。

クロームの検証機能を確認しながら下記の数字までの幅の場合に適応される
コードを書いたつもりですが、実際に画面縮小してみると
レスポンシブ対応になっていません。
クローム検証時には(show media queriesでのレスポンシブ表示やデバイスのフレームでの表示)
それぞれの画面に収まっているように見えました。
コードの指定方法が間違っているのかと思い、再度調べてみましたが
行き詰まってしまったので、指定方法など間違っているところを教えて頂けないでしょうか。

指定したブレイクポイント
タブレット　 max-width:1024
iphone6/7/8 max-width:670
iphone5/se max-width:570

html
<!DOCTYPE html>

<html lang="ja">
<head>
<meta  charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hide.poto</title>

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

</head>

<body>
    <header class="header">
        <div class="header-left">
            <h2>Yamada TarouPortforio</h2>
            <ul class="socialbtn">
              <li><a href="https://twitter.com/"><img src="http://placehold.jp/80x80.png"</a></li>
              <li><a href="https://twitter.com/"><img src="http://placehold.jp/80x80.png"</a></li>
              <li><a href="https://twitter.com/"><img src="http://placehold.jp/80x80.png"</a></li>


           </ul>
        </div>

        <div class="header-right">
                <nav class="list">
                  <ul class="site.map">
                    <li><a href="#">About</a></li>
                    <li><a href="#jump">Works</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                  </ul>
                </nav>
        </div>
    </header>

    <main class="hide1">
        <div class="gazou1">
        <img class="gazou2" src="http://placehold.jp/800x500.png"alt="101841312e1547bb">
        </div>


        <section class="flex-contianer1">
        　<div class="centeralignment">
           <div class="apps">
             <h1>「aaaaaaa」作成</h1>
          　　　<p><span class="icon_man"></span><font size="3">山田太郎></font></p>
            　 <p><font size="3"><span class="icon-p">iosエンジニア志望</span></font></p>
           </div>
             <div class="gaiyou">
               <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
           </div>
        </div>
       
    



       <div class="centeralignment">
           <div class="gaiyou1">
             <h2 id="jump">サービス概要</h2>
              <img class="gazou2" src="https://placehold.jp/800x400.png">
              
　　　　　　　　<h2>Flow</h2>
             <img class="gazou2" src="https://placehold.jp/800x400.png">
           </div>
       </div>
     </section>

    

     <section class="flex-contianer2">
        <div class="centeralignment">
           <div class="jittsou">
             <h2>実装機能</h2>
              <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  
          </div>
       </div>


       <div class="centeralignment">  
           <div class="technology">
              <h1> 使用技術 </h1>
              <h2> mBaaS　</h2>
              <h3> 【Firebase】　</h3>
              <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
           </div>
        </div>
           

          <div class="centeralignment">  
             <div class="technology">
             <h3> Code管理 </h3>
             <h3> 【Github】</h3>
             <p> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
           </div>
          </div>

          <div class="centeralignment">  
             <div class="technology">
               <h3> GUI</h3>
               <h3> 【SourceTree】　</h3>
               <p> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
               <h3> License管理　</h3>
             </div>
          </div>

          <div class="centeralignment">  
             <div class="technology">
               <h3> 【LicensePlist】</h3>
               <p> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p>
               </div>
          </div>

          <div class="centeralignment">  
              <div class="technology">
               <h3>UX/UI</h3>
               <h3> XLPagerTabStrip</h3>
               <p> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
             </div>
          </div>


            
           

    

      <div class="centeralignment">
          <div class="learning">
             <h2>学習履歴</h2>

             <p>○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○○</p>
             <p>○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○○</p>
             <p>○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○○</p>
             <p>○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○○</p>
             <p>○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○◯○○</p>
         </div>
      </div>
     </section>
  
  

      自分の写真⇩
      <div class="gazou3">
            <img class="gazou2" src="//">
            </div>
    </main>

    <footer>
        <div class="end">
          <p>Copyright©</p>
          <p>フッター色々</p>

        </div>
    </footer>






         

        
</body>
```ここに言語を入力
コード

css
@charset "UTF-8";

*{
margin: 0;
padding: 0;

}

body{
font-family:'Helvetica',sans-serif;
font-weight: 100;

}

.gazou1{
background-color: #f8f8ff;
display:flex;
justify-content: center;
padding: 50px 50px;

}

.gazou1 img{

box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.1);
margin-top:10px;

}

.gaiyou{
border:solid 1px #dce4ec;
line-height: 40px;
padding: 20px;
width: 750px;

}
.gazou2{
width:800px ;
}

.socialbtn{
list-style: none;
position: absolute;
top:2px;
right: 40px;
display: flex;

}

.socialbtn img{
max-width: 33px;
padding:20px;

}

.my-color{
color: gray;
}

.header-right ul{
display: flex;
list-style: none;
justify-content: flex-end;
margin-top: 130px;

}
.header-right li{
margin-right: 60px;

}

.header-right a{
color: #000;
text-decoration: none;
font-size: 14px;
}

.header-left{
margin-bottom: 50px;
position: relative;
top: 50px;

}

.header-left h2{
font-size: 30px;
padding-left: 50px;

}
.header{
height: 200px;

}

.centeralignment{
justify-content: center;
line-height: 50px;
padding: 40px;
width: 780px;
margin: 0 auto;
text-align:left;

}

.flex-contianer1{

margin: 0 auto;
text-align:left;

}

.flex-contianer2{
width: 780px;
margin: 0 auto;
text-align:left;
}

.centeralignment p{
font-size: 20px;
}

.technology li{
list-style:none;
}

.apps p{
line-height: 0.1px;
margin-bottom: 40px;

}

.apps span{
color: #a9a9a9;
}

.icon-p{
padding-left: 98px;
}

.end{
margin: 40px;
}

.icon_man:before {
content: url(https://placehold.jp/96x23.png) ;
position : relative ;
bottom : -3em ;
right: 1em;
margin-right : 0.1em ;
}

}

```ここに言語を入力
レスポンシブ


@charset "UTF-8";
*{
    margin: 0;
    padding: 0;

}




@media screen and (max-width:1024px){
.header-left h2{
        color: #808080;
        font-size: 40px;
       
}   
.header-right a{
    font-size: 30px;
   
}


.header-right ul{
    width: 100%;
}

.socialbtn{
    position: absolute;
    top:20px;
    display: flex;
}


.socialbtn img{
  max-width: 40px;
  margin-top: 20px;
}

.gazou1{
    width: 100%;
}
.flex-contianer1{
    width: 75%;

}

.flex-contianer2{
    width: 75%;
}


/* ******************************************** */
@media screen and (max-width:670px){
    
    
    .header-left h2{
        width: 100%;
    }



     .header-right a{
        font-size: 25px;
     }

    .header-right ul{
        position: absolute;
        top:30px;
        left:350px;

     }

     .socialbtn{
        position: relative;
        top:20px;
        left: 90px;
       
    }
     


    .gazou1{
        width: 140%;
       
    }
     
       
     .flex-contianer2{
         width: 75%;
     }
  
    
/* ******************************************** */
@media screen and (max-width:570px){
    
    .header-right ul{
        position: absolute;
        top:30px;
        left:390px;
    }

     .gazou1{
        width: 150%;
    }


     .flex-contianer1{
       width: 80%;
   
}
}
}
}

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

回答1件

ベストアンサー

まず、下記の構文エラーを修正してください。

HTML

imgタグの閉じ忘れ → ちゃんと閉じる。
全角空白の混在 → 削除する
<FONT>タグを使っている → 非推奨なので、CSSの方でフォントサイズを指定するようにする

CSS

{ と } の対応がおかしい。→ 正しい対応になるように修正

そのうえで、メインのCSSで width: XXXpx というように固定値で幅を指定している要素は、メディアクエリ内で width: XXX% というように親要素に対する相対値で指定しなおす。

とりあえずはこの辺から取り組んでください。

投稿2020/01/03 10:17

hatena19

総合スコア34073

yucom

2020/01/03 12:01

確認して頂きありがとうございます。教えていただいた箇所を確認し、修正していきます。

NAOPI-05

2020/01/03 17:06

回答が遅れてしまい申し訳ありません。既存の回答者がご指摘された箇所に関連しているかもしれませんが、CSSについて言及します。メインのCSSについては「 }」が１つ多い気がします。レスポンシブ用のCSSについてはメディアクエリ自体がネストされているように見えます。メディアクエリの範囲内にメディアクエリが書かれていますが、SassではなくてCSSなのでそれはできません。

yucom

2020/01/05 10:37

NAOPI-05さんへ回答頂いたのに気づかず申し訳ありません。。勉強不足ですみません。レスポンシブCSSのメディアクエリの範囲内にメディアクエリが書かれている‥ とは今の記述では無く小さい幅から書くという事でしょうか。。

NAOPI-05

2020/01/05 15:24

順番の問題ではなく階層の問題です。よく見ると以下のようにメディアクエリが入れ子になっていませんか？ @media screen and (max-width:1024px) { @media screen and (max-width:670px) { @media screen and (max-width:570px) { } } } メディアクエリそのものに階層関係は持たせられませんよ。

yucom

2020/01/06 04:29 編集

気付きませんでした。ありがとうございます。修正します。

hatena19

2020/01/06 07:15 編集

「まだ回答を求めています」とのことですが、まずは私の回答とコメントで指摘された間違いを修正したうえで、もう少し範囲を狭めて(たとえば header部分のみとか)、どこがどのように希望のレイアウトにならないのか、質問しなおすといいかと思います。現状のコードでは回答するには範囲が広すぎるし、HTMLも複雑すぎます。（製作依頼、デバッグ依頼になってしまってます。）

yucom

2020/01/07 05:32

おっしゃるとおりです。m(_ _)m 修正はできたので、整理してもう一度質問したいと思います。ありがとうございました。

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