質問編集履歴
3
SCSSからCSSコンパイルに書き換え、画像の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,6 +5,10 @@
|
|
|
5
5
|
原因と解決策を教えて頂きたいです。
|
|
6
6
|
お願いします。
|
|
7
7
|
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
8
12
|
```html
|
|
9
13
|
|
|
10
14
|
<!DOCTYPE html>
|
|
@@ -51,72 +55,34 @@
|
|
|
51
55
|
</body>
|
|
52
56
|
</html>
|
|
53
57
|
```
|
|
54
|
-
```
|
|
58
|
+
```CSS
|
|
55
|
-
|
|
59
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
56
60
|
|
|
57
|
-
.header-main {
|
|
58
|
-
height:75px;
|
|
59
|
-
width:100%;
|
|
60
|
-
background-color: white;
|
|
61
|
+
.header-main { height: 75px; width: 100%; background-color: white; align-items: baseline; position: fixed; z-index: 50; }
|
|
61
|
-
align-items: baseline;
|
|
62
|
-
position:fixed;
|
|
63
|
-
z-index: 50;
|
|
64
|
-
}
|
|
65
62
|
|
|
66
|
-
//ヘッダータイトル
|
|
67
|
-
.header-title {
|
|
68
|
-
margin:0 366.5px;
|
|
69
|
-
padding:20px 0;
|
|
70
|
-
width:100%;
|
|
71
|
-
display:flex;
|
|
72
|
-
|
|
63
|
+
.header-title { margin: 0 366.5px; padding: 20px 0; width: 100%; display: flex; align-items: baseline; position: relative; }
|
|
73
|
-
position:relative;
|
|
74
|
-
.logo {margin-top: -6px;}
|
|
75
|
-
img { width:128px;
|
|
76
|
-
vertical-align:bottom; }
|
|
77
|
-
}
|
|
78
64
|
|
|
79
|
-
//ヘッダーサブタイトル
|
|
80
|
-
.subtitle {
|
|
81
|
-
display: inline-block;
|
|
82
|
-
p { font-size:14px;
|
|
83
|
-
font-weight: bold;
|
|
84
|
-
display:inline-block;
|
|
85
|
-
|
|
65
|
+
.header-title .logo { margin-top: -6px; }
|
|
86
|
-
}
|
|
87
66
|
|
|
88
|
-
//問い合わせボタン
|
|
89
|
-
#header-btn {
|
|
90
|
-
padding:11px 40px;
|
|
91
|
-
background-color: #da6b64;;
|
|
92
|
-
border-radius:50px;
|
|
93
|
-
position:absolute;
|
|
94
|
-
bottom:16px;
|
|
95
|
-
right:366.5px;
|
|
96
|
-
p { font-size:14px;
|
|
97
|
-
color:white;
|
|
98
|
-
|
|
67
|
+
.header-title img { width: 128px; vertical-align: bottom; }
|
|
99
|
-
}
|
|
100
68
|
|
|
101
|
-
//ホームのCSS
|
|
102
|
-
.home {
|
|
103
|
-
background-image:url(img/main.jpg);
|
|
104
|
-
background-size: 100%;
|
|
105
|
-
background-position: center center;
|
|
106
|
-
height:500px;
|
|
107
|
-
text-align: center;
|
|
108
|
-
padding:90px 0;
|
|
109
|
-
//ホームタイトル
|
|
110
|
-
.text {
|
|
111
|
-
@include large-font;
|
|
112
|
-
p{margin-bottom:10px; } }
|
|
113
|
-
//ホームロゴ
|
|
114
|
-
.home-logo {
|
|
115
|
-
width:317px;
|
|
116
|
-
margin-bottom:20px;
|
|
117
|
-
}
|
|
118
|
-
//ホームタイトル下
|
|
119
|
-
|
|
69
|
+
.subtitle { display: inline-block; }
|
|
120
|
-
}
|
|
121
70
|
|
|
71
|
+
.subtitle p { font-size: 14px; font-weight: bold; display: inline-block; }
|
|
72
|
+
|
|
73
|
+
#header-btn { padding: 11px 40px; background-color: #da6b64; border-radius: 50px; position: absolute; bottom: 16px; right: 366.5px; }
|
|
74
|
+
|
|
75
|
+
#header-btn p { font-size: 14px; color: white; }
|
|
76
|
+
|
|
77
|
+
.home { background-image: url(img/main.jpg); background-size: 100%; background-position: center center; height: 500px; text-align: center; padding: 90px 0; }
|
|
78
|
+
|
|
79
|
+
.home .text { font-size: 28px; font-weight: 600; letter-spacing: 0.1em; line-height: 1.6; }
|
|
80
|
+
|
|
81
|
+
.home .text p { margin-bottom: 10px; }
|
|
82
|
+
|
|
83
|
+
.home .home-logo { width: 317px; margin-bottom: 20px; }
|
|
84
|
+
|
|
85
|
+
.home .text-bottom { font-size: 20px; font-weight: 600; letter-spacing: 0.1em; line-height: 1.6; }
|
|
86
|
+
|
|
87
|
+
|
|
122
88
|
```
|
2
htmlコード、コード名をSCSSに
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -48,9 +48,10 @@
|
|
|
48
48
|
|
|
49
49
|
</div>
|
|
50
50
|
</div>
|
|
51
|
-
|
|
51
|
+
</body>
|
|
52
|
+
</html>
|
|
52
53
|
```
|
|
53
|
-
```
|
|
54
|
+
```SCSS
|
|
54
55
|
//ヘッターのCSS
|
|
55
56
|
|
|
56
57
|
.header-main {
|
1
headを追記しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,7 +7,22 @@
|
|
|
7
7
|
|
|
8
8
|
```html
|
|
9
9
|
|
|
10
|
+
<!DOCTYPE html>
|
|
11
|
+
<html>
|
|
12
|
+
<head>
|
|
13
|
+
<meta charset="utf-8">
|
|
14
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
15
|
+
<title>iSara[イサラ]｜バンコクのノマドエンジニア育成講座</title>
|
|
16
|
+
<link rel="stylesheet" href="stylesheet.css">
|
|
17
|
+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap" rel="stylesheet">
|
|
18
|
+
<link rel="icon" href="img/favicon.ico">
|
|
19
|
+
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
|
|
20
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
|
21
|
+
<script type="text/javascript" src="js/script.js"></script>
|
|
22
|
+
<script src="https://kit.fontawesome.com/646ee2a69d.js" crossorigin="anonymous"></script>
|
|
23
|
+
</head>
|
|
10
24
|
|
|
25
|
+
<body>
|
|
11
26
|
<div class="header-main">
|
|
12
27
|
<div class="header-title">
|
|
13
28
|
<div class="logo">
|