teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

cssの修正

2016/02/06 21:22

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -111,9 +111,9 @@
111
111
  </article>
112
112
  ```
113
113
 
114
- ```css3
114
+ ```css
115
115
  @charset 'UTF-8';
116
- /* Theme Name:w*//* WordPress Required Classes */
116
+
117
117
  @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
118
118
  *{
119
119
  margin: 0;
@@ -126,44 +126,7 @@
126
126
  box-sizing: border-box;
127
127
  }
128
128
 
129
- .clearfix:before,.clearfix:after { content: ''; display: table; }
130
- .clearfix:after{ clear: both; }
131
- .clearfix { *zoom: 1; }
132
129
 
133
- .aligncenter {
134
- display: block;
135
- margin-left: auto;
136
- margin-right: auto;
137
- }
138
- .alignleft {
139
- float: left;
140
- }
141
-
142
- .alignleft:after{
143
- clear: both;
144
- content: '';
145
- dispray: block;
146
- }
147
-
148
- .alignright {
149
- float: right;
150
- }
151
-
152
- .alignright:after{
153
- clear: both;
154
- content: '';
155
- dispray: block;
156
- }
157
-
158
-
159
- .wp-caption {
160
- }
161
- .wp-caption-text {
162
- }
163
- .gallery-caption {
164
- }
165
-
166
-
167
130
  body{
168
131
  background-image: url(images/dd.gif);
169
132
  }
@@ -178,7 +141,7 @@
178
141
  .wrap:after{
179
142
  clear: both;
180
143
  content: '';
181
- dispray: block;
144
+ display: block;
182
145
  }
183
146
 
184
147
 
@@ -236,7 +199,7 @@
236
199
  nav:after{
237
200
  clear: both;
238
201
  content: '';
239
- dispray: block;
202
+ display: block;
240
203
  }
241
204
 
242
205
  .menu ul{
@@ -257,7 +220,7 @@
257
220
  .menu ul li:after{
258
221
  clear: both;
259
222
  content: '';
260
- dispray: block;
223
+ display: block;
261
224
  }
262
225
 
263
226
  .menu ul li a{
@@ -285,24 +248,7 @@
285
248
  }
286
249
 
287
250
  /** content **/
288
- #content_view_1{
289
- width: 100%;
290
- height: auto;
291
- padding: 10px 5px;
292
- margin: 0 auto;
293
- /** border-style: solid; **/
294
- /** border-width: 1px; **/
295
- float: left;
296
- background-color: #FFF;
297
- position: relative;
298
- }
299
251
 
300
- #content_view_1:after{
301
- clear: both;
302
- content: '';
303
- dispray: block;
304
- }
305
-
306
252
  #content_view_2{
307
253
  width: 80%;
308
254
  height: auto;
@@ -318,12 +264,19 @@
318
264
  #content_view_2:after{
319
265
  clear: both;
320
266
  content: '';
321
- dispray: block;
267
+ display: block;
322
268
  }
323
269
 
270
+ #content_view,#content_view_2 h1{
271
+ padding-bottom: 10px;
272
+ }
324
273
 
274
+ #content_view,#content_view_2 p{
275
+ padding-bottom: 5px;
276
+ }
277
+
325
278
  .news{
326
- width: 100%;
279
+ width: 80%;
327
280
  padding: 10px 0;
328
281
  }
329
282
  ul.news{
@@ -352,8 +305,9 @@
352
305
 
353
306
  .post{
354
307
  width: 100%;
355
- height: auto;
308
+ height: 100%;
356
- /** margin: 0 auto; **/
309
+ margin: 0 auto;
310
+ padding-left: 5px;
357
311
  content: '';
358
312
  display: block;
359
313
  clear: both;
@@ -363,97 +317,52 @@
363
317
  list-style: none;
364
318
  }
365
319
 
366
- .img_tr{
320
+ .title_wrap{
367
- width: 30%;
321
+ width: 100%;
368
- height: auto;
322
+ height: 100%;
323
+ margin-bottom: 20px;
369
324
  float: left;
325
+ color: #FFF;
370
- padding-top: 5px;
326
+ background-color: #30393a;
371
- /** margin-left: 40px; **/
372
327
  }
373
328
 
374
- .img_tr:after{
329
+ .title_wrap:after{
375
330
  clear: both;
376
331
  content: '';
377
- dispray: block;
332
+ display: block;
378
333
  }
379
334
 
335
+ .title_wrap h1{
336
+ color: #FFF;
337
+ }
380
338
 
381
- .img_tr img{
339
+ .cat a{
382
- width: 100%;
340
+ color: #FFF;
383
- height: auto;
384
- margin: 0 auto;
385
- }
341
+ }
386
342
 
387
- .content_info{
343
+ .cat a:hover{
388
- width: 70%;
389
- height: auto;
390
- padding-left: 5px;
391
- float: left;
344
+ color: #f9eb81;
392
- }
345
+ }
393
346
 
394
- .content_info:after{
395
- clear: both;
396
- content: '';
397
- dispray: block;
398
- }
399
-
400
-
401
347
  #text_single{
402
348
  width: 100%;
403
- height: auto;
349
+ height: 100%;
350
+ margin-bottom: 20px;
404
351
  float: left;
405
352
  }
406
353
 
407
354
  #text_single:after{
408
355
  clear: both;
409
356
  content: '';
410
- dispray: block;
357
+ display: block;
411
358
  }
412
-
413
- .snsbutton_view{
414
- width: 100%;
415
- height: auto;
416
- float: left;
417
- }
418
359
 
419
- .snsbutton_view:after{
420
- clear: both;
421
- content: '';
422
- dispray: block;
423
- }
424
-
425
- .content_info p a img{
360
+ .post p a img{
426
361
  max-width: 100%;
427
- height: auto;
362
+ height: 100%;
428
363
  }
364
+
429
365
 
430
- .read{
431
- margin-top: 20px;
432
- }
433
-
434
- .nav-below{
435
- float: left;
436
- }
437
-
438
- .nav-below:after{
439
- clear: both;
440
- content: '';
441
- dispray: block;
442
- }
443
-
444
- .respond{
445
- width: 100%;
446
- height: auto;
447
- flort: left;
448
- }
449
-
450
- .respond:after{
451
- clear: both;
452
- content: '';
453
- dispray: block;
454
- }
455
-
456
-
457
366
  /** sidebar **/
458
367
  #sidebar_view_left,#sidebar_view_left_3{
459
368
  width: 20%;
@@ -468,23 +377,48 @@
468
377
  #sidebar_view_left,#sidebar_view_left_3:after{
469
378
  clear: both;
470
379
  content: '';
471
- dispray: block;
380
+ display: block;
472
381
  }
473
382
 
383
+ .widget-container{
384
+ padding: 10px 0;
385
+ }
386
+
474
- ul#sidebar_view_left,ul#sidebar_view_left_3{
387
+ ul#sidebar_view_left{
475
388
  list-style: none;
476
389
  }
477
390
 
478
- #sidebar_view_left ul li,#sidebar_view_left3 ul li{
391
+ #sidebar_view_left ul li{
479
392
  display: block;
393
+ padding-bottom: 10px;
480
394
  }
481
395
 
396
+ #sidebar_view_left ul li ul{
397
+ padding-bottom: 5px;
398
+ }
482
399
 
400
+ #sidebar_view_left ul li ul li{
401
+ padding-top: 5px;
402
+ }
483
403
 
404
+ #sidebar_view_left ul li ul li a{
405
+ display: block;
406
+ }
407
+
408
+ #sidebar_view_left ul li ul li a:hover{
409
+ color: f9eb81;
410
+ }
411
+
412
+
413
+
484
414
  .widget-container ul li{
485
415
  list-style: none;
486
416
  }
487
417
 
418
+ #wp-calendar tbody tr td a{
419
+ color: #ff1b81;
420
+ }
421
+
488
422
  ui.sidebar{
489
423
  list-style: none;
490
424
  }
@@ -494,25 +428,45 @@
494
428
  width:20%;
495
429
  height: auto;
496
430
  padding: 10px 0 10px 0;
497
- float: right;
431
+ float: left;
432
+ background-color: #FFF;
498
433
  }
499
434
 
500
- #sidebar_view_right,#sidebar_view_right_3{
435
+ #sidebar_view_right,#sidebar_view_right_3:after{
501
- clear: both;
436
+ /** clear: both; **/
502
437
  content: '';
503
- dispray: block;
438
+ display: block;
504
439
  }
505
440
 
506
441
  ul#sidebar_view_right,ul#sidebar_view_right_3{
507
442
  list-style: none;
508
443
  }
509
444
 
510
- #sidebar_view_right ul li,#sidebar_view_right3 ul li{
445
+ #sidebar_view_right ul li{
511
446
  display: block;
447
+ padding-bottom: 10px;
512
448
  }
513
449
 
450
+ #sidebar_view_right ul li ul{
451
+ padding-bottom: 5px;
452
+ }
514
453
 
454
+ #sidebar_view_right ul li ul li{
455
+ padding-top: 5px;
456
+ }
515
457
 
458
+ #sidebar_view_right ul li ul li a{
459
+ display: block;
460
+ }
461
+
462
+ #sidebar_view_right ul li ul li a:hover{
463
+ color: f9eb81;
464
+ }
465
+
466
+
467
+
468
+
469
+
516
470
  /** footerの高さを揃える為の領域 **/
517
471
  .footer_thisside{
518
472
  width: 100%;
@@ -535,19 +489,47 @@
535
489
 
536
490
  /* 599px以下のスタイル */
537
491
  @media (max-width: 599px){
538
- #content_view_1 h1,
492
+
539
- #content_view_2 h1{
493
+ h1{
540
494
  font-size: 20px;
541
495
  }
542
496
 
497
+ h2{
498
+ font-size: 18px;
499
+ }
500
+
501
+ h3{
502
+ font-size: 16px;
503
+ }
504
+
505
+ #content_view_1,
543
- .news{
506
+ #content_view_2{
544
507
  width: 100%;
545
508
  }
546
- }
547
509
 
510
+ .news{
511
+ width: 100%;
512
+ }
548
513
 
514
+ #img_tr{
515
+ width: 100%;
516
+ }
517
+
518
+ #content_info{
519
+ width: 100%;
520
+ }
521
+
522
+ #sidebar_view_left,
523
+ #sidebar_view_right{
524
+ width: 100%;
525
+ }
526
+
527
+ }
549
528
  ```
550
529
 
551
530
  最初は、floatを書けた後にclearfixをつけていないのが原因だと思ったので付けてみましたが上手く行きませんでした。
552
531
  原因として考えられることは何でしょうか?
553
- よろしくお願いします。
532
+ よろしくお願いします。
533
+
534
+ 追記
535
+ cssを修正しました。