<div>タグでのレイアウトがうまくいきません

添付画像のようなレイアウトにしたいのですが、

<div class="white">　<div class="gray">　でうまく囲えていないようで、実現できません。

cssクラス：　block を消すとうまくいくので、
その中の何かが作用してしまっているのではないかと思うのですが、
HTML、cssを勉強し始めたばかりのため、原因がわからず混乱しています。

拙い質問文で誠に恐縮ですが、お力添えいただけましたら幸いです。
よろしくお願いいたします。

HTML5、GoogleChromeを使用しています。

HTML
1  <body>
2  <header>
3      <div class="container">
4        <div class="header-left">
5          <img class="logo" src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/imgrc0100293788.jpg">
6        </div>
7        <div class="header-right">
8          <ul>
9            <li><a href="#" class="login">HOME</a><li>
10            <li><a href="#" class="login">ABOUT</a><li>
11            <li><a href="#" class="login">SNS</a><li>
12            <li><a href="#" class="login">BACK NUMBER</a><li>
13            <li><a href="#" class="login">ACCESS</a><li>
14          </ul>
15        </div>
16      </div>
17    </header>
18    
19   <div class="wrapper">
20      <div class="container">
21      <img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/top_05.jpg">
22      </div>
23      
24      <div class="white">
25      
26        <h1>INFORMATION</h1>
27      
28        <p>08/29 - ホームページをリニューアルしました</p>
29        <p>08/29 - ホームページをリニューアルしました</p>
30        <p>08/29 - ホームページをリニューアルしました</p>
31      </div>
32      
33      <div class="white">
34      
35        <h1>NEWS</h1>
36        <div></div>
37        <a href="#" class="btn-flat-border">詳しくはこちら</a>
38      </div>
39      
40      <div class="gray">
41      
42        <h1>ABOUT</h1>
43        <h2>「 地方にも、本物を。」</h2>
44      
45        <div class="video-pc">
46        <iframe width="1000" height="600" src="https://www.youtube.com/embed/oips6DAb_jc?autoplay=1&start=1&fs=0&modestbranding=1&rel=0&mute=1" 
47        frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
48        </div>
49        <span>ああああああああああああああああああああああああああああああああああ
50      　<br>ああああああああああああああああああああああああああああああああああ
51      　<br>ああああああああああああああああああああああああああああああああああ
52      　<br>ああああああああああああああああああああああああああああああああああ
53      　</span>
54      </div>
55      
56      
57      <div class="white">
58      
59        <h1>BACK NUMBER</h1>
60        <div class="contents">     
61        <div class="block">
62        <a herf="#"><img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/imgrc0100293788.jpg"></a>
63        </div>
64        <div class="block">
65        <a herf="#"><img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/imgrc0100293788.jpg"></a>
66        </div>
67        <div class="block">
68        <a herf="#"><img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/imgrc0100293788.jpg"></a>
69        </div>
70        <div class="block">
71        <a herf="#"><img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/imgrc0100293788.jpg"></a>
72        </div>
73        </div>
74        
75      </div>
76
77
78      <div class="gray">
79        <h1>SNS</h1>
80        <h2>各種SNSにて、最新情報を配信中！</h2>
81        
82        <div class="contents">
83        <div class="block">
84        <a herf="#"><img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/imgrc0100293788.jpg"></a>
85        <p class="txt-contents">aaaaaaaaaaaaaaaaaaaaa</p>
86        </div>
87        
88        <div class="block">
89        <a herf="#"><img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/imgrc0100293788.jpg"></a>
90        <p class="txt-contents">aaaaaaaaaaaaaaaaaaaaa</p>
91        </div>
92        
93        <div class="block">
94        <a herf="#"><img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/imgrc0100293788.jpg"></a>
95        <p class="txt-contents">aaaaaaaaaaaaaaaaaaaaaaa</p>
96        </div>
97        </div>
98      </div>
99
100
101      <div class="white">      
102             
103        <h1>ACCESS</h1>
104        <div class="contents">
105        <img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/top_05.jpg" width="500">
106        </div>
107        <p>あああああああああああああああああああああああああああああああああああああああああ</p>
108      </div>
109
110
111
112
113
114
115  </body>
116  
117</html>

css
1<style>
2
3body {
4  margin: 0;
5  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
6  color:#333;
7}
8
9a {
10  text-decoration: none;
11}
12
13header {
14  height: 80px;
15  width: 100%;
16  background-color: rgb(255,255,255,0.8);
17  position: fixed;
18  top: 0;
19  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
20  z-index: 10;
21}
22
23header a {
24  color:#333;
25  }
26
27header a:hover {
28  color:#cacaca;
29  transition: all 0.3s;
30  }
31
32.header-left {
33  float: left;
34}
35
36.header-right {
37  float: right;
38  transition: all 0.5s;
39  font-size: 14px;
40}
41
42li {
43  list-style: none;
44  float: left;
45  padding: 20px 8px;
46  letter-spacing: 0.15em
47  }
48
49.header-right:hover {
50  background-color: rgba(255, 255, 255, 0.5);
51}
52
53.logo {
54 margin-top: 10px;
55 width: 60px;
56 }
57
58.wrapper {
59  text-align: center;
60  margin: 0 auto;
61}
62
63.container {
64  width: 1400px;
65  padding: 0 15px;
66  margin: 0 auto;
67}
68
69.contents {
70  width: 1000px;
71  margin: 0 auto;
72  text-align: center;
73  }
74
75.block {
76  float: left;
77  width: 33%;
78  margin-bottom: 30px;
79}
80
81.txt-contents {
82  width: 80%;
83  display: inline-block;
84  margin-top: 20px;
85  font-size: 12px;
86  color: #696969;
87}
88  
89
90.white {
91  background-color: #fff;
92  padding: 50px 0;
93  text-align: center;
94  }
95
96.gray {
97  background-color: #f0f0f0;
98  padding: 50px 0;
99  text-align: center;
100  }
101  
102
103h1 {
104  font-size: 24px;
105  letter-spacing: 0.18em;
106  position: relative;
107  display: inline-block;
108  margin-bottom: 1.0em;
109  }
110  
111h1:before {
112  content: '';
113  position: absolute;
114  bottom: -10px;
115  display: inline-block;
116  width: 40px;
117  height: 5px;
118  left: 50%;
119  -webkit-transform: translateX(-50%);
120  transform: translateX(-50%);
121  background-color: black;
122  border-radius: 2px;
123}
124
125h2 {
126  font-size: 18px;
127  letter-spacing: 0.3em;
128  margin-bottom: 1em;
129  }
130  
131.btn-flat-border {
132  display: inline-block;
133  padding: 0.3em 2em;
134  text-decoration: none;
135  color: #333333;
136  border: solid 2px #696969;
137  border-radius: 30px;
138  transition: .4s;
139}
140
141.btn-flat-border:hover {
142  background: #696969;
143  color: white;
144}
145
146.video-pc {
147  margin: 30px 0 ;
148  }
149
150</style>

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

回答1件

ベストアンサー

横並びのためにfloat: left;しているのに、回り込みの解除（clear）をしていないのが原因ではないでしょうか。

いくつか方法はありますが、例として

html
1    <div class="white">
2      <h1>BACK NUMBER</h1>
3      <div class="contents clearfix"><!-- .blockを囲う要素に.clearfixを追加（CSSで指定するクラスと同じ名前なら何でもいい） -->
4        <div class="block">
5          <a herf="#"><img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/imgrc0100293788.jpg"></a>
6        </div>
7        <div class="block">
8          <a herf="#"><img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/imgrc0100293788.jpg"></a>
9        </div>
10        <div class="block">
11          <a herf="#"><img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/imgrc0100293788.jpg"></a>
12        </div>
13        <div class="block">
14          <a herf="#"><img src="https://image.rakuten.co.jp/woody-h/cabinet/07398498/imgrc0100293788.jpg"></a>
15        </div>
16      </div>
17    </div>
18

としておき、

css
1.clearfix::after {
2  content: "";
3  display: block;
4  clear: both;
5}

とか、

css
1.clearfix {
2  overflow:hidden;
3}

とか書くと回り込みが解除される形になります。

最近は横並びにするにはfloatよりflexboxを使うことが多いようなので、そちらも検討してください。
CSS Flexbox の基礎知識と使い方をやさしく解説-coliss
日本語対応！CSS Flexboxのチートシートを作ったので配布します-Webクリエイターボックス

投稿2020/08/31 05:52

dit.

総合スコア3235

_li____nu

2020/09/01 01:15

サンプルコードまで書いていただいて…ご丁寧にありがとうございます！！ flexboxについても勉強します！本当にありがとうございました！

dit.

2020/09/01 01:30

解決したのであればよかったです。初めはFlexboxも難しく感じるかもしれませんが、慣れると楽なのでぜひ。あ、「header-right」の所の各liがすべて閉じられてないのでご確認ください。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

<div>タグでのレイアウトがうまくいきません

関連した質問