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

質問編集履歴

4

画像の追加

2021/12/05 15:56

投稿

yuura
yuura

スコア1

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- ### 発生している問題
1
+ ![イメージ説明](c57086c8034b51b68005b45e71867667.png)### 発生している問題
2
2
  テックアカデミーのはじめてのCSS入門講座を拝見しています。2-6擬似要素(CSSセレクタ)
3
3
  CSSにて擬似要素の :link や :visitedを打ち込んだのですが反映されません。
4
4
  私はエディタをsublimetextを使用しております。

3

現状報告追記

2021/12/05 15:56

投稿

yuura
yuura

スコア1

title CHANGED
File without changes
body CHANGED
@@ -88,6 +88,19 @@
88
88
  ### 試したこと
89
89
  CSSの読み込みはできているか確認しました。
90
90
 
91
+ 画像添付しておりますので確認していただけると幸いです。
92
+ お手数おかけしますがよろしくお願いいたします。
91
93
 
94
+ 追記:現状報告
92
- 画像添付しておりすので確認していただけと幸いです。
95
+ 皆さ問題なく動作しているのではかとのことだったの
96
+ ・新規で、htmlとCSSそれぞれファイルを作成し直し、フィアル名を変更しCSSの読み込みのための記述をhtml側でしました。
97
+ そのファイルにhtmlとcss共にコードを貼り付けしました。→✖️
98
+ ・コードを確認していたところ、html側では削除していたにもかかわらずCSS側にのみ残っていたコードがあったのでこれが悪さをしているのかと思いCSS側に残っていたコードを削除しました。→✖️
99
+ ・再度cssがきちんと読み込まれているか確認したところ全てのセレクタの値を変更してみましたが反映されていませんでした..。
100
+ ・codepenにて現状のコードを貼り付けして保存しました。(共有に関しては指示待ち状態)
101
+ codepenに貼り付けを行なった際にはcssは反映されました。
102
+ 疑問
103
+ codepenに貼り付けた際にcssは正常に反映されましたが、やはり:linkに関してはコードの色は白のままですし、
93
- お手数おかけしすがよろくお願いいします
104
+ color: crimson;は反映されていせんでした。
105
+
106
+ お返事遅れていてすみません。

2

質問の方に貼り付けさせてもらいました。

2021/12/04 14:36

投稿

yuura
yuura

スコア1

title CHANGED
File without changes
body CHANGED
@@ -1,27 +1,93 @@
1
- ![イメージ説明](ab20c1c47ceef69e65d8824a4fbabd6b.png)### 前提・実現したいこと
2
-
3
- ここに質問の内容を詳しく書いてください。
4
- (例)PHP(CakePHP)で●●なシステムを作っています。
5
- ■■な機能を実装中に以下のエラーメッセージが発生しました。
6
-
7
1
  ### 発生している問題
8
2
  テックアカデミーのはじめてのCSS入門講座を拝見しています。2-6擬似要素(CSSセレクタ)
9
3
  CSSにて擬似要素の :link や :visitedを打ち込んだのですが反映されません。
10
4
  私はエディタをsublimetextを使用しております。
11
5
  文字をきちんと打てていれば色が変わるのですが色も変わりません。
12
6
 
7
+ お手数お掛けしてすみません
8
+ ここに貼り付けたので宜しいでしょうか?
13
9
 
10
+ ```html
11
+ <!doctype html>
12
+ <html>
13
+ <head>
14
+ <meta charset="UTF-8">
15
+ <title>HTMLの練習</title>
16
+ <link rel="stylesheet" type="text/css" href="style.css">
17
+ </head>
18
+ <body>
19
+ <div class="main">
20
+ <h1>Heading 1</h1>
21
+ <a href="#a">mainクラスの子要素のリンク</a>
22
+ <p>
23
+ 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.
24
+ </p>
25
+ <input type="text">
26
+ <h2>Heading 2</h2>
27
+ <p>
28
+ 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.
29
+ </p>
30
+ <a href="#a">mainクラスの子要素のリンク</a>
31
+ <h2>Heading 2</h2>
32
+ <p>
33
+ 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.
34
+ </p>
35
+ <p>
36
+ 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.
37
+ </p>
38
+ </div>
39
+ <br>
40
+ <div class="base black">ここは黒</div>
41
+ <div class="base red">ここは赤</div>
42
+ <div class="base green">ここは緑</div>
43
+ </body>
44
+ </html>
45
+ ```
14
46
 
47
+ ```CSS
48
+ h1 {
49
+ color: black;
50
+ font-size: 40px;
51
+ }
52
+ p {
53
+ font-size: 9px;
54
+ background-color: yellow;
55
+ }
56
+ .test{
57
+ background-color: gray;
58
+ }
15
- ### 試したこと
59
+ #header{
60
+ font-size: 30px;
61
+ }
62
+ .base{
63
+ font-size: 20px;
16
- CSSの読み込みはできているか確認しました。
64
+ font-weight: bold;
65
+ }
66
+ .black{
17
67
 
68
+ color: black;
69
+ }
70
+ .red{
18
71
 
19
- ここに問題に対して試したことを記載してください。
72
+ color: red;
73
+ }
74
+ .green{
20
75
 
76
+ color: green;
77
+ }
78
+ :link {
21
- ### 補足情報(FW/ツールのバージョンなど)
79
+ color: crimson;
80
+ }
81
+ :visited{
82
+ color:grey;
83
+ }
84
+ ```
22
85
 
23
- ここにより詳細な情報を記載してください。![イメージ説明](aff1ec621b6077b91795d96800ee5117.png)
24
86
 
25
87
 
88
+ ### 試したこと
89
+ CSSの読み込みはできているか確認しました。
90
+
91
+
26
92
  画像添付しておりますので確認していただけると幸いです。
27
93
  お手数おかけしますがよろしくお願いいたします。

1

画像を再添付致しました。

2021/12/01 07:47

投稿

yuura
yuura

スコア1

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- ### 前提・実現したいこと
1
+ ![イメージ説明](ab20c1c47ceef69e65d8824a4fbabd6b.png)### 前提・実現したいこと
2
2
 
3
3
  ここに質問の内容を詳しく書いてください。
4
4
  (例)PHP(CakePHP)で●●なシステムを作っています。