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

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

ただいまの
回答率

90.51%

  • HTML5

    5101questions

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

  • CSS3

    2612questions

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

css3でdivの領域が思った通りの幅にならない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 994
退会済みユーザー

退会済みユーザー

よろしくお願いします。

css3でのレイアウトなのですが、divの領域が思った通りの幅になりません。

具体的には、ブラウザで実際に見えている領域と、デベロッパーツールで確認した際の実際に存在する領域の幅に違いが出ている、ということです。

実際に見えている領域はheightが115pxなのに対し、デベロッパーツールでは95pxしか取れていない、といった感じです。

今回、

<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も足りておらず、どう対処したら良いか分からない状態です。

以下ソースです。(一部を抜粋) 

<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>
@charset 'UTF-8';

@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;
}


body{
    background-image: url(images/dd.gif);
}

.wrap {
    width: 100%;
    height: auto;
    margin: 0 auto;
    float: left;
}

    .wrap:after{ 
        clear: both;
        content: '';
        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: '';
        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: '';
                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_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: '';
    display: block;
}

    #content_view,#content_view_2 h1{
        padding-bottom: 10px;
    }

    #content_view,#content_view_2 p{
        padding-bottom: 5px;
    }

    .news{
        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: 100%;
        margin: 0 auto;
        padding-left: 5px;
        content: '';
        display: block;
        clear: both;
    }

        .post ul li{
            list-style: none;
        }

        .title_wrap{
            width: 100%;
            height: 100%;
            margin-bottom: 20px;
            float: left;
            color: #FFF;
            background-color: #30393a;
        }

        .title_wrap:after{ 
            clear: both;
            content: '';
            display: block;
        }

            .title_wrap h1{
                color: #FFF;
            }

            .cat a{
                color: #FFF;    
            }

            .cat a:hover{
                color: #f9eb81;    
            }

            #text_single{
                width: 100%;
                height: 100%;
                margin-bottom: 20px;
                float: left;
            }

            #text_single:after{ 
                clear: both;
                content: '';
                display: block;
            }

            .post p a img{
                max-width: 100%;
                height: 100%;
            }


/** 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: '';
    display: block;
}

    .widget-container{
        padding: 10px 0;
    }

    ul#sidebar_view_left{
        list-style: none;
    }

        #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: left;
    background-color: #FFF;
}

#sidebar_view_right,#sidebar_view_right_3:after{
    /** clear: both; **/
    content: '';
    display: block;
}

    ul#sidebar_view_right,ul#sidebar_view_right_3{
        list-style: none;
    }

        #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){

    h1{
        font-size: 20px;
    }

    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を修正しました。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

ひとまず綴り間違いと設定間違いが散見されるので、clearfix箇所の設定の確認と
「dispray」→「display」への置換をしましょう。
下記で挙げているのは一例で、ほかにもありました。

#content_view_2:after{ 
    clear: both;
    content: '';
    dispray: block; ←綴り間違い「display」
}

#sidebar_view_left,#sidebar_view_left_3:after{ 
    clear: both;
    content: '';
    dispray: block; ←綴り間違い「display」
}

#sidebar_view_right,#sidebar_view_right_3{ ←疑似要素の:afterが抜けている
    clear: both;
    content: '';
    dispray: block; ←綴り間違い「display」
}

clearfixのつけ方が間違っていました。
floatさせる要素の親タグにつけます。
全ての箇所がそういう関係になるよう、設定を修正してください。

<div class="wrap">
  <div class="box">box</div>
  <div class="box">box</div>
<div>
.wrap:after {
  content: "";
  display: block;
  clear: both;
}

.box {
  float: left;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/07 06:23

    回答ありがとうございざます。
    スペルミスと、afterが抜けている部分を修正しました。
    なお結果は変わっていません。

    キャンセル

  • 2016/02/07 07:51

    clearfixの使い方が違っていたので、回答に追記しました。

    キャンセル

  • 2016/02/12 20:15

    修正した結果、思った通りの形になりました。
    ありがとうございます。

    キャンセル

同じタグがついた質問を見る

  • HTML5

    5101questions

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

  • CSS3

    2612questions

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