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

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

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

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

CSS

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

Q&A

解決済

1回答

241閲覧

div(ABOUT)にmargin-bottomを指定しても上に上がりません

reo_fukkase

総合スコア50

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/02/11 05:59

編集2020/02/11 07:01

試したことは、vertical-align:bottomを指定してから、margin-bottomを指定しました。コンパイルはしてあります。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>iSara[イサラ] | バンコクのノマドエンジニア育成講座</title> 6 <link rel="stylesheet" href="css/iSara.css"> 7 </head> 8 <body> 9 <header> 10 <div class="header-left"> 11 <img src="image/isaralogo.png"> 12 <p>バンコクのノマドエンジニア育成講座</p> 13 </div> 14 <div class="header-right"> 15 <a href="">お問い合わせ / 資料請求はこちら</a> 16 </div> 17 18 </div> 19 </header> 20 <div class="clear"></div> 21 <div class="title"> 22 <div class="title-top"> 23 <div class="title-text"> 24 <h2>プログラミングで<br>人生の安定を手にいれよう</h2> 25 <img src="image/isaralogolarge.png"> 26 <h3>バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</h3> 27 </div> 28 </div> 29 </div> 30 <div class="recruitment"> 31 <div class="recruitment-text"> 32 <h3 class="recruitment-first">まずは20日間で、<br>月10万円稼げるスキルを手にいれよう。</h3> 33 <h3 class="recruitment-second">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</h3> 34 <a href="">お問い合わせ<span class="text-span">&amp;</span>資料請求はこちら</a> 35 <h3 class="recruitment-third">第6期生:2019年11月25日<span class="text-span">~</span>2019年12月14日*締め切りました</h3> 36 <h3 class="recruitment-forth">第7期生:2020年2月17日<span class="text-span">~</span>2020年3月7日*締め切りました</h3> 37 <h3 class="recruitment-fifth">第8期生:2020年4月〜5月ごろを予定*資料請求受付中です</h3> 38 </div> 39 <div class="buttons"> 40 <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="iSara[イサラ]|バンコクのノマドエンジニア育成講座" data-url="https://isara.life/" data-lang="ja" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 41 <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="button" data-action="like" data-size="small" data-share="true"></div> 42 </div> 43 </div> 44 <div class="how-to"> 45 <h2>エンジニアとして本当の自由を手に入れるためには?</h2> 46 <p class="how-to-first">エンジニア需要の高まりに伴い、プログラミングスクールが増えています。<br>しかしそこでの学習の先は、 提携して決められた就職先に就職すること。</p> 47 <p class="how-to-second">これで本当にいいのですか?<br>日本人エンジニアはアメリカと較べて給料が格段に低い。<br>その理由がここにあり、 エンジニアは自分の給料をコントロールすべきなのです。</p> 48 <p class="how-to-third">スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。<br>そこで必要なのが<span class="how-to-span">「稼ぐ力」</span>です。</p> 49 </div> 50 <div class="about"> 51 <div class="about-logo"> 52 ABOUT 53 </div> 54 </div> 55 <script type="text/javascript" src="js/jQuery-3.4.1.min.js"></script> 56 <div id="fb-root"></div> 57 <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0&appId=496232624321738&autoLogAppEvents=1"></script> 58 </body> 59</html>

scss

1@charset "utf-8"; 2*{ 3 margin:0; 4 padding:0; 5} 6body{ 7 width:1425px; 8 font-family: "Hiragino Kaku Gothic W3", "ヒラギノ角ゴ W3", "Hiragino Sans", "ヒラギノ角ゴシック W3", sans-serif; 9} 10header{ 11 height:75px; 12 background-color:white; 13 position: fixed; 14 top:0; 15 width:100%; 16 z-index: 1000; 17 .header-left{ 18 float:left; 19 margin-left:1px; 20 img{ 21 height:45px; 22 width:128px; 23 margin-top: 14px; 24 margin-left:127px; 25 26 } 27 p{ 28 display: inline-block; 29 font-size: 14px; 30 letter-spacing: 1.5px; 31 font-weight: 600; 32 color:#333333; 33 vertical-align: bottom; 34 margin-left:0.5px; 35 margin-bottom:9px; 36 } 37 } 38 .header-right{ 39 float:right; 40 a{ 41 display: inline-block; 42 background-color:#da6b64; 43 44 text-decoration: none; 45 color:#fff; 46 font-size: 14px; 47 font-weight:300; 48 letter-spacing:1.5px; 49 border-radius: 25px; 50 padding:11px 40.5px; 51 margin-top: 16px; 52 margin-right:127px; 53 text-align: center; 54 &:hover{ 55 background-color:#d84940; 56 } 57 } 58 } 59} 60.clear{ 61 clear:both; 62} 63.title-top{ 64 height:500px; 65 background-image:url("https://isara.life/wp-content/themes/isara_v2/img/main.jpg"); 66 background-size:cover; 67 background-position: center center; 68 margin-top:75px; 69 .title-text{ 70 padding-top:88px; 71 h2{ 72 color:#333333; 73 line-height: 54px; 74 font-size:28px; 75 font-weight:700; 76 letter-spacing: 1.5px; 77 text-align: center; 78 } 79 img{ 80 display:block; 81 height:111px; 82 margin-top:5px; 83 margin-left: auto; 84 margin-right:auto; 85 } 86 h3{ 87 text-align:center; 88 color:#333333; 89 letter-spacing: 1.5px; 90 margin-top:40px; 91 font-size:20px; 92 line-height: 22px; 93 } 94 } 95} 96.recruitment{ 97 height:600px; 98 background-color:#ebb94d; 99 .recruitment-first{ 100 color:#fff; 101 text-align: center; 102 letter-spacing: 1.5px; 103 line-height: 32px; 104 padding-top:30px; 105 font-size:20px; 106 font-weight:300; 107 } 108 .recruitment-second{ 109 color:#c7254e; 110 width:465px; 111 height:25px; 112 background-color:#f9f2f4; 113 margin-left:auto; 114 margin-right:auto; 115 font-weight:800; 116 font-size:18px; 117 border-radius: 5px; 118 text-align:center; 119 margin-top:15px; 120 font-family:Menlo, Monaco, Consolas, "Courier New", monospace; 121 letter-spacing: 1.5px; 122 } 123 a{ 124 font-size:28px; 125 letter-spacing: 1.5px; 126 font-weight:500; 127 text-decoration: none; 128 width:1030px; 129 height:105px; 130 line-height: 105px; 131 background-color: #da6b64; 132 color:rgb(255, 255, 255); 133 display: block; 134 text-align: center; 135 margin-top:47px; 136 margin-left: auto; 137 margin-right: auto; 138 border-radius: 60px; 139 span{ 140 margin-left:2.5px; 141 margin-right:2.5px; 142 } 143 &:hover{ 144 background-color:#d84940; 145 } 146 } 147 .recruitment-third{ 148 color:rgb(255, 255, 255); 149 font-size:20px; 150 text-align: center; 151 letter-spacing: 2.4px; 152 margin-top:67px; 153 font-weight: 600; 154 } 155 .text-span{ 156 margin-left:8px; 157 margin-right:8px; 158 } 159 .recruitment-forth{ 160 color:rgb(255, 255, 255); 161 font-size:20px; 162 text-align: center; 163 letter-spacing: 2.4px; 164 margin-top:35px; 165 font-weight: 600; 166 } 167 .recruitment-fifth{ 168 color:rgb(255, 255, 255); 169 font-size:20px; 170 text-align: center; 171 letter-spacing: 2.4px; 172 margin-top:35px; 173 font-weight: 600; 174 } 175 .buttons{ 176 margin-top:25px; 177 text-align: center; 178 .twitter-share-button{ 179 display: inline-block; 180 margin-left:7px; 181 } 182 .fb-like{ 183 vertical-align: bottom; 184 margin-bottom:5.5px; 185 } 186 } 187} 188.how-to{ 189 height:547px; 190 background-image:url("https://isara.life/wp-content/themes/isara_v2/img/introbottom.jpg"); 191 background-size:cover; 192 background-position:center center; 193 padding-top:40px; 194 h2{ 195 color:#333333; 196 font-size:28px; 197 font-weight:500; 198 letter-spacing: 1.5px; 199 text-align: center; 200 width:860px; 201 height:92px; 202 line-height: 95px; 203 204 margin-left:auto; 205 margin-right:auto; 206 padding-top:8px; 207 position:relative; 208 &::before, &::after{ 209 content:''; 210 width:46px; 211 height:46px; 212 position:absolute; 213 } 214 &::before{ 215 border-left:solid 4px #ebb94d; 216 border-top:solid 4px #ebb94d; 217 top:0; 218 left:0; 219 } 220 &::after{ 221 border-right:solid 4px #ebb94d; 222 border-bottom:solid 4px #ebb94d; 223 bottom:0; 224 right:0; 225 } 226 } 227 .how-to-first{ 228 color:rgb(51, 51, 51); 229 font-size:20px; 230 font-weight:300; 231 text-align: center; 232 margin-top: 40px; 233 letter-spacing: 1.5px; 234 line-height: 32px; 235 } 236 .how-to-second{ 237 color:rgb(51, 51, 51); 238 font-size:20px; 239 font-weight:300; 240 text-align: center; 241 letter-spacing: 1.5px; 242 line-height: 32px; 243 margin-top:24px; 244 } 245 .how-to-third{ 246 color:rgb(51, 51, 51); 247 font-size:20px; 248 font-weight:300; 249 text-align: center; 250 letter-spacing: 1.5px; 251 line-height: 32px; 252 margin-top:24px; 253 } 254 .how-to-span{ 255 font-weight:600; 256 margin-left:10px; 257 background:linear-gradient(180deg,#fff 0%,#fff 70%,#ebb94d 70%,#ebb94d 100%); 258 } 259} 260.about{ 261 height:555px; 262 background-color:#fef5e0; 263 overflow: hidden; 264 .about-logo{ 265 height:80px; 266 width:80px; 267 line-height: 80px; 268 background-color: #ebb94d; 269 border-radius: 50%; 270 text-align: center; 271 margin-top:-40px; 272 margin-left:auto; 273 margin-right:auto; 274 color: #fff; 275 font-weight:200; 276 font-size:14px; 277 letter-spacing: 1.5px; 278 z-index: 1000; 279 } 280 h2{ 281 color:#333333; 282 font-size:28px; 283 font-weight:500; 284 line-height: 40px; 285 letter-spacing: 1.5px; 286 text-align: center; 287 width:860px; 288 height:105px; 289 margin-top: 40px; 290 margin-left: auto; 291 margin-right:auto; 292 padding-top:35px; 293 position:relative; 294 &::before, &::after{ 295 content:''; 296 width:46px; 297 height:46px; 298 position:absolute; 299 } 300 &::before{ 301 border-left:solid 4px #ebb94d; 302 border-top:solid 4px #ebb94d; 303 top:0; 304 left:0; 305 } 306 &::after{ 307 border-right:solid 4px #ebb94d; 308 border-bottom:solid 4px #ebb94d; 309 bottom:0; 310 right:0; 311 } 312 .about-span{ 313 letter-spacing: 1.7px; 314 } 315 } 316}

イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

上に要素を引き上げたい場合、

css

1.className { 2 margin-top: -40px; 3}

css

1position: relative; // 要素によってはabsolute 2top: -40px;

で上げることができます。

投稿2020/02/11 06:30

jackmiwamiwa

総合スコア395

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

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

reo_fukkase

2020/02/11 06:56

overflow:hiddenにして、aboutのabout-logoとaboutのh2に、それぞれmargin-top:-40px;とmargin-bottom:20px;を指定しました。 aboutのh2に関しては、思い通りになったのですが、about-logoは、位置は良いのですが、写真のように被ってしまいました。
jackmiwamiwa

2020/02/11 07:16

overflow:hiddenが原因だと思います
reo_fukkase

2020/02/11 07:29

overflowを消すと、marginが効かなくなってしまいます。
jackmiwamiwa

2020/02/11 07:35

position: relative; top: -40px; のほうでしたら反応すると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問