</body> </html><div class="headtwo"> <p style=color:black;><marquee>抽選で200名様に、コカ・コーラ冷蔵庫が当たる!!詳しくはサイトの最後で!</marquee></p> </div> </div> <div class="relativetwo"> <div class="menu"> <table> <ul><li style="width:150px;">HOME</li><li style="width:150px;">製品</li style="width:150px;"><li style="width:150px;">問い合わせ</li><li style="width:150px;">日頃の取り組み</li><li style="width:150px;">About Us</li></ul> </table> </div> <div class="maincontentstop"> <P>〇What's New</P> <P>コカ・コーラは、今年で30周年です。みなさまが、私たちの製品をより良く楽しんでいただけるよう、製品作りに、常に向上精神をもって、取り組んでいます。今年は、9つの新製品をリリースします。ハガキから応募いただいた方にコカ・コーラ特選キッチンテーブルを抽選で1名にプレゼントいたします。</P> </div><BR> </div> <div class="outlineforyoutube"> <iframe width=460" height="315" src="https://www.youtube.com/embed/0n9GGbknc7k" frameborder="0" allowfullscreen style="margin-left:30px;"></iframe> <!--<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="chrastricSweepstakes"> </div> </div> </div> <footer> </footer> </div>
.wrapper {
width:1230px;
margin:10px;
}
.headerblack {
height:40px;width:100%;
background:black;
color:white;
font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'MS Pゴシック', sans-serif !important;
padding:3px -3px 3px 3px;
clear:both;
}
.runner {
width:15px;height:15px;
}
/*.relative {
position: relative;
}*/
.relative {
width:1228px;
height:270px;
}
.head { float:left;
border-bottom:10px solid lightgray;
background-image:url("cola.jpg");/linear-gradient( to middle,rgba(),),
url("");/
width:990px;height:300px;
}
.headtwo {
float:right;
border:10px solid lightgray;
width:216px;height:289px;
background-image:url("colabox.jpg");
margin-left:2px;
}
.relativetwo {
width:1300px;
}
.menu {
width:1000px;
margin:0px -15px 10px 10px;
}
.menu li {
list-style:none;
transform:scale(1.3,1);
letter-spacing:10px;
font-size:20px;
float:left;
border:5px solid lightgray;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #ff0003), color-stop(1.00, #360b0b));
background: -webkit-linear-gradient(#ff0003, #360b0b);
background: -moz-linear-gradient(#ff0003, #360b0b);
background: -o-linear-gradient(#ff0003, #360b0b);
background: -ms-linear-gradient(#ff0003, #360b0b);
background: linear-gradient(#ff0003, #360b0b);
color:white;
font-weight:bold;
font-style:Italic;
}
.menu ul {
height:40px;
}
.maincontentstop {
background: -moz-linear-gradient(rgb(170, 14, 14) 0%, rgb(228, 155, 155) 13%, rgb(251, 223, 223) 27%, rgb(251, 249, 249) 42%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(170, 14, 14)), color-stop(13%, rgb(228, 155, 155)), color-stop(27%, rgb(251, 223, 223)), color-stop(42%, rgb(251, 249, 249)));
margin-left:30px;margin-bottom:5px;
outline:7px lightgray double;
padding:10px -20px 5px 10px;
font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'MS Pゴシック', sans-serif !important;
clear:both;
width:900px;
padding:5px;
}
.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;
}/
.outlineforyoutube {
padding:15px;
padding-left:-10px;
outline:7px lightgray double;
width:1000px;height:320px;
margin-left:30px;
background: -moz-linear-gradient(rgb(170, 14, 14) 0%, rgb(228, 155, 155) 13%, rgb(251, 223, 223) 27%, rgb(251, 249, 249) 42%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(170, 14, 14)), color-stop(13%, rgb(228, 155, 155)), color-stop(27%, rgb(251, 223, 223)), color-stop(42%, rgb(251, 249, 249))); height:310px;
}
.bordermovie {
border:3px solid lightgray;
width:460px;
}
上記は、コカ・コーラのホームページを作成すると仮定して、練習用に作っているものです。
class relativeとmaincontentstopの間に余白が、30pxほど出てしまいます。
この余白を10pxに指定したいのですが、双方のクラスにマージンを設定しても、30px程度、未満になりません。どうすればよろしいでしょうか。
回答1件
あなたの回答
tips
プレビュー