質問編集履歴

1

css追加 画像追加

2019/03/05 02:04

投稿

twsoccer15
twsoccer15

スコア12

test CHANGED
File without changes
test CHANGED
@@ -40,6 +40,208 @@
40
40
 
41
41
  ```
42
42
 
43
+
44
+
45
+ ```
46
+
47
+ media only screen and (max-width: 1190px) and (min-width: 768px)
48
+
49
+ .answer .client.voice {
50
+
51
+ max-width: calc(100% - 40px);
52
+
53
+ margin: 0 auto;
54
+
55
+ }
56
+
57
+ .answer .client.voice {
58
+
59
+ padding: 20px 0;
60
+
61
+ font-size: 18px;
62
+
63
+ text-align: left;
64
+
65
+ font-style: italic;
66
+
67
+ color: #777;
68
+
69
+ }
70
+
71
+ @media (min-width: 768px)
72
+
73
+ .col-md-8 {
74
+
75
+ -ms-flex: 0 0 66.666667%;
76
+
77
+ flex: 0 0 66.666667%;
78
+
79
+ max-width: 66.666667%;
80
+
81
+ }
82
+
83
+ .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
84
+
85
+ position: relative;
86
+
87
+ width: 100%;
88
+
89
+ padding-right: 15px;
90
+
91
+ padding-left: 15px;
92
+
93
+ }
94
+
95
+
96
+
97
+ *, ::after, ::before {
98
+
99
+ box-sizing: border-box;
100
+
101
+ }
102
+
103
+ user agent stylesheet
104
+
105
+ div {
106
+
107
+ display: block;
108
+
109
+ }
110
+
111
+ ```
112
+
113
+ ```
114
+
115
+ .answer .client.voice {
116
+
117
+ padding: 20px 0;
118
+
119
+ font-size: 18px;
120
+
121
+ text-align: left;
122
+
123
+ font-style: italic;
124
+
125
+ color: #777;
126
+
127
+ }
128
+
129
+ .answer {
130
+
131
+ padding: 40px 0;
132
+
133
+ text-align: center;
134
+
135
+ }
136
+
137
+ body {
138
+
139
+ margin: 0;
140
+
141
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
142
+
143
+ font-size: 1rem;
144
+
145
+ font-weight: 400;
146
+
147
+ line-height: 1.5;
148
+
149
+ color: #212529;
150
+
151
+ text-align: left;
152
+
153
+ background-color: #fff;
154
+
155
+ }
156
+
157
+ <style>…</style>
158
+
159
+ body {
160
+
161
+ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
162
+
163
+ letter-spacing: 1.5px;
164
+
165
+ }
166
+
167
+ body, p, h1, h2, h3, h4, h5, h6 {
168
+
169
+ text-rendering: optimizeLegibility;
170
+
171
+ iased: ;
172
+
173
+ }
174
+
175
+ ```
176
+
177
+ ```
178
+
179
+ lement.style {
180
+
181
+ }
182
+
183
+ .col-8 {
184
+
185
+ -ms-flex: 0 0 66.666667%;
186
+
187
+ flex: 0 0 66.666667%;
188
+
189
+ max-width: 66.666667%;
190
+
191
+ float: left;
192
+
193
+ }
194
+
195
+ .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
196
+
197
+ position: relative;
198
+
199
+ width: 100%;
200
+
201
+ padding-right: 15px;
202
+
203
+ padding-left: 15px;
204
+
205
+ }
206
+
207
+ *, ::after, ::before {
208
+
209
+ box-sizing: border-box;
210
+
211
+ }
212
+
213
+ user agent stylesheet
214
+
215
+ div {
216
+
217
+ display: block;
218
+
219
+ }
220
+
221
+ .answer .client.voice {
222
+
223
+ padding: 20px 0;
224
+
225
+ font-size: 18px;
226
+
227
+ text-align: left;
228
+
229
+ font-style: italic;
230
+
231
+ color: #777;
232
+
233
+ }
234
+
235
+ .answer {
236
+
237
+ padding: 40px 0;
238
+
239
+ text-align: center;
240
+
241
+ }
242
+
243
+ ```![イメージ説明](601eb9f7f5edef4c09e5706414fb6388.png)
244
+
43
245
  ### 試したこと
44
246
 
45
247
  floatを使用したがうまくレイアウトできない。
@@ -49,7 +251,3 @@
49
251
 
50
252
 
51
253
  ### 補足情報(FW/ツールのバージョンなど)
52
-
53
-
54
-
55
- bootstrap3ではもともとfloatが指定されていたが4では表示されない