Q&A
snsブロックが左、headtwoブロックが右、という感じに画面を左右に分割する感じですか？
<!DOCTYPE html>
<head><link rel="stylesheet" href=".css" type="text/css" /></head>
<body>
<div class="wrapper">
<div class="headerblack">
<marquee>〇コカ・コーラ製品をいつもご愛用いただきありがとうございます。</marquee>
</div>
<!--<div class="relative">-->
<div class="head">
</div>
</body> </html><div class="headtwo"> <p style=color:black;><marquee>抽選で２００名様に、コカ・コーラ冷蔵庫が当たる！！詳しくはサイトの最後で！</marquee></p> </div> <div class="sns"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70px" height="70px" viewBox="0 0 300 300"> <defs> <style> .fill {fill: #3b5998;} </style> </defs> <path class="fill" d="M283.000,-0.000 C283.000,-0.000 17.000,-0.000 17.000,-0.000 C7.853,-0.000 -0.000,7.854 -0.000,17.000 C-0.000,17.000 -0.000,283.000 -0.000,283.000 C-0.000,292.144 7.853,300.000 17.000,300.000 C17.000,300.000 161.000,300.000 161.000,300.000 C161.000,300.000 161.000,183.000 161.000,183.000 C161.000,183.000 121.000,183.000 121.000,183.000 C121.000,183.000 121.000,139.000 121.000,139.000 C121.000,139.000 161.000,139.000 161.000,139.000 C161.000,139.000 161.000,105.000 161.000,105.000 C161.000,66.251 183.432,45.000 218.000,45.000 C234.558,45.000 249.852,46.449 254.000,47.000 C254.000,47.000 254.000,88.000 254.000,88.000 C254.000,88.000 229.000,88.000 229.000,88.000 C210.201,88.000 207.000,96.891 207.000,110.000 C207.000,110.000 207.000,139.000 207.000,139.000 C207.000,139.000 252.000,139.000 252.000,139.000 C252.000,139.000 246.000,183.000 246.000,183.000 C246.000,183.000 207.000,183.000 207.000,183.000 C207.000,183.000 207.000,300.000 207.000,300.000 C207.000,300.000 283.000,300.000 283.000,300.000 C292.144,300.000 300.000,292.144 300.000,283.000 C300.000,283.000 300.000,17.000 300.000,17.000 C300.000,7.854 292.144,-0.000 283.000,-0.000 Z"/> </svg> </div> <div class="menu"> <table> <ul><li>HOME</li><li>製品</li><li>問い合わせ</li><li>日頃の取り組み</li><li>About Us</li></ul> </table> </div> <div class="maincontentstop"> <P>What's New</P> <P>コカ・コーラは、今年で３０周年です。みなさまが、私たちの製品をより良く楽しんでいただけるよう、製品作りに、常に向上精神をもって、取り組んでいます。今年は、9つの新製品をリリースします。ハガキから応募いただいた方にコカ・コーラ特選キッチンテーブルを抽選で１名にプレゼントいたします。</P> </div><BR> <div class="bordermovie"> <iframe width="460" height="315" src="https://www.youtube.com/embed/pacCZ6pJXoc" frameborder="0" allowfullscreen></iframe> </div> <footer> </footer> </div>
.wrapper {
margin:10px;
}
.headerblack {
height:30px;width:100%;
background:black;
color:white;
font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', 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', 'ＭＳ Ｐゴシック', 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', 'ＭＳ Ｐゴシック', sans-serif !important;
}
.menu ul {
height:300px;
}
.sns {
padding:5px;
}
.bordermovie {
border:3px solid lightgray;
width:460px;
}
上記は、コカ・コーラのホームページを作成すると仮定して、練習して作ったものです。
classのheadtwoというものが、右側に来る画像になります。
けれど、snsアイコンが上に来て、その画像が、下にくるというラインブレイクを引き起こしています。
これを解消するアドバイスをお願い致します。
回答1件
0
ベストアンサー
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 の横幅を指定してあげることです。
css
1.wrapper { 2 width: 1330px; 3}
（ただ、横幅1330pxは一般的なサイトとしてはかなり大きいので、ディスプレイによっては横スクロールバーが出てきますのでご注意を。）
また、float というプロパティはちょっと特殊で、通常のフローとは独立して要素を浮動させるという意味があります。
通常のフローの文字はfloatされた要素を避けるように配置されていきます。
そのため、floatした要素の位置によっては.snsが.headと同じ高さまで上に来てしまうことがあります。
（floatの挙動ついてはかなりややこしいので、ここには書ききれません。興味があればご自分で検索するといいと思います。）
通常フローの文字をfloatさせた要素の下端よりも下にしたい場合、clear というプロパティを使います。
css
1.sns { 2 clear: both; 3}
これでとりあえず形にはなるかと思います。
投稿2017/01/21 13:04
総合スコア368
.wrapper {
width:1300px;
margin:10px;
}
.headerblack {
height:30px;width:100%;
background:black;
color:white;
font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif !important;
padding:3px -3px 3px 3px;
clear:both;
}
/*.relative {
position: relative;
}*/
.relative {
width:1220px;
height:500px;
}
.head { float:left;
border-bottom:10px solid lightgray;
background-image:url("cola.jpg");/*linear-gradient( to middle,rgba(),),
url("");*/
width:800px;height:240px;
}
.headtwo {
float:right;
border:10px solid lightgray;
width:100px;height:250px;
background-image:url("colabox.jpg");
margin-left:20px;
}
.maincontentstop {
margin-top:15px;
outline:2px lightgray double;
padding:10px -20px 5px 10px;
font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif !important;
clear:both;
}
.menu li {
font-size:.300%;
float:right;
border:3px solid black;
background:red;
color:white;
font-weight:bold;
font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif !important;
}
.menu ul {
height:300px;
}
.sns {
padding: 5px;
width: 60px;
height: 60px;
-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;
}
.sns svg{
width: 100%;
height: auto;
}
.bordermovie {
border:3px solid lightgray;
width:460px;
}
極端にそれぞれのwidhを狭めたのですが、やはりラインブレイクを引き起こします。アドバイスお願い致します。
ありがとうございます。解決いたしました。
あなたの回答
tips
プレビュー
