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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

1906閲覧

html cssで作ったページのマージン設定について

tidavest

総合スコア595

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2017/01/22 02:25

<!DOCTYPE html> <head><link rel="stylesheet" href=".css" type="text/css" /></head> <body> <div class="wrapper"> <div class="header"> <div class="headerblack"> <marquee>〇コカ・コーラ製品をいつもご愛用いただきありがとうございます。<img src="079.png" style="width:20px;height:20px;margin-top:9px;"></marquee> </div> <div class="relative"> <div class="head"> </div>
<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>
</body> </html>

.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程度、未満になりません。どうすればよろしいでしょうか。

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

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

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

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

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

kei344

2017/01/22 02:28

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
toutou

2017/01/22 02:37

作るにいたって参考資料などがあれば教えてください
tidavest

2017/01/22 02:41

コードブロックで囲いました。
tidavest

2017/01/22 02:42

特に資料は、使わず作成しました。
kei344

2017/01/22 02:48

こちらの環境では変更/修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか?
kura

2017/01/22 03:09

質問とは関係ないですが、paddingにマイナスの長さは指定できません。今後の作成に影響が出ると思うので、修正するといいと思います。
tidavest

2017/01/22 03:35

marginにマイナス指定で、解決いたしました。ありがとうございます
guest

回答1

0

ベストアンサー

  • menuクラスがかかっているリストが何かおかしい。

HTML

1<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>
  • maincontentstopクラスでpaddingが2回指定されている。
  • outlineforyoutubeクラスでheightが2回指定されている。

本題ですが、このようにするとどうでしょうか?

HTML

1<!DOCTYPE html> 2<head> 3 <style type="text/css"> 4 .wrapper { 5 width: 1230px; 6 margin: 10px; 7 } 8 9 .headerblack { 10 height: 40px; 11 width: 100%; 12 background: black; 13 color: white; 14 font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'MS Pゴシック', sans-serif !important; 15 padding: 3px -3px 3px 3px; 16 clear: both; 17 } 18 19 .runner { 20 width: 15px; 21 height: 15px; 22 } 23 24 /*.relative { 25 position: relative; 26 27 }*/ 28 29 .relative { 30 width: 1228px; 31 height: 300px; 32 } 33 34 .head { 35 float: left; 36 border-bottom: 10px solid lightgray; 37 background-image: url("cola.jpg"); 38 /*linear-gradient( to middle,rgba(),), 39 url("");*/ 40 width: 990px; 41 height: 300px; 42 } 43 44 .headtwo { 45 float: right; 46 border: 10px solid lightgray; 47 width: 216px; 48 height: 289px; 49 background-image: url("colabox.jpg"); 50 margin-left: 2px; 51 } 52 53 .relativetwo { 54 width: 1300px; 55 } 56 57 .menu { 58 width: 1000px; 59 margin: 0 0 10px 10px; 60 } 61 62 .menu li { 63 list-style: none; 64 transform: scale(1.3, 1); 65 letter-spacing: 10px; 66 font-size: 20px; 67 float: left; 68 border: 5px solid lightgray; 69 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #ff0003), color-stop(1.00, #360b0b)); 70 background: -webkit-linear-gradient(#ff0003, #360b0b); 71 background: -moz-linear-gradient(#ff0003, #360b0b); 72 background: -o-linear-gradient(#ff0003, #360b0b); 73 background: -ms-linear-gradient(#ff0003, #360b0b); 74 background: linear-gradient(#ff0003, #360b0b); 75 color: white; 76 font-weight: bold; 77 font-style: Italic; 78 79 } 80 81 .menu ul { 82 height: 40px; 83 } 84 85 .maincontentstop { 86 background: -moz-linear-gradient(rgb(170, 14, 14) 0%, rgb(228, 155, 155) 13%, rgb(251, 223, 223) 27%, rgb(251, 249, 249) 42%); 87 88 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))); 89 margin-left: 30px; 90 margin-bottom: 5px; 91 outline: 7px lightgray double; 92 padding: 10px -20px 5px 10px; 93 font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'MS Pゴシック', sans-serif !important; 94 clear: both; 95 width: 900px; 96 padding: 5px; 97 } 98 99 .sns { 100 padding: 5px; 101 width: 60px; 102 height: 60px; 103 -moz-box-sizing: border-box; 104 -webkit-box-sizing: border-box; 105 box-sizing: border-box; 106 } 107 108 /*.sns svg{ 109 width: 100%; 110 height: auto; 111 }*/ 112 113 .outlineforyoutube { 114 padding: 15px; 115 padding-left: -10px; 116 outline: 7px lightgray double; 117 width: 1000px; 118 height: 320px; 119 margin-left: 30px; 120 background: -moz-linear-gradient(rgb(170, 14, 14) 0%, rgb(228, 155, 155) 13%, rgb(251, 223, 223) 27%, rgb(251, 249, 249) 42%); 121 122 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))); 123 height: 310px; 124 } 125 126 .bordermovie { 127 border: 3px solid lightgray; 128 width: 460px; 129 } 130 131 .clearfix:after { 132 content: " "; 133 display: block; 134 clear: both; 135 } 136 </style> 137</head> 138<body> 139<div class="wrapper"> 140 <div class="header"> 141 <div class="headerblack"> 142 <marquee>〇コカ・コーラ製品をいつもご愛用いただきありがとうございます。<img src="079.png" style="width:20px;height:20px;margin-top:9px;"> 143 </marquee> 144 </div> 145 <div class="relative"> 146 <div class="head clearfix"> 147 </div> 148 149 <div class="headtwo"> 150 <p style=color:black;> 151 <marquee>抽選で200名様に、コカ・コーラ冷蔵庫が当たる!!詳しくはサイトの最後で!</marquee> 152 </p> 153 </div> 154 155 </div> 156 <div class="relativetwo"> 157 <div class="menu clearfix"> 158 <table> 159 <ul> 160 <li style="width:150px;">HOME</li> 161 <li style="width:150px;">製品</li> 162 <li style="width:150px;">問い合わせ</li> 163 <li style="width:150px;">日頃の取り組み</li> 164 <li style="width:150px;">About Us</li> 165 </ul> 166 </table> 167 </div> 168 <div class="maincontentstop"> 169 <P>〇What's New</P> 170 <P> 171 コカ・コーラは、今年で30周年です。みなさまが、私たちの製品をより良く楽しんでいただけるよう、製品作りに、常に向上精神をもって、取り組んでいます。今年は、9つの新製品をリリースします。ハガキから応募いただいた方にコカ・コーラ特選キッチンテーブルを抽選で1名にプレゼントいたします。</P> 172 </div> 173 <BR> 174 175 </div> 176 <div class="outlineforyoutube"> 177 <iframe width=460" height="315" src="https://www.youtube.com/embed/0n9GGbknc7k" frameborder="0" 178 allowfullscreen style="margin-left:30px;"></iframe> 179 <!--<div class="sns"> 180 <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"> 181 <defs> 182 <style> 183 .fill {fill: #3b5998;} 184 </style> 185 </defs> 186 <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"/> 187 </svg> 188 </div>--> 189 <div class="chrastricSweepstakes"> 190 </div> 191 </div> 192 </div> 193 <footer> 194 </footer> 195</div> 196</body> 197</html>

投稿2017/01/22 02:38

編集2017/01/22 02:50
s8_chu

総合スコア14731

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

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

tidavest

2017/01/22 02:58

marginにマイナス指定で、解決いたしました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問