レスポンシブ実行後、サイドが上から下に並ばない

レスポンシブをして、780以下のwidthになったら、スマホ対応になるようにしたいのですが、設定すると、サイドの部分がまっすぐに上から下に並ばず、変な階段みたいになってしまいます。これはどうしてでしょうか？
添付画像ですと、aがbのようにならなければならないのに、aがcになってしまいます。

html
1 <aside class="side">
2                <div class="s-framebox">
3                    <h4 class="s-h4">Menu</h4>
4                    <ul class="s-menu">
5                        <li class="s-list"><a href="#">メニュー</a></li>
6                        <li class="s-list"><a href="#">メニュー</a></li>
7                        <li class="s-list"><a href="#">メニュー</a></li>
8                    </ul>
9                </div>
10                <div class="s-framebox2">
11                    <h4 class="s-h4">Menu</h4>
12                    <ul class="s-menu">
13                        <li class="s-list"><a href="#">メニュー</a></li>
14                        <li class="s-list"><a href="#">メニュー</a></li>
15                        <li class="s-list"><a href="#">メニュー</a></li>
16                    </ul>
17                </div>
18                <div class="s-framebox">
19                    <h4 class="s-h4">製品情報</h4>
20                    <ul class="s-menu">
21                        <li class="s-list"><a href="#">
22                            <img class="s-logo" src="images/side.jpg" alt="製品情報の画像">
23                            <div class="s-l-title">製品情報</div>
24                            <div class="s-l-descryption">簡単な説明をここに入れます。</div></a></li>
25                        <li class="s-list"><a href="#"><img class="s-logo" src="images/side.jpg" alt="製品情報の画像">
26                            <div class="s-l-title">製品情報</div>
27                            <div class="s-l-descryption">簡単な説明をここに入れます。</div></a></li>
28                        <li class="s-list"><a href="#"><img class="s-logo" src="images/side.jpg" alt="製品情報の画像">
29                            <div class="s-l-title">製品情報</div>
30                            <div class="s-l-descryption">簡単な説明をここに入れます。</div></a></li>
31                    </ul>
32                </div>
33                <div class="s-framebox2">
34                    <h4 class="s-h4">製品情報</h4>
35                    <ul class="s-menu">
36                        <li class="s-list"><a href="#">
37                            <img class="s-logo" src="images/side.jpg" alt="製品情報の画像">
38                            <div class="s-l-title">製品情報</div>
39                            <div class="s-l-descryption">簡単な説明をここに入れます。</div></a></li>
40                        <li class="s-list"><a href="#"><img class="s-logo" src="images/side.jpg" alt="製品情報の画像">
41                            <div class="s-l-title">製品情報</div>
42                            <div class="s-l-descryption">簡単な説明をここに入れます。</div></a></li>
43                        <li class="s-list"><a href="#"><img class="s-logo" src="images/side.jpg" alt="製品情報の画像">
44                            <div class="s-l-title">製品情報</div>
45                            <div class="s-l-descryption">簡単な説明をここに入れます。</div></a></li>
46                    </ul>
47                    <div class="s-framebox">
48                        <h4 class="s-h4">運営</h4>
49                        <ul class="s-menu">
50                            <div class="s-c-title">株式会社SAMPLE COMPANY</div>
51                            <div class="s-c-info">東京都XX区XXXXビル3F<br>
52                                TEL:03-0000-0000<br>
53                                (AM9:00〜PM5:00 土日祝休み)</div>
54                           
55                        </ul>
56                    </div>
57                </div>
58
59
60            </aside>
61
62        </div>
63
64        
65        <footer class="footer">
66            <div class="box9">
67                Copyright©
68          <a href="https://template-party.com/template/tp_beginner5/tp_beginner5_orange01/index.html">SAMPLE SITE</a>All Rights Reserved.
69          <br>《<a href="https://template-party.com/">Web Design:Template-Party</a>》
70    
71        </div>
72        </footer>
73        
74        
75  
76    </div>
77
78
79</body>
80
81</html>

                    </ul>
                </div>
            </div>


        </aside>

    </div>

    
    <footer class="footer">
        <div class="box9">
            Copyright©
      <a href="https://template-party.com/template/tp_beginner5/tp_beginner5_orange01/index.html">SAMPLE SITE</a>All Rights Reserved.
      <br>《<a href="https://template-party.com/">Web Design:Template-Party</a>》

    </div>
    </footer>
    
    

</div>

</body> </html>

CSS
1
2.side{
3    float: right;
4    width: 25%;
5}
6
7.s-framebox{
8    padding: 10px;
9    border: 1px solid #ccc;
10    background-color: #f4f4f4;
11    margin-bottom: 24px;
12    color: #666666;
13}
14
15.s-h4{
16    padding: 28px 10px;
17    border-top: 5px solid blue;
18    background: #eeeeee;
19    color: #666666;
20    font-weight: bold;
21
22}
23.s-list{
24    border-bottom: 1px solid #d2d2d2;
25}
26
27.s-list :hover{
28    background-color: white;
29}
30
31.s-list a{
32    text-decoration: none;
33    display: block;
34    padding: 15px;
35 
36}
37
38.s-list :hover a{
39    color: blue;
40}
41
42.s-logo{
43    width: 20%;
44    height: auto;
45    float: left;
46    margin-right: 5px;
47}
48
49.s-l-title{
50    font-size: 12px;
51    color: blue;
52}
53
54.s-l-descryption{
55    font-size: 12px;
56}
57
58
59.s-c-title{
60    font-weight: bold;
61    text-align: center;
62    line-height: 1.5;
63
64}
65.s-c-info{
66    font-size: 12px;
67    text-align: center;
68}
69
70.s-framebox2{
71    padding: 10px;
72    color: #666666;
73}
74
75.footer{
76    clear: both;
77    background-color: blue;
78}
79.box9 {
80    padding: 1em 1em;
81    margin: 0.1em 0;
82    text-align: center;
83    font-size: 12px;
84    line-height: 2;
85    color: white;
86  
87  }
88  .box9 a {
89    text-decoration: none;
90    color: white;  
91  }
92
93  .footer a:hover{
94      color: blue;
95      -webkit-transition: 0.3s ease-in-out;
96  -moz-transition: 0.3s ease-in-out;
97  -o-transition: 0.3s ease-in-out;
98  transition: 0.3s ease-in-out;
99  }
100
101
102
103
104@media screen and (max-width: 780px){
105    body{
106        font-size: 12px;
107        line-height: 1.5;
108    }
109    .main{
110        float: none;
111        width: auto;
112    }
113    .side{
114        float: none;
115        width: auto;
116    }
117
118
119}
120
121
122それから、レスポンシブを確認するため、ウインドウをだんだん小さくしていきますが、見本のものは、キレイになっていて、段々小さくして言っても、横幅のスクロールバー？とでもいいましょうか、が、左端にあり、見やすいのですが、私が作ったもので同じようにウインドウを小さくしていくと、スクロールバーが左端にないため、画面全体が表示されておらず、改めて、下にあるスクロールバーを左端に移動しなければなりません。（伝わっておりますでしょうか・・・？）こちらについても、ぜひ教えて下さいましたら幸いです。なにとぞ宜しくお願い申し上げます。
123
124
125補足です。そもそも見本には、最下部にある横のスクロールバー自体がありませんよね？そのため、レスポンシブにしてもそれに対応して、画面全体がちゃんと表示されているんです。でも、私が作ったものは全体が表示されていないために、横のスクロールバーが出てきてしまっているんです。どうか解決方法を教えて下さい。

Lhankor_Mhy

2021/02/09 06:34 編集

コードをご提示ください。ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1 --- 推測だけで言うと、たぶん、floatが原因のような気がします。

B_J

2021/02/09 06:38

ありがとうございます。文字数オーバーでコード入力できないのですが・・・泣

Lhankor_Mhy

2021/02/09 06:41

> 最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。そうすれば、貴方自身が現象と問題をより良く理解することにもつながるからです。 https://teratail.com/help/question-tips#questionTips3-5-1

Lhankor_Mhy

2021/02/09 06:44

おそらくご提示のページを見つけましたが、問題が再現しませんでした。 http://template-party.com/template/tp_biz30/tp_biz30_blue/

B_J

2021/02/09 06:45

できました、長くてすみませんがよろしくお願いします

B_J

2021/02/09 06:46

それを見ながら自分で勉強するということなので、そちらのページはもちろん問題は再現していません。それなので、困っているのです。。。

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

回答1件

ベストアンサー

模写元のページではこうなっています。

overflow: hiddenを試してみてはいかがですか？

css
1#sub .list {
2	position: relative;
3	overflow: hidden;
4	font-size: 11px;
5	line-height: 1.2;
6}
7#sub .list a {
8	text-decoration: none;
9	display: block;
10	overflow: hidden;
11	padding: 10px;
12	border-bottom: 1px solid #d2d2d2;
13}

参考：

overflow の値が visible 以外であるブロック要素

（略）
ブロック整形コンテキストは、浮動要素の配置設定 (float を参照) と解除 (clearを参照) にとって重要です。浮動要素の配置設定と解除の規則は、同一のブロック整形コンテキスト内にあるものにだけ適用されます。浮動要素は他のブロック整形コンテキストの内容のレイアウトには影響せず、 clear は同じブロック整形コンテキスト内の以前の浮動要素のみを解除します。
ブロック整形コンテキスト - 開発者ガイド | MDN

投稿2021/02/09 06:55

Lhankor_Mhy

総合スコア36928

B_J

2021/02/09 20:36

見事にできました。本当にありがとうございます。ちなみに、このコードってよく使いますか？すごく便利ですね。とても勉強になります。それから、レスポンシブを確認するため、ウインドウをだんだん小さくしていきますが、見本のものは、キレイになっていて、段々小さくして言っても、横幅のスクロールバー？とでもいいましょうか、が、左端にあり、見やすいのですが、私が作ったもので同じようにウインドウを小さくしていくと、スクロールバーが左端にないため、画面全体が表示されておらず、改めて、下にあるスクロールバーを左端に移動しなければなりません。（伝わっておりますでしょうか・・・？）こちらについても、ぜひ教えて下さいましたら幸いです。なにとぞ宜しくお願い申し上げます。

B_J

2021/02/09 20:38

補足です。そもそも見本には、最下部にある横のスクロールバー自体がありませんよね？そのため、レスポンシブにしてもそれに対応して、画面全体がちゃんと表示されているんです。でも、私が作ったものは全体が表示されていないために、横のスクロールバーが出てきてしまっているんです。どうか解決方法を教えて下さい。

B_J

2021/02/09 21:18

すみません、.container{width:98%}で自己解決しました。

Lhankor_Mhy

2021/02/10 03:16

ご解決されて何よりです。 --- > ちなみに、このコードってよく使いますか？いえ、float を使って横並びにする方法自体が時代遅れです。ですので、大変失礼ながら、あまり良い教材とは言えないと思います。10年前ならばともかく、2021年にフロートレイアウトを採用する理由はありませんし、学ぶ必要もないでしょう。もちろん、昔からあるサイトをメンテナンスするために知識として必要になりますが、これはもっと技術が向上してからでもいいと思います。そのような案件を受けない限り必要がないのですから、なんだったら死ぬまで知る必要がないかもしれません。 --- なお、 overflow: hidden よりも、 display: flow-root で対処する方がイマドキですし弊害も少ないのですがが、IE11が対応していないので案件によってはこっちを採用することもあるでしょう。

B_J

2021/02/10 13:56

ありがとうございます！ floatは死ぬまで学ぶ必要が無いですか！やはりflex-boxですか？ display: flow-rootは初耳でした！overflow: hiddenの代わりに入力してみたら、全く同じようにできました！ありがとうございます！新しい知識が身につきました！IE11対応非対応の場合以外、どのように使い分けするのか、ググった先を見ても、良く分からないのですが・・・素人に分かるように教えて下さいませんか？

Lhankor_Mhy

2021/02/12 03:18

> やはりflex-boxですか？そうですね、フレックスとグリッドとテーブルを使い分ける方がいいでしょう。 --- > IE11対応非対応の場合以外、どのように使い分けするのか回答にも書きましたが、これは「ブロック整形コンテキスト」を生成することによって防げます。overflow: hidden は、「ブロック整形コンテキスト」を生成する方法の一つですが副作用があるので、できれば display: flow-root を使いたいのです。ただ、IE11は display: flow-root に対応していないので、IE11対応が必要な場合は仕方なしに代わりに overflow: hidden や column-count: 1 なんかを使います。

B_J

2021/02/12 06:31

ありがとうございます。とても勉強になります。いろいろと方法があるのですね！正解が一つではないプログラミング。魅力です。たくさん頭に入れすぎても初心者の私には混乱してしまうので、まだ早いと思うので頭の片隅に入れておきます。overflow: hiddenとdisplay: flow-root、覚えておきます！ご親切に色々とありがとうございました。フォローさせてください。

Lhankor_Mhy

2021/02/12 08:47

フォローバックはしないようにしてるのでお返しできませんが、それでよろしければ。回答依頼は受け付ける設定にしていますので、ご遠慮なくご依頼ください。 CSSのご質問でしたら多少お役に立てるかと思います。

B_J

2021/02/16 03:38

ありがとうございます。申し訳ありません！レスポンシブにして画面を小さくしていくと、見本はきれいに全体が表示されながら小さくなっていくのですが、私の作ったものですと、全体が表示されず、下にバーが出てきて、やはりズレてしまい、全体がひょうじされていません。　この場合どうしたらいいですか？どうか教えて下さい。

Lhankor_Mhy

2021/02/16 03:44

ご質問の内容が当初のものからずれてきていると思いますので、別にご質問を建てられてはいかがでしょうか。

B_J

2021/02/16 04:27

ありがとうございます。そのようにさせていただきました。よろしうお願い致します。

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