teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問VScodeのHTML previewでcssが反映されない

編集履歴

質問編集履歴

9

修正

2021/07/18 10:45

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -90,7 +90,13 @@
90
90
 
91
91
  </html>
92
92
 
93
+ ```
94
+
95
+
96
+
97
+ ```
98
+
93
- ```.flex_test-box {
99
+ .flex_test-box {
94
100
 
95
101
  display: flex; /* フレックスボックスにする */
96
102
 
@@ -146,4 +152,10 @@
146
152
 
147
153
  }
148
154
 
155
+
156
+
157
+
158
+
159
+
160
+
149
161
  ```

8

追記

2021/07/18 10:45

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -90,8 +90,60 @@
90
90
 
91
91
  </html>
92
92
 
93
- ```ここに言語を入力
93
+ ```.flex_test-box {
94
94
 
95
+ display: flex; /* フレックスボックスにする */
96
+
97
+ background-color: #eee; /* 背景色指定 */
98
+
99
+ padding: 10px; /* 余白指定 */
100
+
95
- コード
101
+ }
102
+
103
+
104
+
105
+ .flex_test-item {
106
+
107
+ padding: 10px;
108
+
109
+ color: #fff; /* 文字色 */
110
+
111
+ margin: 10px; /* 外側の余白 */
112
+
113
+ border-radius: 5px; /* 角丸指定 */
114
+
115
+ }
116
+
117
+
118
+
119
+ .flex_test-item:nth-child(1) {
120
+
121
+ background-color: #2196F3; /* 背景色指定 */
122
+
123
+ }
124
+
125
+
126
+
127
+ .flex_test-item:nth-child(2) {
128
+
129
+ background-color: #4CAF50; /* 背景色指定 */
130
+
131
+ }
132
+
133
+
134
+
135
+ .flex_test-item:nth-child(3) {
136
+
137
+ background-color: #3F51B5; /* 背景色指定 */
138
+
139
+ }
140
+
141
+
142
+
143
+ .flex_test-item:nth-child(4) {
144
+
145
+ background-color: #00BCD4; /* 背景色指定 */
146
+
147
+ }
96
148
 
97
149
  ```

7

追記

2021/07/18 10:35

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -92,60 +92,6 @@
92
92
 
93
93
  ```ここに言語を入力
94
94
 
95
- .flex_test-box {
96
-
97
- display: flex; /* フレックスボックスにする */
98
-
99
- background-color: #eee; /* 背景色指定 */
100
-
101
- padding: 10px; /* 余白指定 */
102
-
103
- }
95
+ コード
104
-
105
-
106
-
107
- .flex_test-item {
108
-
109
- padding: 10px;
110
-
111
- color: #fff; /* 文字色 */
112
-
113
- margin: 10px; /* 外側の余白 */
114
-
115
- border-radius: 5px; /* 角丸指定 */
116
-
117
- }
118
-
119
-
120
-
121
- .flex_test-item:nth-child(1) {
122
-
123
- background-color: #2196F3; /* 背景色指定 */
124
-
125
- }
126
-
127
-
128
-
129
- .flex_test-item:nth-child(2) {
130
-
131
- background-color: #4CAF50; /* 背景色指定 */
132
-
133
- }
134
-
135
-
136
-
137
- .flex_test-item:nth-child(3) {
138
-
139
- background-color: #3F51B5; /* 背景色指定 */
140
-
141
- }
142
-
143
-
144
-
145
- .flex_test-item:nth-child(4) {
146
-
147
- background-color: #00BCD4; /* 背景色指定 */
148
-
149
- }
150
96
 
151
97
  ```

6

追記

2021/07/18 10:35

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -90,9 +90,9 @@
90
90
 
91
91
  </html>
92
92
 
93
+ ```ここに言語を入力
93
94
 
94
-
95
- ```.flex_test-box {
95
+ .flex_test-box {
96
96
 
97
97
  display: flex; /* フレックスボックスにする */
98
98
 
@@ -148,6 +148,4 @@
148
148
 
149
149
  }
150
150
 
151
- コード
152
-
153
151
  ```

5

追記

2021/07/18 10:34

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -90,7 +90,7 @@
90
90
 
91
91
  </html>
92
92
 
93
- CSS のコードは下記になります。
93
+
94
94
 
95
95
  ```.flex_test-box {
96
96
 
@@ -148,6 +148,6 @@
148
148
 
149
149
  }
150
150
 
151
-
151
+ コード
152
152
 
153
153
  ```

4

追記

2021/07/18 10:33

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -92,8 +92,6 @@
92
92
 
93
93
  CSS のコードは下記になります。
94
94
 
95
- ```
96
-
97
95
  ```.flex_test-box {
98
96
 
99
97
  display: flex; /* フレックスボックスにする */
@@ -148,4 +146,8 @@
148
146
 
149
147
  background-color: #00BCD4; /* 背景色指定 */
150
148
 
149
+ }
150
+
151
+
152
+
151
- }```
153
+ ```

3

追記

2021/07/18 10:32

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -31,3 +31,121 @@
31
31
 
32
32
 
33
33
  等を試しましたが駄目でした。
34
+
35
+
36
+
37
+ html のソースは下記になります。
38
+
39
+ ```<!DOCTYPE html>
40
+
41
+ <html lang="ja">
42
+
43
+ <head>
44
+
45
+ <meta charset="UTF-8">
46
+
47
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
48
+
49
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
50
+
51
+ <link rel="stylesheet" href="style.css">
52
+
53
+ <title>Document</title>
54
+
55
+ </head>
56
+
57
+ <body>
58
+
59
+ <div class="flex_test-box">
60
+
61
+ <div class="flex_test-item">
62
+
63
+ 1.コンテンツが入ります。コンテンツが入ります。
64
+
65
+ </div>
66
+
67
+ <div class="flex_test-item">
68
+
69
+ 2.コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。
70
+
71
+ </div>
72
+
73
+ <div class="flex_test-item">
74
+
75
+ 3.コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。
76
+
77
+ </div>
78
+
79
+ <div class="flex_test-item">
80
+
81
+ 4.コンテンツが入ります。
82
+
83
+ </div>
84
+
85
+ </div>
86
+
87
+ <p>aaaaaa</p>
88
+
89
+ </body>
90
+
91
+ </html>
92
+
93
+ CSS のコードは下記になります。
94
+
95
+ ```
96
+
97
+ ```.flex_test-box {
98
+
99
+ display: flex; /* フレックスボックスにする */
100
+
101
+ background-color: #eee; /* 背景色指定 */
102
+
103
+ padding: 10px; /* 余白指定 */
104
+
105
+ }
106
+
107
+
108
+
109
+ .flex_test-item {
110
+
111
+ padding: 10px;
112
+
113
+ color: #fff; /* 文字色 */
114
+
115
+ margin: 10px; /* 外側の余白 */
116
+
117
+ border-radius: 5px; /* 角丸指定 */
118
+
119
+ }
120
+
121
+
122
+
123
+ .flex_test-item:nth-child(1) {
124
+
125
+ background-color: #2196F3; /* 背景色指定 */
126
+
127
+ }
128
+
129
+
130
+
131
+ .flex_test-item:nth-child(2) {
132
+
133
+ background-color: #4CAF50; /* 背景色指定 */
134
+
135
+ }
136
+
137
+
138
+
139
+ .flex_test-item:nth-child(3) {
140
+
141
+ background-color: #3F51B5; /* 背景色指定 */
142
+
143
+ }
144
+
145
+
146
+
147
+ .flex_test-item:nth-child(4) {
148
+
149
+ background-color: #00BCD4; /* 背景色指定 */
150
+
151
+ }```

2

文言追加

2021/07/18 10:31

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -12,13 +12,13 @@
12
12
 
13
13
 
14
14
 
15
-
15
+ html preview 上の表示
16
16
 
17
17
  ![html preview 上の表示](b4db9d768b41ab2285d3ec23c36e8bb3.png)
18
18
 
19
19
 
20
20
 
21
-
21
+ ブラウザ上の表示
22
22
 
23
23
  ![ブラウザ上の表示](9f56ebfae465b08c2cdef5b79daf22cc.png)
24
24
 

1

画像の追加

2021/07/18 09:39

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -10,15 +10,17 @@
10
10
 
11
11
  どのようにしたらＣＳＳが反映されますでしょうか？
12
12
 
13
- html preview 上の表示
14
-
15
- [リンク内容](https://i.gyazo.com/e0f48b6f868d959c25e9208f563a1fa3.png)
16
-
17
- ブラウザ上の表示
18
-
19
- [リンク内容](https://gyazo.com/b00951eb2d3946d434c83631633a1933)
20
13
 
21
14
 
15
+
16
+
17
+ ![html preview 上の表示](b4db9d768b41ab2285d3ec23c36e8bb3.png)
18
+
19
+
20
+
21
+
22
+
23
+ ![ブラウザ上の表示](9f56ebfae465b08c2cdef5b79daf22cc.png)
22
24
 
23
25
  同様の質問があり、
24
26