回答編集履歴

1

記述の詳細を追加

2019/07/28 12:20

投稿

Snpy
Snpy

スコア139

test CHANGED
@@ -26,13 +26,13 @@
26
26
 
27
27
  <div class="Container">
28
28
 
29
-
30
29
 
31
- <div class="BoxA">A</div>
32
30
 
33
- <div class="BoxB">B</div>
31
+ <div class="Box Box--A">A</div>
34
32
 
33
+ <div class="Box Box--B">B</div>
34
+
35
- <div class="BoxC">C</div>
35
+ <div class="Box Box--C">C</div>
36
36
 
37
37
 
38
38
 
@@ -92,6 +92,76 @@
92
92
 
93
93
  ```ここに言語を入力
94
94
 
95
+ /*-------------------------------------
96
+
97
+ 通常(スマホ)のスタイル
98
+
99
+ --------------------------------------*/
100
+
101
+
102
+
103
+ .Container{
104
+
105
+ background : #eee ;
106
+
107
+ }
108
+
109
+
110
+
111
+ /*ABCボックス共通*/
112
+
113
+ .Box{
114
+
115
+ width : 150px ;
116
+
117
+ height : 100px;
118
+
119
+ line-height : 100px ;
120
+
121
+ color: #fff ;
122
+
123
+ font-size : 50px ;
124
+
125
+ text-align : center ;
126
+
127
+ border : solid 1px #000 ;
128
+
129
+ }
130
+
131
+
132
+
133
+ .Box--A{
134
+
135
+ background : red;
136
+
137
+ }
138
+
139
+ .Box--B{
140
+
141
+ margin : 40px 0 ;
142
+
143
+ color : #000 ;
144
+
145
+ background : yellow ;
146
+
147
+ }
148
+
149
+ .Box--C{
150
+
151
+ background: blue ;
152
+
153
+ }
154
+
155
+
156
+
157
+
158
+
159
+ /*-------------------------------------
160
+
161
+ デスクトップのスタイル
162
+
163
+ --------------------------------------*/
164
+
95
165
  @media screen and (min-width : 900px){
96
166
 
97
167
  .Container{
@@ -99,6 +169,12 @@
99
169
  display : flex ;
100
170
 
101
171
  }
172
+
173
+ .Box--B{
174
+
175
+ margin : 0 40px ;
176
+
177
+ }
102
178
 
103
179
  }
104
180