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

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

ただいまの
回答率

89.09%

レスポンシブwebデザインについて 一つの要素のみカラム落ちします。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 983

kumo

score 12

 前提・実現したいこと

レスポンシブデザインをしようと思ったのですが、<main>でくるんだ、div#new (silckを使ったスライダーの部分)と、img#pr は、max-widthが反映されるのですが、div#rankがどうにもこうにも下にカラム落ちしてしまいます。落ちずに<main>の部分をリキッドレイアウトにする方法を教えていただきたいです。

コードがとても汚いかと思うのですが、まだペーペーのため、ご容赦ください。

 発生している問題・エラーメッセージ

chromeで検証して見ると999pxのところで、div#rankが下におち、ぽっかり空洞ができてしまう
chromeで検証して見ると999pxのところで、div#rankが下におち、ぽっかり空洞ができてしまう

さらに縮めると、div#newとimg#prは反映していたことがわかります。落ちてしまったdiv#rankも切れたりすることなく、反映されている。
さらに縮めると、div#newとimg#prは反映しています。落ちてしまったdiv#rankも切れたりすることなく、反映されている。

 該当のソースコード

**__HTML__**

<head>
    <title>テキストテキストテキスト</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">

    <link href="slick/slick-theme.css" rel="stylesheet">
    <link href="slick/slick.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

</head>
<body>

<!------------------header-------------------------->
    <header>
        <div id="header_inner">
            <nav>
                <ul>
                    <li><a href="#">ログイン</a></li>
                    <li><a href="#">無料会員登録</a></li>
                </ul>
            </nav>

            <!--<a><img href="#" src="0000000.png" alt="テキストテキストテキスト"></a>-->
        </div>

    </header>


<!------------------main-------------------------->
<main>
    <div id="wrapper">


            <div id="new" >
                <h2>新着記事</h2>

                <a href="#"><img id="markimage" src="mark.png" alt="_"></a>

                <ul class="slider">

                  <li class="slide">
                <a class="slide__link" href="#">
            <img src="0000000.jpg" alt="image01">
            <span class="slide__content-wrap">
                <span class="slide__content">
                    <h2 class="slide__title">テキストテキストテキスト</h2>
                    <p class="slide__text">
                    テキストテキストテキスト        
                    </p>
                </span>
            </span>
        </a>
    </li><!---以下繰り返し省略--->
</ul>
<img id="pr" src="0000.png" alt="PR">    
                </div><!--//#new-->

<!------------------rank-------------------------->

            <div id="rank">
                <h2>アクセスランキング</h2>

                <ul>
                    <li>
                        <dl>
                            <dt><img src="0000000.jpg" alt="1">
                                <span class="rank_number">1</span></dt>
                            <dd><p>テキストテキストテキスト</p><span class="day_access">2018/11/4 6000 view</span></dd>
                        </dl>
                    </li><!---以下繰り返し省略--->


                </ul>

            </div> <!---/#rank--->
            </div><!---/wrapper-->
    </main>
/* ========================================
    リセットcss
========================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-style:normal;
    font-weight: normal;
    font-size: 100%;
    vertical-align: baseline;
    color: #7d7676;


}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
html{overflow-y: scroll;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
input, textarea,{margin: 0; padding: 0;}
ol, ul{list-style:none;}
table{border-collapse: collapse; border-spacing:0;}
caption, th{text-align: left;}
a:focus {outline:none;}


/* ========================================
    全体設定
========================================= */
body {
    font-size: 14px;    
    line-height: 1.4em;
    font-family: "メイリオ", "Meiryo", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

a {
    color:#7d7676;
    text-decoration:none;
}


a:hover{
    text-decoration: #82a8f7;
}

/* micro clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {clear: both;}
.cf {*zoom: 1;}




/* ========================================
    header
========================================= */
header{
    height: 70px;
    width: 100%;

    margin-bottom: 44px;
    background:#fff;}

div#header_inner{
    width: 100%;
    max-width: 972px;
    height: 70px;
    line-height: 70px;
    background: url(00000.png) no-repeat center;
    margin-top: 20px;
    margin: 0 auto; 

}


nav ul li a{
    float: left;
    padding-right: 24px;
    color:white;
    font-weight: bold;
    display: block;
}

div#header_inner a img{
    margin-left: 446px;
    padding-top: 25px;
    display: block;
}

/* ========================================
     main
========================================= */

main{
    width: 100%;
    height: auto;

}

div#wrapper {
    max-width: 972px;
    max-height: 610.2px;

    margin: 0 auto;
    padding-left:25.5px;
    padding-right: 25.5px;


}


#category_wrapper{
    width: 972px;
    margin: 0 auto;
}

/* ========================================
     main new
========================================= */

div#new{
    width: 100%;
    max-width: 550px;
    height: auto;
    display: inline-block;
    color: #5b5757;
    font-size: 18px;
    position: relative;
    margin-bottom: 50px;

}


div#new h2{
    font-weight: bold;
}

img#pr{
    width: 100%;
    max-width: 500px;
    height: auto;
    margin-top: 50px;
    display: inline-block;
}



div#new img#markimage{
    width:40px;
    height: 40px;
    position: absolute;
    top:60px;
    right: 70px;
    z-index: 2;

}

/* ========================================
    main rank
========================================= */



div#rank{
    width: 100%;
    max-width: 394px;
    display: inline-block;
    vertical-align: top;

}




div#rank h2{
    font-size:16px;
    font-weight: bold;
    margin-bottom: 10px;
}

div#rank dl{
    width: 100%;
    max-width: 394px;
    height:86px;
    position: relative;
    padding-top: 20px;
}

div#rank dl dt img{
    width: 100%;
    max-width: 118px;
    height: 86px;
    float: left;
    padding-right: 10px;
}


dd p{
    font-weight: bold;
    font-size: 15.5px;    
    padding: 10px;
}

dd span.day_access{
    position: absolute;
    right: 10px;
    top: 86px;
    font-weight: bold;
    font-size: 12px;
}

span.rank_number{
    color: #fff;
    display: inline-block;
    background-color: #74AEF3;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 25px;
    left: 5px;
    text-align: center;
    line-height: 20px;
}

---------------------------------------------------------------------
**__別ファイルCSS__**
/* Slider */
.slick-slider
{
    position: relative;

    display: inline-block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;




}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;

}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);


}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: inline-block;
    margin-left: auto;
    margin-right: auto;

}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;

}

.slick-slide
{
    display: none;
    float: left;


    height: 100%;
    min-height: 1px;

}
[dir='rtl'] .slick-slide
{
    float: right;

}
.slick-slide img
{
    display: inline-block;


}
.slick-slide.slick-loading img
{
    display: none;

}
.slick-slide.dragging img
{
    pointer-events: none;

}
.slick-initialized .slick-slide
{
    display: block;

}
.slick-loading .slick-slide
{
    visibility: hidden;

}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;


}
.slick-arrow.slick-hidden {
    display: none;
}


.slider{
    margin: 31px 0;
    width: 90%;



}
.slide{
    position: relative;


}
.slide__link{
    color: #fff;

}
.slide img{
    height: auto;
    width: 100%;
}
.slide__content-wrap{
    left: 35%;
    position: absolute;
    top: 75%;

}
.slide__content{
    color: #fff;
    display: block;
    transform: translate(-50%,60%);
    transition: 0s;
    line-height: 30px;
    background-color: rgba(21, 19, 19, 0.39);

}
.slide__content.on{
    opacity: 1;
    transform: translate(-50%,-50%);
    transition: .5s;
}
.slide__title{
    font-size: 40px;
    line-height: 40px;
    color: #fff;

}

.slide__text{
    color: #fff;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before{
    color: #000;
}

 試したこと

floatでくむのはやめた
W3c Validationもつかったが特に問題はなさそう
ネットで色々みたが、うまくいかなかった。
mainのwidthに余分を持たせてみたがうまくいかなかった。
box-sizingも使ってみたが何も変わらず。。。むしろwrapperでセンターにしていたのが効かなくなってしまった。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

paddingやwidth、height の値に小数点以下のピクセルサイズを指定するのは、ブラウザによって思わぬ再現違いなどを生じる可能性があると思うので、オススメしないです。

mainの内部だけを残して検証してみました。

横に並べる方法として、display:inline-block; が最適解かどうかは置いておいて、
これを使うのであれば、余分な空白が入らないように、横に並べたい要素の閉じタグと次の要素の開始タグの間に、改行や空白が入らないようにするのがテクニックです。

また、今回の場合、div#new と div#rank のwidthは、100%にするのではなく、 div#wrapper に対して、何%の幅になるのかを計算して、値を決定すべきだと思います。

<head>
    <title>テキストテキストテキスト</title>
    <meta charset="utf-8">
</head>
<body>


  <main>
    <div id="wrapper">
      <p>#wrapper です</p>
      <p>  </p>

      <div id="new">
        <h2>これが id="new"</h2>
        <p>display:inline-block; を利用して横に並べるならば、 id="new" の閉じタグと id="rank"の開始タグの間に改行やスペースを入れないようにするのがポイント</p>

      </div><!--改行しないスペースも入れない!--><div id="rank">

        <h2>これが  id="rank"</h2>
        <p>id="new" と id="rank" は幅を100%にしないで、div#wrapper の幅に対する、それぞれの割合を指定することで、画面を縮めても比率を保って横に並ぶ・・はず</p>
      </div> <!---/#rank--->
    </div><!---/wrapper-->
  </main>

CSSも、レイアウトに関係のなさそうな部分はザクザク削除して、領域を確認するために背景色を入れてあります。

/* ========================================
    リセットcss
========================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-style:normal;
    font-weight: normal;
    font-size: 100%;
    vertical-align: baseline;
    color: #7d7676;


}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
html{overflow-y: scroll;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
input, textarea,{margin: 0; padding: 0;}
ol, ul{list-style:none;}
table{border-collapse: collapse; border-spacing:0;}
caption, th{text-align: left;}
a:focus {outline:none;}


/* ========================================
    全体設定
========================================= */
body {
    font-size: 14px;    
    line-height: 1.4em;
    font-family: "メイリオ", "Meiryo", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}


main{
    width: 100%;
    height: auto;

}

div#wrapper {
    max-width: 972px;
    max-height: 610px;

    margin: 0 auto;
    padding-left: 26px;
    padding-right: 26px;

  background-color: #eee;
}


div#new{
    width: 56%;
    max-width: 550px;
    height: auto;
    display: inline-block;
    position: relative;
    margin-bottom: 50px;

  background-color: #ccc;

}

div#rank{
    width: 44%;
    max-width: 422px;
    display: inline-block;
    vertical-align: top;

  background-color: #ccf;
}


実際の表示はこちらから確認できます。
https://codepen.io/ccc-labo/pen/eQZLXy

最適解とは言えないと思いますが、参考になれば何よりです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/09 17:27

    marlboro_tata 様
    回答してくださり本当にありがとうございます!
    また、初めて質問してみたので厳しいことを言われてしまうかもと不安だったのですが、とても丁寧でわかりやすくて、嬉しかったです。

    marlboro_tata様のアドバイスを元に試してみたのですが、なぜかうまくいかず。。おそらく
    |ーーーーーーーー|  |ーーーー|
    |        |  |    |
    | #new    |  | #rank |
    |ーーーーーーーー|  |    |
    |  img#pr   |  |    |
    |ーーーーーーーー|  |ーーーー| 

    ↑(変な説明ですみません)この#new コンテンツに含んでいるimg#pr
    がややこしいことをしてしまっているのかもしれません。。

    ですが、アドバイス通り余分な改行スペースを省き、
    そのあとmarlboro_tata様からinline-boxの点についてご指摘いただけたので、とりあえずだめもとで、#wrapperにdisplay:flexを入れて、#new img#pr #rankからinline-boxを消してみたところ、しっかりリキッドレイアウトになりました・・・!!ほんとにありがとうございました!

    キャンセル

  • 2018/11/09 18:10

    はい、そうですね。対応したいブラウザにもよりますが、display:inline-block; よりも、display:flex; あたりで横並びにするのがより良いのではないかなー、と思いつつの、回答でした。
    なんのせ、うまくいったようで良かったです。

    キャンセル

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

  • ただいまの回答率 89.09%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる