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

質問編集履歴

3

文章の改善

2019/07/23 16:16

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- sassで書いたコードが反映されない
1
+ sassで書いたコードが反映されない
body CHANGED
@@ -3,7 +3,7 @@
3
3
  ```### 前提・実現したいこと
4
4
  sassを使いたい
5
5
  sass導入手順に従いRuby、sassインストールは問題なく終了していることを確認済です。
6
- VSCodeの拡張機能「Easy Sass」を使い自動コンパイルも問題なく行われ、コードのミスもないことを確認しています。
6
+ VSCodeの拡張機能「Easy Sass」を使い自動コンパイルも問題なく行われ、コードのミスもないことを確認しています。初歩的な質問で申し訳ありませんが宜しくお願い致します。
7
7
 
8
8
  ### 発生している問題・エラーメッセージ
9
9
  sassで書いたコード(下記に貼りつけています)を保存したのちブラウザで確認しますが反映されておりません。

2

誤字

2019/07/23 16:16

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -24,7 +24,7 @@
24
24
  }
25
25
  }
26
26
  }
27
- ```html```css
27
+ ```css
28
28
  /* Basic */
29
29
  * {
30
30
  margin: 0;
@@ -120,6 +120,7 @@
120
120
  }
121
121
 
122
122
  ```
123
+ ```html
123
124
  <!DOCTYPE html>
124
125
  <html lang="ja">
125
126
 

1

コードの追記

2019/07/23 15:21

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,6 @@
1
+ ```ここに言語を入力
2
+ コード
1
- ### 前提・実現したいこと
3
+ ```### 前提・実現したいこと
2
4
  sassを使いたい
3
5
  sass導入手順に従いRuby、sassインストールは問題なく終了していることを確認済です。
4
6
  VSCodeの拡張機能「Easy Sass」を使い自動コンパイルも問題なく行われ、コードのミスもないことを確認しています。
@@ -22,10 +24,147 @@
22
24
  }
23
25
  }
24
26
  }
25
- ```ここに言語名を入力
27
+ ```html```css
28
+ /* Basic */
29
+ * {
30
+ margin: 0;
31
+ padding: 0;
32
+ }
33
+
26
- ソースコード
34
+ body {
35
+ font-family: 'Yu Gothic';
36
+ }
37
+
38
+ .container {
39
+ width: 1366px;
40
+ max-width: 100%;
41
+ margin: 0 auto;
42
+ }
43
+
44
+ li {
45
+ list-style: none;
46
+ }
47
+
48
+ a {
49
+ text-decoration: none;
50
+ color: #fff;
51
+ }
52
+
53
+ /* Header */
54
+ header {
55
+ height: 100px;
56
+ background-color: #3F51B5;
57
+ box-shadow: 0 3px 3px;
58
+ position: fixed;
59
+ top: 0;
60
+ left: 0;
61
+ width: 100%;
62
+ box-shadow: 0 3px 3px #000000;
63
+ }
64
+ .header-contents {
65
+ display: flex;
66
+ justify-content: space-between;
67
+ }
68
+
69
+ .header-left {
70
+ margin: 31px 0 30px 140px;
71
+ width: 200px;
72
+ height: 39px;
73
+ }
74
+
75
+ .header-right {
76
+ width: 344px;
77
+ height: 25.5px;
78
+ margin: 40px 140px 34.5px 0;
79
+ font-size: 16px
80
+ }
81
+
82
+ /* Main Page */
83
+ .main-wrapper {
84
+ text-align: center;
85
+ height:700px;
86
+ background-image: url(../img/main-img.jpg);
87
+ background-size: cover;
88
+ padding-top: 100px;
89
+ }
90
+
91
+ .main-wrapper h1 {
92
+ width: 748px;
93
+ height: 87px;
94
+ padding-top: 249px;
95
+ margin-bottom:12px;
96
+ margin:0 auto;
97
+ font-size: 68px;
98
+ line-height: 108px;
99
+ }
100
+ .main-wrapper p {
101
+ width: 342px;
102
+ height: 49px;
103
+ padding-bottom:82px;
104
+ margin:0 auto;
105
+ font-size: 38px;
106
+ font-weight: bold;
107
+ line-height: 61px;
108
+ }
109
+ .btn {
110
+ width: 228px;
111
+ height: 49px;
112
+ padding: 17px 81px;
113
+ margin-bottom: 138px;
114
+ display: inline-block;
115
+ background-color:#3F51B5;
116
+ border-radius: 12px;
117
+ box-shadow: 0 3px 6px #000000;
118
+ font-size: 38px;
119
+ font-weight: bold;
120
+ }
121
+
27
122
  ```
123
+ <!DOCTYPE html>
124
+ <html lang="ja">
28
125
 
126
+ <head>
127
+ <meta charset="UTF-8">
128
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
129
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
130
+ <link rel="stylesheet" href="css/style.css">
131
+ <title>Document</title>
132
+ </head>
133
+
134
+ <body>
135
+ <!-- Start Header -->
136
+ <header>
137
+ <div class="container header-contents">
138
+ <div class="header-left">
139
+ <img src="img/logo.png" class="logo">
140
+ </div>
141
+ <div class="header-right">
142
+ <ul class="header-list">
143
+ <li><a href="#card">Card</a></li>
144
+ <li><a href="#news">News</a></li>
145
+ <li><a href="#price">Price</a></li>
146
+ <li><a href="#access">Access</a></li>
147
+ <li><a href="#contact">Contact</a></li>
148
+ </ul>
149
+ </div>
150
+ </div>
151
+ </header>
152
+ <!-- End Header -->
153
+ <!-- Start Main Page -->
154
+ <section class="main-wrapper">
155
+ <div class="container">
156
+ <h1>一番伝えたいことを書く</h1>
157
+ <p>リードリードリード</p>
158
+ <a href="#" class="btn">お問い合わせ</a>
159
+ </div>
160
+ </section>
161
+ <!-- End Main Page -->
162
+ <script src="js/script.js"></script>
163
+ </body>
164
+
165
+ </html>
166
+ ```
167
+
29
168
  ### 試したこと
30
169
 
31
170
  sass導入手順を再度確認しましたが解決策が見つからずここで質問させていただきます。