質問編集履歴

1

HTML, CSSコードの変更

2020/01/07 10:01

投稿

murakami_shushu
murakami_shushu

スコア5

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,9 @@
1
+ 最終更新 1月7日19時
2
+
3
+ HTML, CSSコードに変更を加えました
4
+
5
+
6
+
1
7
  ### 前提・実現したいこと
2
8
 
3
9
 
@@ -54,7 +60,7 @@
54
60
 
55
61
  crossorigin="anonymous"></script>
56
62
 
57
- <script type="text/javascript" src="./js/script.js"></script>
63
+ <script type="text/javascript" src="./script.js"></script>
58
64
 
59
65
  <link rel="stylesheet" href="./style.css">
60
66
 
@@ -90,15 +96,15 @@
90
96
 
91
97
 
92
98
 
93
- <div id="card"></div>
94
-
95
- <div id="news"></div>
96
-
97
- <div id="price"></div>
98
-
99
- <div id="access"></div>
100
-
101
- <div id="contact"></div>
99
+ <div class="container section-1" id="card"></div>
100
+
101
+ <div class="container section-2" id="news"></div>
102
+
103
+ <div class="container section-3" id="price"></div>
104
+
105
+ <div class="container section-4" id="access"></div>
106
+
107
+ <div class="container section-5" id="contact"></div>
102
108
 
103
109
  </body>
104
110
 
@@ -106,7 +112,83 @@
106
112
 
107
113
  ```
108
114
 
109
-
115
+ ```CSS
116
+
117
+ header nav {
118
+
119
+ position: fixed;
120
+
121
+ top: 0;
122
+
123
+ background-color: #fff;
124
+
125
+ }
126
+
127
+
128
+
129
+ header nav li a.current {
130
+
131
+ color: red;
132
+
133
+ }
134
+
135
+
136
+
137
+ header nav li a:hover {
138
+
139
+ color: red;
140
+
141
+ }
142
+
143
+
144
+
145
+ .container {
146
+
147
+ height: 500px;
148
+
149
+ }
150
+
151
+
152
+
153
+ .container.section-1 {
154
+
155
+ background-color: red;
156
+
157
+ }
158
+
159
+
160
+
161
+ .container.section-2 {
162
+
163
+ background-color: blue;
164
+
165
+ }
166
+
167
+
168
+
169
+ .container.section-3 {
170
+
171
+ background-color: green;
172
+
173
+ }
174
+
175
+
176
+
177
+ .container.section-4 {
178
+
179
+ background-color: orange;
180
+
181
+ }
182
+
183
+
184
+
185
+ .container.section-5 {
186
+
187
+ background-color: pink;
188
+
189
+ }
190
+
191
+ ```
110
192
 
111
193
  ```JavaScript
112
194
 
@@ -132,16 +214,6 @@
132
214
 
133
215
  ```
134
216
 
135
- ```CSS
136
-
137
- header nav li a.current {
138
-
139
- color: red;
140
-
141
- }
142
-
143
- ```
144
-
145
217
 
146
218
 
147
219
  ページに合わせて文字の色を赤色に変化させたいのですが、変化しません。
@@ -165,3 +237,19 @@
165
237
  間違っている場所が皆目見当もつかないので、質問させて頂きました。
166
238
 
167
239
  初心者で至らない点も多々あると思いますが、どうかよろしくお願いします。
240
+
241
+
242
+
243
+
244
+
245
+ ###補足情報
246
+
247
+ 使用しているツール等を記載させて頂きます。
248
+
249
+
250
+
251
+ OS Windows10
252
+
253
+ ブラウザ Google Chrome
254
+
255
+ エディター VSCode