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

編集履歴

質問編集履歴

6

書式の改善

2020/05/16 14:59

投稿

ooaai
ooaai

スコア17

title CHANGED
File without changes
body CHANGED
@@ -51,7 +51,6 @@
51
51
 
52
52
  **/* スマホ向けレイアウト */
53
53
  @media (max-width:670px) {
54
- /* .flex-listにflex-directionを指定してください */
55
54
  .flex-list{
56
55
  flex-direction: column;
57
56
  }

5

書式の改善

2020/05/16 14:59

投稿

ooaai
ooaai

スコア17

title CHANGED
File without changes
body CHANGED
@@ -49,7 +49,7 @@
49
49
  flex: auto;
50
50
  }
51
51
 
52
- /* スマホ向けレイアウト */
52
+ **/* スマホ向けレイアウト */
53
53
  @media (max-width:670px) {
54
54
  /* .flex-listにflex-directionを指定してください */
55
55
  .flex-list{
@@ -58,7 +58,7 @@
58
58
  .flex-list li{
59
59
  margin: 0 auto;
60
60
  }
61
-
61
+ **
62
62
  ```
63
63
 
64
64
  中央に寄せる際margin:0 auto;を .flex-list liに指定するとcssが反映されるのに対して.flex-listにmargin:0 auto;を指定しても反映されません。

4

書式の改善

2020/05/16 14:58

投稿

ooaai
ooaai

スコア17

title CHANGED
File without changes
body CHANGED
@@ -5,32 +5,64 @@
5
5
  ・子要素を上から下に並べる
6
6
  ・中央に寄せる
7
7
 
8
-
9
-
10
8
  ```HTML
11
- <body>
9
+ <body>
12
- 　<ul class="flex-list">
10
+ <ul class="flex-list">
13
- 　　<li class="li1">item1</li>
11
+ <li class="li1">item1</li>
14
- 　　<li class="li2">item2</li>
12
+ <li class="li2">item2</li>
15
- 　　<li class="li3">item3</li>
13
+ <li class="li3">item3</li>
16
- 　　<li class="li4">item4</li>
14
+ <li class="li4">item4</li>
17
- 　</ul>
15
+ </ul>
18
- </body>
16
+ </body>
19
17
  ```
20
18
 
19
+
21
20
  ```CSS
21
+ ul {
22
+ list-style: none;
23
+ margin: 0px;
24
+ padding: 60px 0px;
25
+ text-align: center;
26
+ }
27
+ li {
28
+ color: white;
29
+ height: 80px;
30
+ line-height: 80px;
31
+ }
32
+ .li1 {
33
+ background-color: #ffc562;
34
+ }
35
+ .li2 {
36
+ background-color: #a0c3f7;
37
+ }
38
+ .li3 {
39
+ background-color: #ff8db3;
40
+ }
41
+ .li4 {
42
+ background-color: #88e7ce;
43
+ }
44
+
45
+ .flex-list {
46
+ display: flex;
47
+ }
48
+ .flex-list li {
49
+ flex: auto;
50
+ }
51
+
22
52
  /* スマホ向けレイアウト */
23
53
  @media (max-width:670px) {
54
+ /* .flex-listにflex-directionを指定してください */
24
- .flex-list{
55
+ .flex-list{
25
- flex-direction: column;
56
+ flex-direction: column;
57
+ }
58
+ .flex-list li{
59
+ margin: 0 auto;
26
60
  }
27
- .flex-list li{
61
+
28
- margin: 0 auto;
29
- }
30
62
  ```
31
63
 
32
64
  中央に寄せる際margin:0 auto;を .flex-list liに指定するとcssが反映されるのに対して.flex-listにmargin:0 auto;を指定しても反映されません。
33
65
  class属性で挟んでいるので問題ないと思うのですがなぜ反映されないのでしょうか。
34
66
 
35
-
67
+ 完成されるのはただの□が縦に並んだものです。
36
68
  Progateというオンラインツールを使用しています。

3

書式の改善

2020/05/16 14:57

投稿

ooaai
ooaai

スコア17

title CHANGED
File without changes
body CHANGED
@@ -18,7 +18,7 @@
18
18
  </body>
19
19
  ```
20
20
 
21
- 【CSS】
21
+ ```CSS
22
22
  /* スマホ向けレイアウト */
23
23
  @media (max-width:670px) {
24
24
  .flex-list{
@@ -27,6 +27,7 @@
27
27
  .flex-list li{
28
28
  margin: 0 auto;
29
29
  }
30
+ ```
30
31
 
31
32
  中央に寄せる際margin:0 auto;を .flex-list liに指定するとcssが反映されるのに対して.flex-listにmargin:0 auto;を指定しても反映されません。
32
33
  class属性で挟んでいるので問題ないと思うのですがなぜ反映されないのでしょうか。

2

書籍の改善

2020/05/16 13:05

投稿

ooaai
ooaai

スコア17

title CHANGED
File without changes
body CHANGED
@@ -5,18 +5,18 @@
5
5
  ・子要素を上から下に並べる
6
6
  ・中央に寄せる
7
7
 
8
+
9
+
8
- ```body
10
+ ```HTML
9
- コード
10
- ```
11
- 【HTML】
12
11
  <body>
13
- <ul class="flex-list">
12
+ 　<ul class="flex-list">
14
- <li class="li1">item1</li>
13
+ 　　<li class="li1">item1</li>
15
- <li class="li2">item2</li>
14
+ 　　<li class="li2">item2</li>
16
- <li class="li3">item3</li>
15
+ 　　<li class="li3">item3</li>
17
- <li class="li4">item4</li>
16
+ 　　<li class="li4">item4</li>
18
- </ul>
17
+ 　</ul>
19
18
  </body>
19
+ ```
20
20
 
21
21
  【CSS】
22
22
  /* スマホ向けレイアウト */

1

内容

2020/05/16 13:04

投稿

ooaai
ooaai

スコア17

title CHANGED
File without changes
body CHANGED
@@ -5,6 +5,9 @@
5
5
  ・子要素を上から下に並べる
6
6
  ・中央に寄せる
7
7
 
8
+ ```body
9
+ コード
10
+ ```
8
11
  【HTML】
9
12
  <body>
10
13
  <ul class="flex-list">