質問編集履歴

1 cssの修正

退会済みユーザー

退会済みユーザー

2016/02/07 06:22  投稿
css3でdivの領域が思った通りの幅にならない
よろしくお願いします。
css3でのレイアウトなのですが、divの領域が思った通りの幅になりません。
具体的には、ブラウザで実際に見えている領域と、デベロッパーツールで確認した際の実際に存在する領域の幅に違いが出ている、ということです。
実際に見えている領域はheightが115pxなのに対し、デベロッパーツールでは95pxしか取れていない、といった感じです。
今回、
```html5
<articl>
<section>
 <div class="side">
 </div>
 <div class="content">
 </div>
</section>
</articl>
```
といった部分で、sectionにbackgroung-colorを付けたいのですが、
articlのheightが20px(paddingで上下に10px付けてるため)、sectionのheightが0pxとなっており、困っています。
また、articlの上にあるheaderとnavを囲っているdivのheightも足りておらず、どう対処したら良いか分からない状態です。
以下ソースです。(一部を抜粋)
```php
<body <?php body_class(); ?>>
   <!-- Facebookボタンスクリプト -->
         <div id="fb-root"></div> <!-- このdivは欲しいか分からない -->
         <script>(function(d, s, id) {
           var js, fjs = d.getElementsByTagName(s)[0];
           if (d.getElementById(id)) return;
           js = d.createElement(s); js.id = id;
           js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5";
           fjs.parentNode.insertBefore(js, fjs);
         }(document, 'script', 'facebook-jssdk'));</script>
   
<div class="wrap">
   <div class="header_wrap">
    <!-- header -->
    <header>
       <?php if(is_home()): // ホームが表示されている場合、ブログタイトルを H1 で表示 ?>
           <h1><a href="<?php bloginfo('url'); ?>" class="blog_title"><?php bloginfo('name'); ?></a></h1>
       <?php else: // ホーム以外のページが表示されている場合は H1 を削除。各記事やページのタイトルに H1 を使用 ?>
           <h1><a href="<?php bloginfo('url'); ?>" class="blog_title"><?php bloginfo('name'); ?></a></h1>
       <?php endif; ?>
                   
       <p><?php bloginfo('description'); ?></p>
    </header>
    <!-- nav -->
    <nav>
       <?php wp_nav_menu( array('menu_id' => 'nav' )); ?>
    </nav>
 </div><!-- header_wrap -->
<!-- main -->
<article>
   <?php get_sidebar('left'); ?>
  <section>
   <div id="content_view_2">
     <h1>サイトトップです。</h1>
     <p>固定ページです。編集してください。</p>
    <div class='news'>
     <div class='news_title'>
       <h2>最新情報</h2>
     </div>
     <ul>
       <?php
       global $post;
       $args_n = array( 'posts_per_page' => 5 );
       $myposts = get_posts( $args_n );
       foreach( $myposts as $post ) {
         setup_postdata($post);
         ?>
         <li>
           <dl>
             <dt><?php the_time('Y.m.d') ?> <?php the_category('｜') ?> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></dt>
           </dl>
         </li>
         <hr width="100%" size="1" color="#b5b798" style="border-style:dotted">
         <?php
       }
       wp_reset_postdata();
       ?>
     </ul>
   </div><!-- newsの閉じdiv -->
   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
   <div class="post">
     <div class="content_info">
       <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
         <?php the_content("続きを読む"); ?>
     </div> <!-- content_info -->
   </div> <!-- post -->
   <?php endwhile; ?>
                   
   <?php endif; ?>
   </div><!-- contet_viewの閉じdiv -->
 </section>
</article>
```
```css3
```css
@charset 'UTF-8';
/* Theme Name:ｗ*//* WordPress Required Classes */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
*{
   margin: 0;
   padding: 0;
   font-family: 'Noto Sans Japanese', sans-serif;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
}
.clearfix:before,.clearfix:after { content: ''; display: table; }  
.clearfix:after{ clear: both; }  
.clearfix { *zoom: 1; }  
 
.aligncenter {  
   display: block;  
   margin-left: auto;  
   margin-right: auto;  
}  
.alignleft {  
   float: left;  
}  
 
   .alignleft:after{  
       clear: both;  
       content: '';  
       dispray: block;  
   }  
 
.alignright {  
   float: right;  
}  
 
   .alignright:after{  
       clear: both;  
       content: '';  
       dispray: block;  
   }  
 
                     
.wp-caption {  
}  
.wp-caption-text {  
}  
.gallery-caption {  
}  
 
body{
   background-image: url(images/dd.gif);
}
.wrap {
   width: 100%;
   height: auto;
   margin: 0 auto;
   float: left;
}
   .wrap:after{
       clear: both;
       content: '';
       dispray: block;
       display: block;
   }
/** common **/
h1{
   font-size: 24px;
   color: #23272d;
}
h2{
   font-size: 20px;
   color: #23272d;
}
h3{
   color: #23272d;
}
p{
   color: #23272d;
}
a{
   color: #23272d;
   text-decoration: none;
}
/** header_wrap **/
.header_wrap{
   width: 80%;
   height: auto;
   margin: 0 auto;
}
   /** header **/
   header{
       width: 100%;
       background-color: #FFF;
       padding-left: 5px;
   }
       header h1 a{
           font-size: 30px;
           text-decoration: none;
       }
   /** nav **/
   nav{
       width: 100%;
       height: auto;
       float: left;
       background-color: #30393a;
   }
   nav:after{
       clear: both;
       content: '';
       dispray: block;
       display: block;
   }
       .menu ul{
           width: auto;
           text-align: center;
           list-style: none;
       }
           .menu ul li{
               width: auto;
               height: 45px;
               line-height: 45px;
               padding: 0 10px;
               margin: 0 auto;
               float: left;
           }
           .menu ul li:after{
               clear: both;
               content: '';
               dispray: block;
               display: block;
           }
               .menu ul li a{
                   color: #d6d6d1;
                   text-decoration: none;
                   display: block;
               }
               .menu ul li a:hover,
               .menu ul li a:active{
                   color: #30393a;
                   background-color: #f9eb81;
               }
article{
   width: 80%;
   height: auto;
   margin: 0 auto;
   padding: 10px 0;
}
section{
   width: 100%;
   height: auto;
}
/** content **/
#content_view_1{
   width: 100%;
#content_view_2{
   width: 80%;
   height: auto;
   padding: 10px 5px;
   margin: 0 auto;
   /** border-style: solid; **/
   /** border-width: 1px; **/
   float: left;
   background-color: #FFF;
   position: relative;
}
#content_view_1:after{  
   clear: both;  
   content: '';  
   dispray: block;  
}  
 
#content_view_2{  
   width: 80%;  
   height: auto;  
   padding: 10px 5px;  
   margin: 0 auto;  
   /** border-style: solid; **/  
   /** border-width: 1px; **/  
   float: left;  
   background-color: #FFF;  
   position: relative;  
}  
 
#content_view_2:after{
   clear: both;
   content: '';
   dispray: block;
}
   display: block;
}
   #content_view,#content_view_2 h1{
       padding-bottom: 10px;
   }
   #content_view,#content_view_2 p{
       padding-bottom: 5px;
   }
   .news{
       width: 100%;
       width: 80%;
       padding: 10px 0;
   }
       ul.news{
           list-style: none;
       }
           .news ul li{
               display:block;
           }
       .news_title{
           widht: 100%;
           height: auto;
           margin: 0 0 15px 0;
           padding: 5px 0 5px 10px;
           background-color: #23272d;
       }
           .news_title h2{
               color: #FFF;
               font-size: 16px;
           }
       .news ul li dl dt a{
           padding: 0 10px 0 15px;
       }
   .post{
       width: 100%;
       height: auto;
       /** margin: 0 auto; **/
       height: 100%;
       margin: 0 auto;
       padding-left: 5px;
       content: '';
       display: block;
       clear: both;
   }
       .post ul li{
           list-style: none;
       }
       .img_tr{
           width: 30%;
           height: auto;
       .title_wrap{
           width: 100%;
           height: 100%;
           margin-bottom: 20px;
           float: left;
           padding-top: 5px;
           /** margin-left: 40px; **/
       }
       .img_tr:after{
           color: #FFF;
           background-color: #30393a;
       }
       .title_wrap:after{
           clear: both;
           content: '';
           dispray: block;
       }
       .img_tr img{
           width: 100%;
           height: auto;
           margin: 0 auto;
       }
       .content_info{
           width: 70%;
           height: auto;
           padding-left: 5px;
           float: left;
       }
       .content_info:after{
           clear: both;
           content: '';
           dispray: block;
       }
           display: block;
       }
           .title_wrap h1{
               color: #FFF;
           }
           .cat a{
               color: #FFF;   
           }
           .cat a:hover{
               color: #f9eb81;   
           }
           #text_single{
               width: 100%;
               height: auto;
               height: 100%;
               margin-bottom: 20px;
               float: left;
           }
           #text_single:after{
               clear: both;
               content: '';
               dispray: block;
               display: block;
           }
           .post p a img{
               max-width: 100%;
               height: 100%;
           }
           
           .snsbutton_view{  
               width: 100%;  
               height: auto;  
               float: left;  
           }  
 
           .snsbutton_view:after{  
               clear: both;  
               content: '';  
               dispray: block;  
           }  
 
           .content_info p a img{  
               max-width: 100%;  
               height: auto;  
           }  
 
   .read{  
       margin-top: 20px;  
   }  
 
   .nav-below{  
       float: left;  
   }  
 
   .nav-below:after{  
       clear: both;  
       content: '';  
       dispray: block;  
   }  
 
   .respond{  
       width: 100%;  
       height: auto;  
       flort: left;  
   }  
 
   .respond:after{  
       clear: both;  
       content: '';  
       dispray: block;  
   }  
 
/** sidebar **/
#sidebar_view_left,#sidebar_view_left_3{
   width: 20%;
   height: auto;
   padding: 10px 0 10px 0;
   /** border-width: 1px; **/
   /** border-style: solid; **/
   float: left;
   background-color: #FFF;
}
#sidebar_view_left,#sidebar_view_left_3:after{
   clear: both;
   content: '';
   dispray: block;
}
   ul#sidebar_view_left,ul#sidebar_view_left_3{
   display: block;
}
   .widget-container{
       padding: 10px 0;
   }
   ul#sidebar_view_left{
       list-style: none;
   }
       #sidebar_view_left ul li,#sidebar_view_left3 ul li{
       #sidebar_view_left ul li{
           display: block;
       }
           padding-bottom: 10px;
       }
           #sidebar_view_left ul li ul{
               padding-bottom: 5px;
           }
               #sidebar_view_left ul li ul li{
                   padding-top: 5px;
               }
                   #sidebar_view_left ul li ul li a{
                       display: block;
                   }
                   #sidebar_view_left ul li ul li a:hover{
                       color: f9eb81;
                   }
.widget-container ul li{
   list-style: none;
}
       #wp-calendar tbody tr td a{  
           color: #ff1b81;  
       }  
 
ui.sidebar{
   list-style: none;
}
#sidebar_view_right,#sidebar_view_right_3{
   width:20%;
   height: auto;
   padding: 10px 0 10px 0;
   float: right;
}
#sidebar_view_right,#sidebar_view_right_3{
   clear: both;
   float: left;
   background-color: #FFF;
}
#sidebar_view_right,#sidebar_view_right_3:after{
   /** clear: both; **/
   content: '';
   dispray: block;
   display: block;
}
   ul#sidebar_view_right,ul#sidebar_view_right_3{
       list-style: none;
   }
       #sidebar_view_right ul li,#sidebar_view_right3 ul li{
       #sidebar_view_right ul li{
           display: block;
       }
           padding-bottom: 10px;
       }
           #sidebar_view_right ul li ul{
               padding-bottom: 5px;
           }
               #sidebar_view_right ul li ul li{
                   padding-top: 5px;
               }
                   #sidebar_view_right ul li ul li a{
                       display: block;
                   }
                   #sidebar_view_right ul li ul li a:hover{
                       color: f9eb81;
                   }
/** footerの高さを揃える為の領域 **/
.footer_thisside{
   width: 100%;
   height: 10px;
}
/** footer **/
footer{
   width: 80%;
   background-color:#bbb;
   margin: 0 auto;
   clear: both;
}
.widget-area ul li{
   list-style: none;
   display: inline;
}
/* 599px以下のスタイル */
@media (max-width: 599px){
   #content_view_1 h1,
   #content_view_2 h1{
   h1{
       font-size: 20px;
   }
   .news{
   h2{
       font-size: 18px;
   }
   h3{
       font-size: 16px;
   }
   #content_view_1,
   #content_view_2{
       width: 100%;
   }
}
       .news{
           width: 100%;
       }
       #img_tr{
           width: 100%;
       }
       #content_info{
           width: 100%;
       }
   #sidebar_view_left,
   #sidebar_view_right{
       width: 100%;
   }
}
```
最初は、floatを書けた後にclearfixをつけていないのが原因だと思ったので付けてみましたが上手く行きませんでした。
原因として考えられることは何でしょうか？
よろしくお願いします。
よろしくお願いします。
追記
cssを修正しました。
  • CSS3

    3403 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    6627 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る