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

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

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1084閲覧

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

kumo

総合スコア12

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/11/08 17:00

前提・実現したいこと

レスポンシブデザインをしようと思ったのですが、<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でセンターにしていたのが効かなくなってしまった。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

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

HTML

1<head> 2 <title>テキストテキストテキスト</title> 3 <meta charset="utf-8"> 4</head> 5<body> 6 7 8 <main> 9 <div id="wrapper"> 10 <p>#wrapper です</p> 11 <p>  </p> 12 13 <div id="new"> 14 <h2>これが id="new"</h2> 15 <p>display:inline-block; を利用して横に並べるならば、 id="new" の閉じタグと id="rank"の開始タグの間に改行やスペースを入れないようにするのがポイント</p> 16 17 </div><!--改行しないスペースも入れない!--><div id="rank"> 18 19 <h2>これが  id="rank"</h2> 20 <p>id="new" と id="rank" は幅を100%にしないで、div#wrapper の幅に対する、それぞれの割合を指定することで、画面を縮めても比率を保って横に並ぶ・・はず</p> 21 </div> <!---/#rank---> 22 </div><!---/wrapper--> 23 </main>

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

CSS

1/* ======================================== 2 リセットcss 3========================================= */ 4html, body, div, span, applet, object, iframe, 5h1, h2, h3, h4, h5, h6, p, blockquote, pre, 6a, abbr, acronym, address, big, cite, code, 7del, dfn, em, img, ins, kbd, q, s, samp, 8small, strike, strong, sub, sup, tt, var, 9b, u, i, center, 10dl, dt, dd, ol, ul, li, 11fieldset, form, label, legend, 12table, caption, tbody, tfoot, thead, tr, th, td, 13article, aside, canvas, details, embed, 14figure, figcaption, footer, header, hgroup, 15menu, nav, output, ruby, section, summary, 16time, mark, audio, video { 17 margin: 0; 18 padding: 0; 19 border: 0; 20 font-style:normal; 21 font-weight: normal; 22 font-size: 100%; 23 vertical-align: baseline; 24 color: #7d7676; 25 26 27} 28article, aside, details, figcaption, figure, 29footer, header, hgroup, menu, nav, section { 30 display: block; 31} 32html{overflow-y: scroll;} 33blockquote, q {quotes: none;} 34blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;} 35input, textarea,{margin: 0; padding: 0;} 36ol, ul{list-style:none;} 37table{border-collapse: collapse; border-spacing:0;} 38caption, th{text-align: left;} 39a:focus {outline:none;} 40 41 42/* ======================================== 43 全体設定 44========================================= */ 45body { 46 font-size: 14px; 47 line-height: 1.4em; 48 font-family: "メイリオ", "Meiryo", sans-serif; 49 -webkit-font-smoothing: antialiased; 50 -moz-osx-font-smoothing: grayscale; 51 52} 53 54 55main{ 56 width: 100%; 57 height: auto; 58 59} 60 61div#wrapper { 62 max-width: 972px; 63 max-height: 610px; 64 65 margin: 0 auto; 66 padding-left: 26px; 67 padding-right: 26px; 68 69 background-color: #eee; 70} 71 72 73div#new{ 74 width: 56%; 75 max-width: 550px; 76 height: auto; 77 display: inline-block; 78 position: relative; 79 margin-bottom: 50px; 80 81 background-color: #ccc; 82 83} 84 85div#rank{ 86 width: 44%; 87 max-width: 422px; 88 display: inline-block; 89 vertical-align: top; 90 91 background-color: #ccf; 92} 93 94 95 96

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

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

投稿2018/11/09 01:07

marlboro_tata

総合スコア525

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kumo

2018/11/09 08: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を消してみたところ、しっかりリキッドレイアウトになりました・・・!!ほんとにありがとうございました!
marlboro_tata

2018/11/09 09:10

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問