質問編集履歴

3

文章の改善

2019/07/23 16:16

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- sassで書いたコードが反映されない
1
+ sassで書いたコードが反映されない
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  sass導入手順に従いRuby、sassインストールは問題なく終了していることを確認済です。
10
10
 
11
- VSCodeの拡張機能「Easy Sass」を使い自動コンパイルも問題なく行われ、コードのミスもないことを確認しています。
11
+ VSCodeの拡張機能「Easy Sass」を使い自動コンパイルも問題なく行われ、コードのミスもないことを確認しています。初歩的な質問で申し訳ありませんが宜しくお願い致します。
12
12
 
13
13
 
14
14
 

2

誤字

2019/07/23 16:16

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -50,7 +50,7 @@
50
50
 
51
51
  }
52
52
 
53
- ```html```css
53
+ ```css
54
54
 
55
55
  /* Basic */
56
56
 
@@ -242,6 +242,8 @@
242
242
 
243
243
  ```
244
244
 
245
+ ```html
246
+
245
247
  <!DOCTYPE html>
246
248
 
247
249
  <html lang="ja">

1

コードの追記

2019/07/23 15:21

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,8 @@
1
+ ```ここに言語を入力
2
+
3
+ コード
4
+
1
- ### 前提・実現したいこと
5
+ ```### 前提・実現したいこと
2
6
 
3
7
  sassを使いたい
4
8
 
@@ -46,12 +50,286 @@
46
50
 
47
51
  }
48
52
 
49
- ```ここに言語名を入力
53
+ ```html```css
54
+
50
-
55
+ /* Basic */
56
+
57
+ * {
58
+
59
+ margin: 0;
60
+
61
+ padding: 0;
62
+
63
+ }
64
+
65
+
66
+
51
- ソースコード
67
+ body {
68
+
69
+ font-family: 'Yu Gothic';
70
+
71
+ }
72
+
73
+
74
+
75
+ .container {
76
+
77
+ width: 1366px;
78
+
79
+ max-width: 100%;
80
+
81
+ margin: 0 auto;
82
+
83
+ }
84
+
85
+
86
+
87
+ li {
88
+
89
+ list-style: none;
90
+
91
+ }
92
+
93
+
94
+
95
+ a {
96
+
97
+ text-decoration: none;
98
+
99
+ color: #fff;
100
+
101
+ }
102
+
103
+
104
+
105
+ /* Header */
106
+
107
+ header {
108
+
109
+ height: 100px;
110
+
111
+ background-color: #3F51B5;
112
+
113
+ box-shadow: 0 3px 3px;
114
+
115
+ position: fixed;
116
+
117
+ top: 0;
118
+
119
+ left: 0;
120
+
121
+ width: 100%;
122
+
123
+ box-shadow: 0 3px 3px #000000;
124
+
125
+ }
126
+
127
+ .header-contents {
128
+
129
+ display: flex;
130
+
131
+ justify-content: space-between;
132
+
133
+ }
134
+
135
+
136
+
137
+ .header-left {
138
+
139
+ margin: 31px 0 30px 140px;
140
+
141
+ width: 200px;
142
+
143
+ height: 39px;
144
+
145
+ }
146
+
147
+
148
+
149
+ .header-right {
150
+
151
+ width: 344px;
152
+
153
+ height: 25.5px;
154
+
155
+ margin: 40px 140px 34.5px 0;
156
+
157
+ font-size: 16px
158
+
159
+ }
160
+
161
+
162
+
163
+ /* Main Page */
164
+
165
+ .main-wrapper {
166
+
167
+ text-align: center;
168
+
169
+ height:700px;
170
+
171
+ background-image: url(../img/main-img.jpg);
172
+
173
+ background-size: cover;
174
+
175
+ padding-top: 100px;
176
+
177
+ }
178
+
179
+
180
+
181
+ .main-wrapper h1 {
182
+
183
+ width: 748px;
184
+
185
+ height: 87px;
186
+
187
+ padding-top: 249px;
188
+
189
+ margin-bottom:12px;
190
+
191
+ margin:0 auto;
192
+
193
+ font-size: 68px;
194
+
195
+ line-height: 108px;
196
+
197
+ }
198
+
199
+ .main-wrapper p {
200
+
201
+ width: 342px;
202
+
203
+ height: 49px;
204
+
205
+ padding-bottom:82px;
206
+
207
+ margin:0 auto;
208
+
209
+ font-size: 38px;
210
+
211
+ font-weight: bold;
212
+
213
+ line-height: 61px;
214
+
215
+ }
216
+
217
+ .btn {
218
+
219
+ width: 228px;
220
+
221
+ height: 49px;
222
+
223
+ padding: 17px 81px;
224
+
225
+ margin-bottom: 138px;
226
+
227
+ display: inline-block;
228
+
229
+ background-color:#3F51B5;
230
+
231
+ border-radius: 12px;
232
+
233
+ box-shadow: 0 3px 6px #000000;
234
+
235
+ font-size: 38px;
236
+
237
+ font-weight: bold;
238
+
239
+ }
240
+
241
+
52
242
 
53
243
  ```
54
244
 
245
+ <!DOCTYPE html>
246
+
247
+ <html lang="ja">
248
+
249
+
250
+
251
+ <head>
252
+
253
+ <meta charset="UTF-8">
254
+
255
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
256
+
257
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
258
+
259
+ <link rel="stylesheet" href="css/style.css">
260
+
261
+ <title>Document</title>
262
+
263
+ </head>
264
+
265
+
266
+
267
+ <body>
268
+
269
+ <!-- Start Header -->
270
+
271
+ <header>
272
+
273
+ <div class="container header-contents">
274
+
275
+ <div class="header-left">
276
+
277
+ <img src="img/logo.png" class="logo">
278
+
279
+ </div>
280
+
281
+ <div class="header-right">
282
+
283
+ <ul class="header-list">
284
+
285
+ <li><a href="#card">Card</a></li>
286
+
287
+ <li><a href="#news">News</a></li>
288
+
289
+ <li><a href="#price">Price</a></li>
290
+
291
+ <li><a href="#access">Access</a></li>
292
+
293
+ <li><a href="#contact">Contact</a></li>
294
+
295
+ </ul>
296
+
297
+ </div>
298
+
299
+ </div>
300
+
301
+ </header>
302
+
303
+ <!-- End Header -->
304
+
305
+ <!-- Start Main Page -->
306
+
307
+ <section class="main-wrapper">
308
+
309
+ <div class="container">
310
+
311
+ <h1>一番伝えたいことを書く</h1>
312
+
313
+ <p>リードリードリード</p>
314
+
315
+ <a href="#" class="btn">お問い合わせ</a>
316
+
317
+ </div>
318
+
319
+ </section>
320
+
321
+ <!-- End Main Page -->
322
+
323
+ <script src="js/script.js"></script>
324
+
325
+ </body>
326
+
327
+
328
+
329
+ </html>
330
+
331
+ ```
332
+
55
333
 
56
334
 
57
335
  ### 試したこと