teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問cssが反映されない理由は？

編集履歴

質問編集履歴

6

書式の改善

2020/05/16 14:59

投稿

ooaai
ooaai

スコア17

test CHANGED
File without changes
test CHANGED
@@ -104,8 +104,6 @@
104
104
 
105
105
  @media (max-width:670px) {
106
106
 
107
- /* .flex-listにflex-directionを指定してください */
108
-
109
107
  .flex-list{
110
108
 
111
109
  flex-direction: column;

5

書式の改善

2020/05/16 14:59

投稿

ooaai
ooaai

スコア17

test CHANGED
File without changes
test CHANGED
@@ -100,7 +100,7 @@
100
100
 
101
101
 
102
102
 
103
- /* スマホ向けレイアウト */
103
+ **/* スマホ向けレイアウト */
104
104
 
105
105
  @media (max-width:670px) {
106
106
 
@@ -118,7 +118,7 @@
118
118
 
119
119
  }
120
120
 
121
-
121
+ **
122
122
 
123
123
  ```
124
124
 

4

書式の改善

2020/05/16 14:58

投稿

ooaai
ooaai

スコア17

test CHANGED
File without changes
test CHANGED
@@ -12,49 +12,113 @@
12
12
 
13
13
 
14
14
 
15
-
16
-
17
-
18
-
19
15
  ```HTML
20
16
 
21
- <body>
17
+ <body>
22
18
 
23
- 　<ul class="flex-list">
19
+ <ul class="flex-list">
24
20
 
25
- 　　<li class="li1">item1</li>
21
+ <li class="li1">item1</li>
26
22
 
27
- 　　<li class="li2">item2</li>
23
+ <li class="li2">item2</li>
28
24
 
29
- 　　<li class="li3">item3</li>
25
+ <li class="li3">item3</li>
30
26
 
31
- 　　<li class="li4">item4</li>
27
+ <li class="li4">item4</li>
32
28
 
33
- 　</ul>
29
+ </ul>
34
30
 
35
- </body>
31
+ </body>
36
32
 
37
33
  ```
38
34
 
39
35
 
40
36
 
37
+
38
+
41
39
  ```CSS
40
+
41
+ ul {
42
+
43
+ list-style: none;
44
+
45
+ margin: 0px;
46
+
47
+ padding: 60px 0px;
48
+
49
+ text-align: center;
50
+
51
+ }
52
+
53
+ li {
54
+
55
+ color: white;
56
+
57
+ height: 80px;
58
+
59
+ line-height: 80px;
60
+
61
+ }
62
+
63
+ .li1 {
64
+
65
+ background-color: #ffc562;
66
+
67
+ }
68
+
69
+ .li2 {
70
+
71
+ background-color: #a0c3f7;
72
+
73
+ }
74
+
75
+ .li3 {
76
+
77
+ background-color: #ff8db3;
78
+
79
+ }
80
+
81
+ .li4 {
82
+
83
+ background-color: #88e7ce;
84
+
85
+ }
86
+
87
+
88
+
89
+ .flex-list {
90
+
91
+ display: flex;
92
+
93
+ }
94
+
95
+ .flex-list li {
96
+
97
+ flex: auto;
98
+
99
+ }
100
+
101
+
42
102
 
43
103
  /* スマホ向けレイアウト */
44
104
 
45
105
  @media (max-width:670px) {
46
106
 
47
- .flex-list{
107
+ /* .flex-listにflex-directionを指定してください */
48
108
 
109
+ .flex-list{
110
+
49
- flex-direction: column;
111
+ flex-direction: column;
112
+
113
+ }
114
+
115
+ .flex-list li{
116
+
117
+ margin: 0 auto;
50
118
 
51
119
  }
52
120
 
53
- .flex-list li{
54
121
 
55
- margin: 0 auto;
56
-
57
- }
58
122
 
59
123
  ```
60
124
 
@@ -66,6 +130,6 @@
66
130
 
67
131
 
68
132
 
69
-
133
+ 完成されるのはただの□が縦に並んだものです。
70
134
 
71
135
  Progateというオンラインツールを使用しています。

3

書式の改善

2020/05/16 14:57

投稿

ooaai
ooaai

スコア17

test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
 
40
40
 
41
- 【CSS】
41
+ ```CSS
42
42
 
43
43
  /* スマホ向けレイアウト */
44
44
 
@@ -56,6 +56,8 @@
56
56
 
57
57
  }
58
58
 
59
+ ```
60
+
59
61
 
60
62
 
61
63
  中央に寄せる際margin:0 auto;を .flex-list liに指定するとcssが反映されるのに対して.flex-listにmargin:0 auto;を指定しても反映されません。

2

書籍の改善

2020/05/16 13:05

投稿

ooaai
ooaai

スコア17

test CHANGED
File without changes
test CHANGED
@@ -12,29 +12,29 @@
12
12
 
13
13
 
14
14
 
15
- ```body
16
15
 
17
- コード
18
16
 
19
- ```
20
17
 
18
+
21
- 【HTML】
19
+ ```HTML
22
20
 
23
21
  <body>
24
22
 
25
- <ul class="flex-list">
23
+ 　<ul class="flex-list">
26
24
 
27
- <li class="li1">item1</li>
25
+ 　　<li class="li1">item1</li>
28
26
 
29
- <li class="li2">item2</li>
27
+ 　　<li class="li2">item2</li>
30
28
 
31
- <li class="li3">item3</li>
29
+ 　　<li class="li3">item3</li>
32
30
 
33
- <li class="li4">item4</li>
31
+ 　　<li class="li4">item4</li>
34
32
 
35
- </ul>
33
+ 　</ul>
36
34
 
37
35
  </body>
36
+
37
+ ```
38
38
 
39
39
 
40
40
 

1

内容

2020/05/16 13:04

投稿

ooaai
ooaai

スコア17

test CHANGED
File without changes
test CHANGED
@@ -11,6 +11,12 @@
11
11
  ・中央に寄せる
12
12
 
13
13
 
14
+
15
+ ```body
16
+
17
+ コード
18
+
19
+ ```
14
20
 
15
21
  【HTML】
16
22