質問編集履歴
4
画像の追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
### 発生している問題
|
|
1
|
+
### 発生している問題
|
|
2
2
|
|
|
3
3
|
テックアカデミーのはじめてのCSS入門講座を拝見しています。2-6擬似要素（CSSセレクタ）
|
|
4
4
|
|
3
現状報告追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -178,8 +178,34 @@
|
|
|
178
178
|
|
|
179
179
|
|
|
180
180
|
|
|
181
|
-
|
|
182
|
-
|
|
183
181
|
画像添付しておりますので確認していただけると幸いです。
|
|
184
182
|
|
|
185
183
|
お手数おかけしますがよろしくお願いいたします。
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
追記：現状報告
|
|
188
|
+
|
|
189
|
+
皆さま問題なく動作しているのではいかとのことだったので、
|
|
190
|
+
|
|
191
|
+
・新規で、htmlとCSSそれぞれファイルを作成し直し、フィアル名を変更しCSSの読み込みのための記述をhtml側でしました。
|
|
192
|
+
|
|
193
|
+
そのファイルにhtmlとcss共にコードを貼り付けしました。→✖️
|
|
194
|
+
|
|
195
|
+
・コードを確認していたところ、html側では削除していたにもかかわらずCSS側にのみ残っていたコードがあったのでこれが悪さをしているのかと思いCSS側に残っていたコードを削除しました。→✖️
|
|
196
|
+
|
|
197
|
+
・再度cssがきちんと読み込まれているか確認したところ全てのセレクタの値を変更してみましたが反映されていませんでした..。
|
|
198
|
+
|
|
199
|
+
・codepenにて現状のコードを貼り付けして保存しました。（共有に関しては指示待ち状態）
|
|
200
|
+
|
|
201
|
+
codepenに貼り付けを行なった際にはcssは反映されました。
|
|
202
|
+
|
|
203
|
+
疑問
|
|
204
|
+
|
|
205
|
+
codepenに貼り付けた際にcssは正常に反映されましたが、やはり:linkに関してはコードの色は白のままですし、
|
|
206
|
+
|
|
207
|
+
color: crimson;は反映されていませんでした。
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
お返事遅れていてすみません。
|
2
質問の方に貼り付けさせてもらいました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,15 +1,3 @@
|
|
|
1
|
-
### 前提・実現したいこと
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
ここに質問の内容を詳しく書いてください。
|
|
6
|
-
|
|
7
|
-
（例）PHP(CakePHP)で●●なシステムを作っています。
|
|
8
|
-
|
|
9
|
-
■■な機能を実装中に以下のエラーメッセージが発生しました。
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
1
|
### 発生している問題
|
|
14
2
|
|
|
15
3
|
テックアカデミーのはじめてのCSS入門講座を拝見しています。2-6擬似要素（CSSセレクタ）
|
|
@@ -19,6 +7,164 @@
|
|
|
19
7
|
私はエディタをsublimetextを使用しております。
|
|
20
8
|
|
|
21
9
|
文字をきちんと打てていれば色が変わるのですが色も変わりません。
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
お手数お掛けしてすみません
|
|
14
|
+
|
|
15
|
+
ここに貼り付けたので宜しいでしょうか？
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
|
|
21
|
+
<!doctype html>
|
|
22
|
+
|
|
23
|
+
<html>
|
|
24
|
+
|
|
25
|
+
<head>
|
|
26
|
+
|
|
27
|
+
<meta charset="UTF-8">
|
|
28
|
+
|
|
29
|
+
<title>HTMLの練習</title>
|
|
30
|
+
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="style.css">
|
|
32
|
+
|
|
33
|
+
</head>
|
|
34
|
+
|
|
35
|
+
<body>
|
|
36
|
+
|
|
37
|
+
<div class="main">
|
|
38
|
+
|
|
39
|
+
<h1>Heading 1</h1>
|
|
40
|
+
|
|
41
|
+
<a href="#a">mainクラスの子要素のリンク</a>
|
|
42
|
+
|
|
43
|
+
<p>
|
|
44
|
+
|
|
45
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
46
|
+
|
|
47
|
+
</p>
|
|
48
|
+
|
|
49
|
+
<input type="text">
|
|
50
|
+
|
|
51
|
+
<h2>Heading 2</h2>
|
|
52
|
+
|
|
53
|
+
<p>
|
|
54
|
+
|
|
55
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <a href="#b">mainクラスの子要素ではないリンク</a> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
56
|
+
|
|
57
|
+
</p>
|
|
58
|
+
|
|
59
|
+
<a href="#a">mainクラスの子要素のリンク</a>
|
|
60
|
+
|
|
61
|
+
<h2>Heading 2</h2>
|
|
62
|
+
|
|
63
|
+
<p>
|
|
64
|
+
|
|
65
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="c">mainクラスの子要素ではないリンクです</a> enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
66
|
+
|
|
67
|
+
</p>
|
|
68
|
+
|
|
69
|
+
<p>
|
|
70
|
+
|
|
71
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
72
|
+
|
|
73
|
+
</p>
|
|
74
|
+
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<br>
|
|
78
|
+
|
|
79
|
+
<div class="base black">ここは黒</div>
|
|
80
|
+
|
|
81
|
+
<div class="base red">ここは赤</div>
|
|
82
|
+
|
|
83
|
+
<div class="base green">ここは緑</div>
|
|
84
|
+
|
|
85
|
+
</body>
|
|
86
|
+
|
|
87
|
+
</html>
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
```CSS
|
|
94
|
+
|
|
95
|
+
h1 {
|
|
96
|
+
|
|
97
|
+
color: black;
|
|
98
|
+
|
|
99
|
+
font-size: 40px;
|
|
100
|
+
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
p {
|
|
104
|
+
|
|
105
|
+
font-size: 9px;
|
|
106
|
+
|
|
107
|
+
background-color: yellow;
|
|
108
|
+
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.test{
|
|
112
|
+
|
|
113
|
+
background-color: gray;
|
|
114
|
+
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
#header{
|
|
118
|
+
|
|
119
|
+
font-size: 30px;
|
|
120
|
+
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.base{
|
|
124
|
+
|
|
125
|
+
font-size: 20px;
|
|
126
|
+
|
|
127
|
+
font-weight: bold;
|
|
128
|
+
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.black{
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
color: black;
|
|
136
|
+
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.red{
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
color: red;
|
|
144
|
+
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.green{
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
color: green;
|
|
152
|
+
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
:link {
|
|
156
|
+
|
|
157
|
+
color: crimson;
|
|
158
|
+
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
:visited{
|
|
162
|
+
|
|
163
|
+
color:grey;
|
|
164
|
+
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
```
|
|
22
168
|
|
|
23
169
|
|
|
24
170
|
|
|
@@ -34,20 +180,6 @@
|
|
|
34
180
|
|
|
35
181
|
|
|
36
182
|
|
|
37
|
-
ここに問題に対して試したことを記載してください。
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
### 補足情報（FW/ツールのバージョンなど）
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
ここにより詳細な情報を記載してください。
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
183
|
画像添付しておりますので確認していただけると幸いです。
|
|
52
184
|
|
|
53
185
|
お手数おかけしますがよろしくお願いいたします。
|
1
画像を再添付致しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
### 前提・実現したいこと
|
|
1
|
+
### 前提・実現したいこと
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|