質問: 〇コカ・コーラ製品をいつもご愛用いただきありがとうございます。 抽選で200名様に、コカ・コーラ冷蔵庫が当たる!!詳しくはサイトの最後で! HOME製品問い合わせ日頃の取り組みAbout Us What's New コカ・コーラは、今年で30周年です。みなさまが、私たちの製品をより良く楽しんでいただけるよう、製品作りに、常に向上精神をもって、取り組んでいます。今年は、9つの新製品をリリースします。ハガキから応募いただいた方にコカ・コーラ特選キッチンテーブルを抽選で1名にプレゼントいたします。 .wrapper { margin:10px; } .headerblack { height:30px;width:100%; background:black; color:white; font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'MS Pゴシック', sans-serif !important; padding:3px -3px 3px 3px; clear:both; } /*.relative { position: relative; }*/ .head { float:left; border-bottom:10px solid lightgray; background-image:url("cola.jpg");/*linear-gradient( to middle,rgba(),), url("");*/ width:980px;height:340px; } .headtwo { float:right; border:10px solid lightgray; width:230px;height:250px; background-image:url("colabox.jpg"); margin-left:100px; } .maincontentstop { margin-top:15px; border:5px solid lightgray; padding:10px -20px 5px 10px; font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'MS Pゴシック', sans-serif !important; } .menu li { font-size:.300px; float:right; border:3px solid black; background:red; color:white; font-weight:bold; font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'MS Pゴシック', sans-serif !important; } .menu ul { height:300px; } .sns { padding:5px; } .bordermovie { border:3px solid lightgray; width:460px; } 上記は、コカ・コーラのホームページを作成すると仮定して、練習して作ったものです。 classのheadtwoというものが、右側に来る画像になります。 けれど、snsアイコンが上に来て、その画像が、下にくるというラインブレイクを引き起こしています。 これを解消するアドバイスをお願い致します。
回答: > > classのheadtwoというものが、右側に来る画像になります。 > > けれど、snsアイコンが上に来て、その画像が、下にくるというラインブレイクを引き起こしています。 > > > 原因は、.headの横幅 + .headtwoの横幅 が、.wrapperの横幅 を超えているからです。 提示されたCSSですと、 * .headの横幅 = 980px(width) * .headtwoの横幅 = 230px(width) + 20px(border) + 100px(margin) = 350px なので、2つ合わせて 1330px です。 一方、それらを囲む .wrapper の横幅はウィンドウ幅で決まるので、 ウィンドウの大きさによっては .head と .headtwo が一列に収まらなくなり、.headtwo が下に行ってしまいます。(俗に言うカラム落ちです) 対処法としましては、これら2つが横に収まるように、.wrapper の横幅を指定してあげることです。 ``` .wrapper { width: 1330px; } ``` (ただ、横幅1330pxは一般的なサイトとしてはかなり大きいので、ディスプレイによっては横スクロールバーが出てきますのでご注意を。) また、`float` というプロパティはちょっと特殊で、通常のフローとは独立して要素を浮動させるという意味があります。 通常のフローの文字はfloatされた要素を避けるように配置されていきます。 そのため、floatした要素の位置によっては.snsが.headと同じ高さまで上に来てしまうことがあります。 (floatの挙動ついてはかなりややこしいので、ここには書ききれません。興味があればご自分で検索するといいと思います。) 通常フローの文字をfloatさせた要素の下端よりも下にしたい場合、`clear` というプロパティを使います。 ``` .sns { clear: both; } ``` これでとりあえず形にはなるかと思います。