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

エンジニアとして本当の自由を手に入れるためには？

エンジニア需要の高まりに伴い、プログラミングスクールが増えています。
しかしそこでの学習の先は、提携して決められた就職先に就職すること。

これで本当にいいのですか？
日本人エンジニアはアメリカと較べて給料が格段に低い。
その理由がここにあり、エンジニアは自分の給料をコントロールすべきなのです。

スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。
そこで必要なのが「稼ぐ力」です。

試したことは、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">まずは２０日間で、<br>月１０万円稼げるスキルを手にいれよう。</h3>
33				<h3 class="recruitment-second">※受講料金は実質０円です。詳しくは資料請求をどうぞ。</h3>
34				<a href="">お問い合わせ<span class="text-span">&amp;</span>資料請求はこちら</a>
35				<h3 class="recruitment-third">第６期生：2019年11月25日<span class="text-span">~</span>2019年12月14日＊締め切りました</h3>
36				<h3 class="recruitment-forth">第７期生：2020年2月17日<span class="text-span">~</span>2020年3月7日＊締め切りました</h3>
37				<h3 class="recruitment-fifth">第８期生：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}

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

か

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

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

投稿2020/02/11 06:30

jackmiwamiwa

総合スコア408

reo_fukkase

2020/02/11 06:56

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