レスポンシブで画面を小さくしていくと、全体が表示されない

Question

レスポンシブを勉強しています。
画面を小さくしていくと見本は全体が表示されながら縮小されていくのですが、私が作ったものはされません。どこがおかしいのでしょうか？ご教示お願いします。コード添付します。

body{
    background-color: #d2d2d2;
}

.container{
    width: 1200px;
    background-color: white;
    margin: 0 auto;
}

.h-title{
height: 100px;
border-top: 5px solid blue;
position: relative;

}
.h-title .h-logo{
width: 300px;
position: absolute;
top: 50%;
left: 4%;
transform: translateY(-50%);
}
.h-nav{
    border-top: 1px solid #d2d2d2;
}
.h-menu{
    letter-spacing: -.4em;
}

.h-list{
    display: inline-block;
    width: calc(100%/6);
    position: relative;
    letter-spacing: normal;
    height: 64px;
    border-right: 1px solid #d2d2d2;
    box-sizing: border-box;
    vertical-align: bottom;
}


.h-list:hover .h-l-top{
    color: #0e36ca;
}
.h-list:hover{
    background-color: #e6ebfa;
}

.h-list:hover .h-l-box:before{
    content: "";
    width: 3px;
    height: 100%;
    position: absolute;
    background-color: #0e36ca;
    left:4px
    
}

.h-l-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
}

.h-l-top{
    font-size: 15px;
    font-weight: bold;
    color: #666666;
    margin-bottom: 4px;
}

.h-l-bottom{
    font-size: 10px;
    color: #bababa;
    text-align: center;

}

.active{
    background-color: #e6ebfa;        
}
.active .h-l-box:before{
    content: "";
    width: 3px;
    height: 100%;
    position: absolute;
    background-color: #0e36ca;
    left:4px
}
.active .h-l-top{
    color: #0e36ca;    
}

.h-image{
    max-width: 100%;
    height: auto;
}

.contents{
    padding: 24px;
}

.main{
    float: left;
    width: 70%;
    
}

.m-h2{
    background-color: #0f3bda;
    color: white;
    padding: 14px 12px 14px 24px;
    border-radius: 4px;
    font-size: 18px;
    margin-bottom: 24px;
}

.m-h2::first-letter{
    border-left: 3px solid #8e9eef;
    padding-left: 16px;
}

.m-info{
    margin-left: 12px;
    margin-right: 12px;
    font-size: 15px;
    
}

.m-section{
    color: #666666;
    margin-bottom: 24px;

}

.m-log{
    text-align: right;
    padding-top: 24px;
}

.m-log a{
    color: #666666;
}

.m-info-date{
    float: left;
    padding: 8px 32px 8px 0px;
    color: blue;

}

.m-info-content{
    padding: 8px;
    border-bottom: 1px solid #ccc;
}

.m-info-new{
    background-color: red;
    font-size: 11px;
    color: #fff;
    padding: 2px 4px;
    border-radius: 3px;

}

.m-h3{
    background-color: #F6F6F6;
    color: #666666;
    padding: 14px 12px 14px 24px;
    border-radius: 4px;
    font-size: 17px;
    margin-bottom: 24px;
    border: #ccc 1px solid;
}
.m-point {
    color: red;/*文字色*/
    
}
.m-p{
    color: #666666;
    font-size: 15px;
    margin: 24px 16px;
    line-height: 2;

}


.side{
    float: right;
    width: 25%;
}

.s-framebox{
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f4f4f4;
    margin-bottom: 24px;
    color: #666666;
}

.s-h4{
    padding: 28px 10px;
    border-top: 5px solid blue;
    background: #eeeeee;
    color: #666666;
    font-weight: bold;

}
.s-list{
    border-bottom: 1px solid #d2d2d2;
    display: flow-root;
}

.s-list :hover{
    background-color: white;
}

.s-list a{
    text-decoration: none;
    display: block;
    padding: 15px;
    display: flow-root;
 
}

.s-list :hover a{
    color: blue;
}

.s-logo{
    width: 20%;
    height: auto;
    float: left;
    margin-right: 5px;
}

.s-l-title{
    font-size: 12px;
    color: blue;
}

.s-l-descryption{
    font-size: 12px;
}


.s-c-title{
    font-weight: bold;
    text-align: center;
    line-height: 1.5;

}
.s-c-info{
    font-size: 12px;
    text-align: center;
}

.s-framebox2{
    padding: 10px;
    color: #666666;
}

.footer{
    clear: both;
    background-color: blue;
}
.box9 {
    padding: 1em 1em;
    margin: 0.1em 0;
    text-align: center;
    font-size: 12px;
    line-height: 2;
    color: white;
  
  }
  .box9 a {
    text-decoration: none;
    color: white;  
  }

  .footer a:hover{
      color: blue;
      -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  }


#nav-open span, #nav-open span:before, #nav-open span:after{
    position: absolute;
    height: 3px;
    width: 30px;
    background-color: #666;
    content: "";
    cursor: pointer;
}
#nav-open span{
    top: 38px;
    right: 30px;
}

#nav-open span:before{
    bottom: -12px;
}

#nav-open span:after{
    bottom: -24px;
}
#nav-contents{
    display: none;
    position: absolute;
    top: 100px;
    z-index: 100;
    width: 100%;
    height: auto;
    background: black;
    transition: .3s;
    opacity: 0;
}
#nav-input:checked ~ #nav-contents{
    opacity: .8;
}

.nav-invisible{
    display: none;
}

@media screen and (max-width: 780px){
    body{
        font-size: 12px;
        line-height: 1.5;
    }
    .main{
        float: none;
        width: auto;
    }
    .side{
        float: none;
        width: auto;
    }
    .container{
        width: 98%;
    }
    .contents{
        padding: 2%;
    }
    .h-title .h-logo{
        width: 60%;
    }
    .m-h2, m-h3{
        font-size: 16px;
        padding: 7px 6px 7px 8px;
    
    }
    .m-h2::first-letter{
        padding-left: 8px;
    }
    .m-info-date{
        font-size: 8px;
    }
    .m-info-content{
        font-size: 8px;
        line-height: 1.5;
    }
    .m-info-new{
        font-size: 8px;
        padding: 1px 2px;
    }
    .m-log a{
        font-size: 12px;
    }
    .h-nav{
        display: none;
    }



}

Comments

[dit.]

CSS側がコードブロックから出てしまっているようです。

```html
ここにHTMLのコード
```
（コードブロックとコードブロックの間は1行以上開ける）
```css
ここにCSSのコード
```

また、提示のコードだけでは問題が再現できないように思います。ご確認ください。

[Lhankor_Mhy]

「全体が表示されながら縮小されていくのですが、私が作ったものはされません」とのことですが、スクリーン幅をいくつからいくつへ変更した時の動作が想定と異なるのかご提示ください。

[B_J]

見本のページでは、「検証」ボタンを押しても「常に」全体が表示されながら縮小されていきます。そして、画面自体もドラッグアンドドロップしても動きません。

しかし、私の作ったページは、なぜかドラッグアンドドロップできて、背景？コンテナ？以外のページをドラッグアンドドロップできてしまいます。

そして、いくつからいくつ、ということへの回答は、「すべて」です。すべて見本と違ってしまっています。

そして、コードがすべて載せられない場合どうすればいいのでしょうか？

[B_J]

CSSのみ記載してみましたが、ご回答は難しいでしょうか？

[B_J]

ありがとうございます。分からず困っております・・・。コードを全部入力したいのですが、する方法はないのでしょうか？見本のとおりにコーディングしているはずなのです・・・

[Lhankor_Mhy]

以前にもご案内したと思いますが。

>最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。そうすれば、貴方自身が現象と問題をより良く理解することにもつながるからです。

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

---

「現象を再現するためのミニマムなプログラム」をどうやって作るかですが、たとえば、以下の様な手順はどうですか？

①　HTMLからフッターを削除してみて、それでも問題が再現するかどうか確認する。
②　①で問題が再現しないのであればフッターに原因がある可能性があるので、フッター以外を削除してみる。
③　①で問題が再現するのであればフッターは関係ないので「現象を再現するためより小さいプログラム」ができたことになる。　以下、①に戻って別の部分を削除するを繰り返す。

---

勘違いしている質問者が一部にいらっしゃいますが、回答者ができることは質問者の問題解決のお手伝いだけです。
問題解決は、質問者自身がしなくてはならないことです。
**回答者は問題を解決しません**

[B_J]

すみません。ありがとうございます。

Answer 1

ウィンドウ幅が780px以下になった場合は.container{width: 98%;}があるためおそらく横スクロールはしないと思いますが、ウィンドウ幅が780pxより大きい時には.container{width: 1200px;}が効いています。
例えばウィンドウ幅が800pxの時には400px分.containerがはみ出すことになるので、これが原因ではないかと思います。
「見本」がどのようなものかはわかりませんがコードが確認できるようならCSSを確認して横幅の指示を確認してみては。

---

追記

現在は下記のようになっていると思います。

/* 略 */
.container{
    width: 1200px;
    background-color: white;
    margin: 0 auto;
}
/* 略 */
@media screen and (max-width: 780px){
    .container{
        width: 98%;
    }
}
/* 略 */

ウィンドウ幅が780pxより大きい場合は.containerの幅がwidth: 1200px;に固定されています。
ウィンドウサイズが780px～1199pxの間で横スクロールが発生する状態だと思います。

対処の方法は様々あると思いますが、個人的にやりやすいのは基本をwidth: 98%;にしておいてmax-width: 1200px;を設定するとかです。

/* 略 */
.container{
    width: 98%; /* 変更 */
    max-width: 1200px; /* 追加 */
    background-color: white;
    margin: 0 auto;
}
/* 略 */
@media screen and (max-width: 780px){
    /* 削除
    .container{
        width: 98%;
    }
    */
}
/* 略 */

Comments

[B_J]

ありがとうございます。分からず困っております・・・。コードを全部入力したいのですが、する方法はないのでしょうか？見本のとおりにコーディングしているはずなのです・・・

[B_J]

一般的にレスポンシブでドラッグアンドドロップで画面を縮小させていくとき、全体を表示しながら縮小させるには、どうコーディングしたらいいのでしょうか？

[dit.]

対処法の一例を回答に追記しました。ご確認ください。

見本の通りにコーディングしているはずといわれてもその見本の提示が無ければこちらはそれを確認することができません。見本と動作が違うのならどこかが違っているのでしょう、と言うことしかできません。

[B_J]

dit.さま！！できましたできました！！！！本当に本当に感激です！！！本当にありがとうございます！！！でも、なぜなのでしょうか？どうして解決方法まで導けたのでしょうか？