teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問cssのfloatとclearfixについて

編集履歴

質問編集履歴

4

文の校正

2021/05/20 12:58

投稿

doradora2525
doradora2525

スコア3

test CHANGED
File without changes
test CHANGED
@@ -150,15 +150,15 @@
150
150
 
151
151
 
152
152
 
153
- ul.main liにfloat:leftの設定がされていますのでメインメニューとサブメニューのliにfloat:left
153
+ ul.main liにfloat:leftの設定がされていますのでメインメニューとサブメニューのliにfloat:leftが設定されています。
154
154
 
155
- ブラウザで表示してみるとサブメニューが横並びにならないのは親要素のliの幅とメニューliが同じなため1つしか収まらないので縦に並ぶようになっているのだと思います。
155
+ ブラウザで表示してみるとサブメニューが横並びにならないのは親要素のliの幅とメニューliが同じなため1つしか収まらないので縦に並ぶようになっているためでしょうか。
156
156
 
157
157
 
158
158
 
159
159
  次に、clearfixの説明があり「このままだとメニューがどんどん回り込んでしまうので以下のように
160
160
 
161
- clearfix手法を用いる」と説明されているのですがメニューがどんどん回り込むという表現は多分メインメニューの領域に対してサブメニューが回り込むという表現だと思うのですが。
161
+ clearfix手法を用いる」と説明されているのですがメニューがどんどん回り込むという表現は多分メインメニューの領域に対してサブメニューが回り込むという表現だと思うのですが、書籍にある下記cssを実装しなくてサブメニューがメインメニューに重なりませんでした。
162
162
 
163
163
  ```
164
164
 
@@ -174,7 +174,7 @@
174
174
 
175
175
  ```
176
176
 
177
- 書籍にある上記cssを実装しなくてサブメニューがメインメニューに重なりませんでした。
177
+
178
178
 
179
179
  floatを指定した要素は浮いてしまうため親要素の高さが認識できなくなる問題があるのでclearfix実装しないとul.main、ul.subの高さは0になってしまうと思うのですが（実際にツールで確認すると高さは0になっている）
180
180
 
@@ -184,7 +184,7 @@
184
184
 
185
185
  上記の書籍の説明が「このままだとメニューがどんどん回り込んでしまうので以下のように
186
186
 
187
- clearfix手法を用いる」とありますがメインメニューの下に何かしらのコンテンツを記述する場合に必要になるのではないでしょうか。
187
+ clearfix手法を用いる」とありますがサブメニューに対して必要な訳ではなくメインメニューの下に何かしらのコンテンツを記述する場合に必要になるのではないでしょうか。
188
188
 
189
189
 
190
190
 

3

校正

2021/05/20 12:57

投稿

doradora2525
doradora2525

スコア3

test CHANGED
File without changes
test CHANGED
@@ -150,178 +150,6 @@
150
150
 
151
151
 
152
152
 
153
-
154
-
155
- 今更ながら、jqueryをある書籍にて学習しているのですがCSSについてわからないことがあるのでどなたかご教授ください。
156
-
157
- 階層型メニューを制作する学習にて
158
-
159
- htmlは
160
-
161
- ```
162
-
163
- <div class="container">
164
-
165
- <ul class="main">
166
-
167
- <li>
168
-
169
- <a href="#">TOP</a>
170
-
171
- </li>
172
-
173
- <li>
174
-
175
- <a href="#">GALLERY</a>
176
-
177
- <ul class="sub">
178
-
179
- <li><a href="#">PICTURE</a></li>
180
-
181
- <li><a href="#">PHOTO</a></li>
182
-
183
- <li><a href="#">OTHER</a></li>
184
-
185
- </ul>
186
-
187
- </li>
188
-
189
- <li>
190
-
191
- <a href="#">GUIDE</a>
192
-
193
- <ul class="sub">
194
-
195
- <li><a href="#">FAQ</a></li>
196
-
197
- <li><a href="#">FORUM</a></li>
198
-
199
- </ul>
200
-
201
- </li>
202
-
203
- <li>
204
-
205
- <a href="#">OTHER</a>
206
-
207
- <ul class="sub">
208
-
209
- <li><a href="#">BLOG</a></li>
210
-
211
- <li><a href="#">TWITTER</a></li>
212
-
213
- <li><a href="#">FACEBOOK</a></li>
214
-
215
- </ul>
216
-
217
- </li>
218
-
219
- <li>
220
-
221
- <a href="#">ABOUT</a>
222
-
223
- <ul class="sub">
224
-
225
- <li><a href="#">COMPANY</a></li>
226
-
227
- <li><a href="#">RECRUIT</a></li>
228
-
229
- <li><a href="#">CONTUCT US</a></li>
230
-
231
- </ul>
232
-
233
- </li>
234
-
235
- </ul>
236
-
237
- </div>
238
-
239
- ```
240
-
241
- 途中ですが2段階のメニュー画面を制作中です。
242
-
243
- css
244
-
245
- ```
246
-
247
- .container ul{
248
-
249
- list-style:none;
250
-
251
- padding:0;
252
-
253
- }
254
-
255
-
256
-
257
- .container{
258
-
259
- width:900px;
260
-
261
- margin:0 auto;
262
-
263
- }
264
-
265
-
266
-
267
- ul.main{
268
-
269
- width:750px;
270
-
271
- margin:0 auto;
272
-
273
- }
274
-
275
-
276
-
277
- ul.main li{
278
-
279
- width:150px;
280
-
281
- height:38px;
282
-
283
- text-align: center;
284
-
285
- line-height:38px;
286
-
287
- float:left;
288
-
289
- background-color: hotpink;
290
-
291
- background-image: url("../images/01_02/btn_off.png");
292
-
293
- }
294
-
295
-
296
-
297
- ul.main li a{
298
-
299
- display:block;
300
-
301
- 　　height:100%;
302
-
303
- width:100%;
304
-
305
- font-weight:bold;
306
-
307
- text-decoration: none;
308
-
309
- line-height:38px;
310
-
311
- text-indent:30px;
312
-
313
- color:#CFDF85;
314
-
315
- }
316
-
317
-
318
-
319
- ```
320
-
321
-
322
-
323
- cssも途中の段階ですがここまでで質問があります。
324
-
325
153
  ul.main liにfloat:leftの設定がされていますのでメインメニューとサブメニューのliにfloat:left
326
154
 
327
155
  ブラウザで表示してみるとサブメニューが横並びにならないのは親要素のliの幅とメニューliが同じなため1つしか収まらないので縦に並ぶようになっているのだと思います。

2

誤字

2021/05/20 12:50

投稿

doradora2525
doradora2525

スコア3

test CHANGED
File without changes
test CHANGED
@@ -72,6 +72,160 @@
72
72
 
73
73
  <li><a href="#">RECRUIT</a></li>
74
74
 
75
+ <li><a href="#">CONTACT US</a></li>
76
+
77
+ </ul>
78
+
79
+ </li>
80
+
81
+ </ul>
82
+
83
+ </div>
84
+
85
+ ```
86
+
87
+ 途中ですが2段階のメニュー画面を制作中です。
88
+
89
+ css
90
+
91
+ ```
92
+
93
+ .container ul{
94
+
95
+ list-style:none;
96
+
97
+ padding:0;
98
+
99
+ }
100
+
101
+
102
+
103
+ .container{
104
+
105
+ width:900px;
106
+
107
+ margin:0 auto;
108
+
109
+ }
110
+
111
+
112
+
113
+ ul.main li{
114
+
115
+ width:150px;
116
+
117
+ height:38px;
118
+
119
+ text-align: center;
120
+
121
+ line-height:38px;
122
+
123
+ float:left;
124
+
125
+ background-color: hotpink;
126
+
127
+ background-image: url("../images/01_02/btn_off.png");
128
+
129
+ }
130
+
131
+
132
+
133
+ ul.main li > a{
134
+
135
+ display: block;
136
+
137
+ text-decoration: none;
138
+
139
+ color:#fff;
140
+
141
+ }
142
+
143
+
144
+
145
+ ```
146
+
147
+
148
+
149
+ cssも途中の段階ですがここまでで質問があります。
150
+
151
+
152
+
153
+
154
+
155
+ 今更ながら、jqueryをある書籍にて学習しているのですがCSSについてわからないことがあるのでどなたかご教授ください。
156
+
157
+ 階層型メニューを制作する学習にて
158
+
159
+ htmlは
160
+
161
+ ```
162
+
163
+ <div class="container">
164
+
165
+ <ul class="main">
166
+
167
+ <li>
168
+
169
+ <a href="#">TOP</a>
170
+
171
+ </li>
172
+
173
+ <li>
174
+
175
+ <a href="#">GALLERY</a>
176
+
177
+ <ul class="sub">
178
+
179
+ <li><a href="#">PICTURE</a></li>
180
+
181
+ <li><a href="#">PHOTO</a></li>
182
+
183
+ <li><a href="#">OTHER</a></li>
184
+
185
+ </ul>
186
+
187
+ </li>
188
+
189
+ <li>
190
+
191
+ <a href="#">GUIDE</a>
192
+
193
+ <ul class="sub">
194
+
195
+ <li><a href="#">FAQ</a></li>
196
+
197
+ <li><a href="#">FORUM</a></li>
198
+
199
+ </ul>
200
+
201
+ </li>
202
+
203
+ <li>
204
+
205
+ <a href="#">OTHER</a>
206
+
207
+ <ul class="sub">
208
+
209
+ <li><a href="#">BLOG</a></li>
210
+
211
+ <li><a href="#">TWITTER</a></li>
212
+
213
+ <li><a href="#">FACEBOOK</a></li>
214
+
215
+ </ul>
216
+
217
+ </li>
218
+
219
+ <li>
220
+
221
+ <a href="#">ABOUT</a>
222
+
223
+ <ul class="sub">
224
+
225
+ <li><a href="#">COMPANY</a></li>
226
+
227
+ <li><a href="#">RECRUIT</a></li>
228
+
75
229
  <li><a href="#">CONTUCT US</a></li>
76
230
 
77
231
  </ul>
@@ -110,6 +264,16 @@
110
264
 
111
265
 
112
266
 
267
+ ul.main{
268
+
269
+ width:750px;
270
+
271
+ margin:0 auto;
272
+
273
+ }
274
+
275
+
276
+
113
277
  ul.main li{
114
278
 
115
279
  width:150px;
@@ -130,13 +294,23 @@
130
294
 
131
295
 
132
296
 
133
- ul.main li > a{
297
+ ul.main li a{
134
-
298
+
135
- display: block;
299
+ display:block;
300
+
301
+ 　　height:100%;
302
+
303
+ width:100%;
304
+
305
+ font-weight:bold;
136
306
 
137
307
  text-decoration: none;
138
308
 
309
+ line-height:38px;
310
+
311
+ text-indent:30px;
312
+
139
- color:#fff;
313
+ color:#CFDF85;
140
314
 
141
315
  }
142
316
 
@@ -148,198 +322,24 @@
148
322
 
149
323
  cssも途中の段階ですがここまでで質問があります。
150
324
 
151
-
152
-
153
-
154
-
155
- 今更ながら、jqueryをある書籍にて学習しているのですがCSSについてわからないことがあるのでどなたかご教授ください。
325
+ ul.main liにfloat:leftの設定がされていますのでメインメニューとサブメニューのliにfloat:left
326
+
156
-
327
+ ブラウザで表示してみるとサブメニューが横並びにならないのは親要素のliの幅とメニューliが同じなため1つしか収まらないので縦に並ぶようになっているのだと思います。
328
+
329
+
330
+
157
- 階層型メニューを制作する学習にて
331
+ 次に、clearfixの説明があり「このままだとメニューがどんどん回り込んでしまうので以下のように
158
-
332
+
159
- htmlは
333
+ clearfix手法を用いる」と説明されているのですがメニューがどんどん回り込むという表現は多分メインメニューの領域に対してサブメニューが回り込むという表現だと思うのですが。
160
-
334
+
161
- ```
335
+ ```
162
-
163
- <div class="container">
336
+
164
-
165
- <ul class="main">
166
-
167
- <li>
168
-
169
- <a href="#">TOP</a>
170
-
171
- </li>
172
-
173
- <li>
174
-
175
- <a href="#">GALLERY</a>
176
-
177
- <ul class="sub">
178
-
179
- <li><a href="#">PICTURE</a></li>
180
-
181
- <li><a href="#">PHOTO</a></li>
182
-
183
- <li><a href="#">OTHER</a></li>
184
-
185
- </ul>
186
-
187
- </li>
188
-
189
- <li>
190
-
191
- <a href="#">GUIDE</a>
192
-
193
- <ul class="sub">
194
-
195
- <li><a href="#">FAQ</a></li>
196
-
197
- <li><a href="#">FORUM</a></li>
198
-
199
- </ul>
200
-
201
- </li>
202
-
203
- <li>
204
-
205
- <a href="#">OTHER</a>
206
-
207
- <ul class="sub">
208
-
209
- <li><a href="#">BLOG</a></li>
210
-
211
- <li><a href="#">TWITTER</a></li>
212
-
213
- <li><a href="#">FACEBOOK</a></li>
214
-
215
- </ul>
216
-
217
- </li>
218
-
219
- <li>
220
-
221
- <a href="#">ABOUT</a>
222
-
223
- <ul class="sub">
224
-
225
- <li><a href="#">COMPANY</a></li>
226
-
227
- <li><a href="#">RECRUIT</a></li>
228
-
229
- <li><a href="#">CONTUCT US</a></li>
230
-
231
- </ul>
232
-
233
- </li>
234
-
235
- </ul>
236
-
237
- </div>
238
-
239
- ```
240
-
241
- 途中ですが2段階のメニュー画面を制作中です。
242
-
243
- css
244
-
245
- ```
246
-
247
- .container ul{
248
-
249
- list-style:none;
250
-
251
- padding:0;
252
-
253
- }
254
-
255
-
256
-
257
- .container{
258
-
259
- width:900px;
260
-
261
- margin:0 auto;
262
-
263
- }
264
-
265
-
266
-
267
- ul.main{
268
-
269
- width:750px;
270
-
271
- margin:0 auto;
272
-
273
- }
274
-
275
-
276
-
277
- ul.main li{
278
-
279
- width:150px;
280
-
281
- height:38px;
282
-
283
- text-align: center;
284
-
285
- line-height:38px;
286
-
287
- float:left;
288
-
289
- background-color: hotpink;
290
-
291
- background-image: url("../images/01_02/btn_off.png");
292
-
293
- }
294
-
295
-
296
-
297
- ul.main li a{
337
+ ul.main::after{
338
+
339
+ content:"";
298
340
 
299
341
  display:block;
300
342
 
301
- 　　height:100%;
302
-
303
- width:100%;
304
-
305
- font-weight:bold;
306
-
307
- text-decoration: none;
308
-
309
- line-height:38px;
310
-
311
- text-indent:30px;
312
-
313
- color:#CFDF85;
314
-
315
- }
316
-
317
-
318
-
319
- ```
320
-
321
-
322
-
323
- cssも途中の段階ですがここまでで質問があります。
324
-
325
- ul.main liにfloat:leftの設定がされていますのでメインメニューとサブメニューのliにfloat:left
326
-
327
- ブラウザで表示してみるとサブメニューが横並びにならないのは親要素のliの幅とメニューliが同じなため1つしか収まらないので縦に並ぶようになっているのだと思います。
328
-
329
-
330
-
331
- 次に、clearfixの説明があり「このままだとメニューがどんどん回り込んでしまうので以下のように
332
-
333
- clearfix手法を用いる」と説明されているのですがメニューがどんどん回り込むという表現は多分メインメニューの領域に対してサブメニューが回り込むという表現だと思うのですが。
334
-
335
- ```
336
-
337
- ul.main::after{
338
-
339
- content:"";
340
-
341
- display:block;
342
-
343
343
  clear:both;
344
344
 
345
345
  }

1

追記

2021/05/20 10:43

投稿

doradora2525
doradora2525

スコア3

test CHANGED
File without changes
test CHANGED
@@ -147,3 +147,217 @@
147
147
 
148
148
 
149
149
  cssも途中の段階ですがここまでで質問があります。
150
+
151
+
152
+
153
+
154
+
155
+ 今更ながら、jqueryをある書籍にて学習しているのですがCSSについてわからないことがあるのでどなたかご教授ください。
156
+
157
+ 階層型メニューを制作する学習にて
158
+
159
+ htmlは
160
+
161
+ ```
162
+
163
+ <div class="container">
164
+
165
+ <ul class="main">
166
+
167
+ <li>
168
+
169
+ <a href="#">TOP</a>
170
+
171
+ </li>
172
+
173
+ <li>
174
+
175
+ <a href="#">GALLERY</a>
176
+
177
+ <ul class="sub">
178
+
179
+ <li><a href="#">PICTURE</a></li>
180
+
181
+ <li><a href="#">PHOTO</a></li>
182
+
183
+ <li><a href="#">OTHER</a></li>
184
+
185
+ </ul>
186
+
187
+ </li>
188
+
189
+ <li>
190
+
191
+ <a href="#">GUIDE</a>
192
+
193
+ <ul class="sub">
194
+
195
+ <li><a href="#">FAQ</a></li>
196
+
197
+ <li><a href="#">FORUM</a></li>
198
+
199
+ </ul>
200
+
201
+ </li>
202
+
203
+ <li>
204
+
205
+ <a href="#">OTHER</a>
206
+
207
+ <ul class="sub">
208
+
209
+ <li><a href="#">BLOG</a></li>
210
+
211
+ <li><a href="#">TWITTER</a></li>
212
+
213
+ <li><a href="#">FACEBOOK</a></li>
214
+
215
+ </ul>
216
+
217
+ </li>
218
+
219
+ <li>
220
+
221
+ <a href="#">ABOUT</a>
222
+
223
+ <ul class="sub">
224
+
225
+ <li><a href="#">COMPANY</a></li>
226
+
227
+ <li><a href="#">RECRUIT</a></li>
228
+
229
+ <li><a href="#">CONTUCT US</a></li>
230
+
231
+ </ul>
232
+
233
+ </li>
234
+
235
+ </ul>
236
+
237
+ </div>
238
+
239
+ ```
240
+
241
+ 途中ですが2段階のメニュー画面を制作中です。
242
+
243
+ css
244
+
245
+ ```
246
+
247
+ .container ul{
248
+
249
+ list-style:none;
250
+
251
+ padding:0;
252
+
253
+ }
254
+
255
+
256
+
257
+ .container{
258
+
259
+ width:900px;
260
+
261
+ margin:0 auto;
262
+
263
+ }
264
+
265
+
266
+
267
+ ul.main{
268
+
269
+ width:750px;
270
+
271
+ margin:0 auto;
272
+
273
+ }
274
+
275
+
276
+
277
+ ul.main li{
278
+
279
+ width:150px;
280
+
281
+ height:38px;
282
+
283
+ text-align: center;
284
+
285
+ line-height:38px;
286
+
287
+ float:left;
288
+
289
+ background-color: hotpink;
290
+
291
+ background-image: url("../images/01_02/btn_off.png");
292
+
293
+ }
294
+
295
+
296
+
297
+ ul.main li a{
298
+
299
+ display:block;
300
+
301
+ 　　height:100%;
302
+
303
+ width:100%;
304
+
305
+ font-weight:bold;
306
+
307
+ text-decoration: none;
308
+
309
+ line-height:38px;
310
+
311
+ text-indent:30px;
312
+
313
+ color:#CFDF85;
314
+
315
+ }
316
+
317
+
318
+
319
+ ```
320
+
321
+
322
+
323
+ cssも途中の段階ですがここまでで質問があります。
324
+
325
+ ul.main liにfloat:leftの設定がされていますのでメインメニューとサブメニューのliにfloat:left
326
+
327
+ ブラウザで表示してみるとサブメニューが横並びにならないのは親要素のliの幅とメニューliが同じなため1つしか収まらないので縦に並ぶようになっているのだと思います。
328
+
329
+
330
+
331
+ 次に、clearfixの説明があり「このままだとメニューがどんどん回り込んでしまうので以下のように
332
+
333
+ clearfix手法を用いる」と説明されているのですがメニューがどんどん回り込むという表現は多分メインメニューの領域に対してサブメニューが回り込むという表現だと思うのですが。
334
+
335
+ ```
336
+
337
+ ul.main::after{
338
+
339
+ content:"";
340
+
341
+ display:block;
342
+
343
+ clear:both;
344
+
345
+ }
346
+
347
+ ```
348
+
349
+ 書籍にある上記cssを実装しなくてサブメニューがメインメニューに重なりませんでした。
350
+
351
+ floatを指定した要素は浮いてしまうため親要素の高さが認識できなくなる問題があるのでclearfix実装しないとul.main、ul.subの高さは0になってしまうと思うのですが（実際にツールで確認すると高さは0になっている）
352
+
353
+ サブメニューがメインメニューに重ならないのはul.subの親要素がmainのliでsubのulの前にブロック要素に指定されていて高さも指定されているa要素の後に記述されているためメインメニューに重ならないのではないかと解釈したのですが自分の考えは間違っているのでしょうか。
354
+
355
+
356
+
357
+ 上記の書籍の説明が「このままだとメニューがどんどん回り込んでしまうので以下のように
358
+
359
+ clearfix手法を用いる」とありますがメインメニューの下に何かしらのコンテンツを記述する場合に必要になるのではないでしょうか。
360
+
361
+
362
+
363
+ cssも学習したてなので分からない事だらけなのでどなたかご指導いただけませんでしょうか。