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

質問編集履歴

2

誤字修正

2019/10/29 00:52

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -101,11 +101,11 @@
101
101
  background: #fff;
102
102
  }
103
103
 
104
- #header{
104
+ .header{
105
105
  text-align: center;
106
106
  }
107
107
 
108
- #mainImg img{
108
+ .mainImg img{
109
109
  position: absolute;
110
110
  left: 50%;
111
111
  max-width: 1280px;
@@ -144,7 +144,7 @@
144
144
  padding-bottom: 80px;
145
145
  }
146
146
 
147
- #sec03 img{
147
+ .sec03 img{
148
148
  width: 100%;
149
149
  margin-bottom: 30px;
150
150
  }
@@ -247,12 +247,12 @@
247
247
  }
248
248
 
249
249
  @media only screen and (max-width: 799px){
250
- #header{
250
+ .header{
251
251
  width: 100%;
252
252
  z-index: 500;
253
253
  }
254
254
 
255
- #headerWrap{
255
+ .headerWrap{
256
256
  position: relative;
257
257
  width: 100%;
258
258
  height: 70px;
@@ -260,17 +260,17 @@
260
260
  border-bottom: 1px solid #ccc;
261
261
  }
262
262
 
263
- #header h1{
263
+ .header h1{
264
264
  padding-top: 10px;
265
265
  }
266
266
 
267
- #header h1 img{
267
+ .header h1 img{
268
268
  margin-top: 3px;
269
269
  max-height: 45px;
270
270
  width: auto !important;
271
271
  }
272
272
 
273
- #mainImg{
273
+ .mainImg{
274
274
  padding-top: 60px;
275
275
  z-index: -100;
276
276
  }

1

該当ファイルのコードを添付しました。

2019/10/29 00:51

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -19,4 +19,269 @@
19
19
  stylesheets/***.scss...[ERROR]
20
20
 
21
21
  と表示されましたが、ERRORのファイルのどこがエラーとなっているのかいまいちわかりません。
22
- ど初心者なので初歩的な質問で申し訳ありませんがよろしくお願い致します。
22
+ ど初心者なので初歩的な質問で申し訳ありませんがよろしくお願い致します。
23
+
24
+
25
+ =====該当ファイルコード=====
26
+
27
+ // Place all the styles related to the post controller here.
28
+ // They will automatically be included in application.css.
29
+ // You can use Sass (SCSS) here: http://sass-lang.com/
30
+
31
+ .contact-form {
32
+ border: 1px solid #ccc;
33
+ padding: 10px;
34
+ font-size: 13px;
35
+ font-family: sans-serif;
36
+ }
37
+ .contact-form .item {
38
+ display: block;
39
+ overflow: hidden;
40
+ margin-bottom: 10px;
41
+ }
42
+ .contact-form .item.no-label {
43
+ padding: 5px 0px 5px 60px;
44
+ }
45
+ .contact-form .item .label {
46
+ float: left;
47
+ padding: 5px;
48
+ margin:0;
49
+ }
50
+ .contact-form .item .radio-group{
51
+ padding: 5px 0px 5px 60px;
52
+ }
53
+ .contact-form .item input[type=text],
54
+ .contact-form .item input[type=email],
55
+ .contact-form .item textarea {
56
+ display: block;
57
+ margin-left: 60px;
58
+ width: 200px;
59
+ padding: 5px;
60
+ border: 1px solid #ccc;
61
+ box-sizing: border-box;
62
+ font-size: 13px;
63
+ }
64
+ .contact-form .item ::placeholder {
65
+ color: #ccc;
66
+ }
67
+ .contact-form .item textarea {
68
+ outline: none;
69
+ border: 1px solid #ccc;
70
+ resize: vertical;
71
+ }
72
+ input[type=submit] {
73
+ border: none;
74
+ outline: none;
75
+ display: block;
76
+ line-height: 30px;
77
+ width: 160px;
78
+ text-align: center;
79
+ font-size: 13px;
80
+ color: #fff;
81
+ background-color: #696;
82
+ border-bottom: 4px solid #464;
83
+ cursor:pointer;
84
+
85
+ box-sizing: content-box;
86
+ transition:0.1s ease all
87
+ }
88
+ input[type=submit]:hover{
89
+ opacity:0.6;
90
+ }
91
+
92
+ ==========================
93
+
94
+
95
+ body{
96
+ font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
97
+ font-weight: 300;
98
+ -webkit-text-size-adjust:100%;
99
+ overflow-x: hidden;
100
+ color: #000;
101
+ background: #fff;
102
+ }
103
+
104
+ #header{
105
+ text-align: center;
106
+ }
107
+
108
+ #mainImg img{
109
+ position: absolute;
110
+ left: 50%;
111
+ max-width: 1280px;
112
+ width: 1280px;
113
+ height: 528px;
114
+ margin-left: -640px;
115
+ }
116
+
117
+
118
+
119
+
120
+ section{
121
+ clear:both;
122
+ padding-top: 70px;
123
+ }
124
+
125
+ section h2{
126
+ font-family: 'メイリオ';
127
+ width: 60%;
128
+ margin: 0 auto 40px;
129
+ font-size: 22px;
130
+ font-weight:normal;
131
+ text-align: center;
132
+ background: url(../borderBlack.png) repeat-x 0 50%;
133
+ background-size: 1px 1px;
134
+ }
135
+
136
+ section h2 span {
137
+ background: #fff;
138
+ padding: 0 80px;
139
+ }
140
+
141
+ .innerS{
142
+ width: 60%;
143
+ margin: 0 auto;
144
+ padding-bottom: 80px;
145
+ }
146
+
147
+ #sec03 img{
148
+ width: 100%;
149
+ margin-bottom: 30px;
150
+ }
151
+
152
+ /* Form Layout */
153
+ .form-wrapper {
154
+ background: #fafafa;
155
+ margin: 3em auto;
156
+ padding: 0 1em;
157
+ max-width: 370px;
158
+ }
159
+
160
+ h1 {
161
+ text-align: center;
162
+ padding: 1em 0;
163
+ }
164
+
165
+ form {
166
+ padding: 0 1.5em;
167
+ }
168
+
169
+ .form-item {
170
+ margin-bottom: 0.75em;
171
+ width: 100%;
172
+ }
173
+
174
+ .form-item input {
175
+ background: #fafafa;
176
+ border: none;
177
+ border-bottom: 2px solid #e9e9e9;
178
+ color: #666;
179
+ font-family: 'Open Sans', sans-serif;
180
+ font-size: 1em;
181
+ height: 50px;
182
+ transition: border-color 0.3s;
183
+ width: 100%;
184
+ }
185
+
186
+ .form-item input:focus {
187
+ border-bottom: 2px solid #c0c0c0;
188
+ outline: none;
189
+ }
190
+
191
+ .button-panel {
192
+ margin: 2em 0 0;
193
+ width: 100%;
194
+ }
195
+
196
+ .button-panel .button {
197
+ background: #f16272;
198
+ border: none;
199
+ color: #fff;
200
+ cursor: pointer;
201
+ height: 50px;
202
+ font-family: 'Open Sans', sans-serif;
203
+ font-size: 1.2em;
204
+ letter-spacing: 0.05em;
205
+ text-align: center;
206
+ text-transform: uppercase;
207
+ width: 100%;
208
+ }
209
+
210
+ .button:hover {
211
+ background: #ee3e52;
212
+ }
213
+
214
+ .form-footer {
215
+ font-size: 1em;
216
+ padding: 2em 0;
217
+ text-align: center;
218
+ }
219
+
220
+ .form-footer a {
221
+ color: #8c8c8c;
222
+ text-decoration: none;
223
+ transition: border-color 0.3s;
224
+ }
225
+
226
+ .form-footer a:hover {
227
+ border-bottom: 1px dotted #8c8c8c;
228
+ }
229
+
230
+ /* RESPONSIVE 設定
231
+ ------------------------------------------------------------*/
232
+
233
+ @media only screen and (min-width: 800px){
234
+ body{
235
+ font-size:14px;
236
+ }
237
+
238
+
239
+ }
240
+
241
+ @media only screen and (max-width: 640px){
242
+ .innerS{
243
+ width: 94%;
244
+ padding-bottom: 70px;
245
+ }
246
+
247
+ }
248
+
249
+ @media only screen and (max-width: 799px){
250
+ #header{
251
+ width: 100%;
252
+ z-index: 500;
253
+ }
254
+
255
+ #headerWrap{
256
+ position: relative;
257
+ width: 100%;
258
+ height: 70px;
259
+ background: #fff;
260
+ border-bottom: 1px solid #ccc;
261
+ }
262
+
263
+ #header h1{
264
+ padding-top: 10px;
265
+ }
266
+
267
+ #header h1 img{
268
+ margin-top: 3px;
269
+ max-height: 45px;
270
+ width: auto !important;
271
+ }
272
+
273
+ #mainImg{
274
+ padding-top: 60px;
275
+ z-index: -100;
276
+ }
277
+
278
+ section{
279
+ padding-top: 50px;
280
+ }
281
+ section h2{
282
+ margin: 0 auto 20px;
283
+ }
284
+ section h2 span {
285
+ padding: 0 30px;
286
+ }
287
+ }