teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

cssを追加しました

2018/08/16 11:37

投稿

Malas
Malas

スコア112

title CHANGED
File without changes
body CHANGED
@@ -30,11 +30,238 @@
30
30
  width:100%;
31
31
  }
32
32
  ```
33
+ ### home.scss
34
+
35
+ ```
36
+ * {
37
+ box-sizing: border-box;
38
+ }
39
+
40
+ html {
41
+ font: 100%/1.5 'Avenir Next', 'Hiragino Sans', sans-serif;
42
+ line-height: 1.7;
43
+ letter-spacing: 1px;
44
+ }
45
+
46
+ ul, li {
47
+ list-style-type: none;
48
+ padding: 0;
49
+ margin: 0;
50
+ }
51
+
52
+ a {
53
+ text-decoration: none;
54
+ color: #2d3133;
55
+ font-size: 14px;
56
+ }
57
+
58
+ h1, h2, h3, h4, h5, h6, p {
59
+ margin: 0;
60
+ }
61
+ input {
62
+ background-color: transparent;
63
+ outline-width: 0;
64
+ }
65
+
66
+ form input[type="submit"] {
67
+ border: none;
68
+ cursor: pointer;
69
+ }
70
+
71
+ body {
72
+ color: #2d3133;
73
+ background-color: #3ecdc6;
74
+ margin: 0;
75
+ min-height: 1vh;
76
+ }
77
+
78
+ .main {
79
+ position: absolute;
80
+ top: 64px;
81
+ width: 100%;
82
+ height: auto;
83
+ min-height: 100%;
84
+ background-color: #f5f8fa;
85
+ }
86
+
87
+ .container {
88
+ max-width: 600px;
89
+ margin: 60px auto;
90
+ padding-left: 15px;
91
+ padding-right: 15px;
92
+ clear: both;
93
+ }
94
+
95
+ header {
96
+ height: 64px;
97
+ position: absolute;
98
+ z-index: 1;
99
+ width: 100%;
100
+ }
101
+
102
+ .header-logo {
103
+ float: left;
104
+ padding-left: 20px;
105
+ color: white;
106
+ font-size: 22px;
107
+ line-height: 64px;
108
+ }
109
+
110
+ .header-logo a{
111
+ color: white;
112
+ font-size: 22px;
113
+ }
114
+
115
+ .header-menus {
116
+ float: right;
117
+ padding-right: 20px;
118
+ }
119
+
120
+ .header-menus li {
121
+ float: left;
122
+ line-height: 64px;
123
+ font-size: 13px;
124
+ color: white;
125
+ padding-left: 15px;
126
+ }
127
+
128
+ .header-menus a {
129
+ float: left;
130
+ font-size: 13px;
131
+ color: white;
132
+ }
133
+
134
+ .header-menus .fa {
135
+ padding-right: 5px;
136
+ }
137
+
138
+ .header-menus input[type="submit"] {
139
+ padding: 0 20px;
140
+ float: left;
141
+ line-height: 64px;
142
+ color: white;
143
+ margin: 0;
144
+ font-size: 13px;
145
+ }
146
+
147
+ .top-main {
148
+ padding: 200px 0 100px;
149
+ text-align: center;
150
+ position: absolute;
151
+ top: 0;
152
+ width: 100%;
153
+ height: auto;
154
+ min-height: 100%;
155
+ color: white;
156
+ background-color: #3ecdc6;
157
+ background-repeat: no-repeat;
158
+ background-position: center 50%;
159
+ background-size: cover;
160
+ background-image:url("../top.png");
161
+ }
162
+
163
+ .top-message {
164
+ position: relative;
165
+ }
166
+
167
+ .top-main h2 {
168
+ font-size: 70px;
169
+ font-weight: 500;
170
+ line-height: 1.3;
171
+ -webkit-font-smoothing: antialiased;
172
+ margin-bottom: 20px;
173
+ color:gold;
174
+ font-weight:bold;
175
+ }
176
+
177
+ .top-main p {
178
+ font-size: 24px;
179
+ color:gold;
180
+ font-weight:bold;
181
+ }
182
+
183
+ .about-main {
184
+ padding: 180px 8% 0;
185
+ color: white;
186
+ }
187
+
188
+ .about-main h2 {
189
+ font-size: 64px;
190
+ font-weight: 500;
191
+ line-height: 1.4;
192
+ }
193
+
194
+ .about-main p {
195
+ font-weight: 200;
196
+ font-size: 20px;
197
+ }
198
+
199
+ .about-img {
200
+ width: 84%;
201
+ }
202
+
203
+ .form {
204
+ max-width: 600px;
205
+ margin: 0 auto;
206
+ background-color: white;
207
+ box-shadow: 0 2px 6px #c1ced7;
208
+ }
209
+
210
+ .form-heading {
211
+ font-weight: 300;
212
+ margin: 60px 0 20px;
213
+ font-size: 48px;
214
+ color: #bcc8d4;
215
+ }
216
+
217
+ .form-body {
218
+ padding: 30px;
219
+ }
220
+
221
+ .form-error {
222
+ color: #ff4d75;
223
+ }
224
+
225
+ .form input {
226
+ width: 100%;
227
+ border: 1px solid #d8dadf;
228
+ padding: 10px;
229
+ color: #57575f;
230
+ font-size: 16px;
231
+ letter-spacing: 2px;
232
+ border-radius: 2px;
233
+ }
234
+
235
+ .form textarea {
236
+ width: 100%;
237
+ min-height: 110px;
238
+ font-size: 16px;
239
+ letter-spacing: 2px;
240
+ }
241
+
242
+ .form input[type="submit"] {
243
+ background-color: #3ecdc6;
244
+ color: white;
245
+ cursor: pointer;
246
+ font-weight: 300;
247
+ width: 120px;
248
+ border-radius: 2px;
249
+ margin-top: 8px;
250
+ margin-bottom: 0;
251
+ float: right;
252
+ }
253
+
254
+ .form-body:after {
255
+ content: '';
256
+ display: table;
257
+ clear: both;
258
+ }
259
+ ```
260
+
33
261
  ### 試したこと
34
262
 
35
263
  float:left;と記入しても真ん中に表示されたままです。
36
264
 
37
- githubも貼っておきます。
38
- https://github.com/malas-kohei/bolehboleh.git
39
265
 
266
+
40
267
  よろしくお願いいたします。

1

githubを加えました

2018/08/16 11:37

投稿

Malas
Malas

スコア112

title CHANGED
File without changes
body CHANGED
@@ -34,4 +34,7 @@
34
34
 
35
35
  float:left;と記入しても真ん中に表示されたままです。
36
36
 
37
+ githubも貼っておきます。
38
+ https://github.com/malas-kohei/bolehboleh.git
39
+
37
40
  よろしくお願いいたします。