質問編集履歴

1

scssを追加しました!

2020/11/05 12:27

投稿

kawausomaru
kawausomaru

スコア29

test CHANGED
File without changes
test CHANGED
@@ -123,3 +123,197 @@
123
123
 
124
124
 
125
125
  何を追加したら特定のliの幅を変化できるかわかる方ご回答よろしくおねがいします
126
+
127
+
128
+
129
+
130
+
131
+ SASS
132
+
133
+
134
+
135
+ ```.pagination {
136
+
137
+ margin-top:4rem;
138
+
139
+
140
+
141
+ .page-numbers {
142
+
143
+ text-align: center;
144
+
145
+
146
+
147
+ li {
148
+
149
+ margin: 0 2px;
150
+
151
+ padding: 0;
152
+
153
+ display: inline-block;
154
+
155
+ background: $lightblue3;
156
+
157
+ width: 50px;
158
+
159
+ height: 50px;
160
+
161
+ text-align: center;
162
+
163
+ position: relative;
164
+
165
+ border-radius: 10px;
166
+
167
+
168
+
169
+ .current {
170
+
171
+ background: $blue;
172
+
173
+ border-radius: 10px;
174
+
175
+
176
+
177
+ }
178
+
179
+
180
+
181
+
182
+
183
+ a {
184
+
185
+ vertical-align: middle;
186
+
187
+ position: absolute;
188
+
189
+ top: 0;
190
+
191
+ left: 0;
192
+
193
+ width: 100%;
194
+
195
+ height: 100%;
196
+
197
+ text-align: center;
198
+
199
+ display: table;
200
+
201
+ color: #fff;
202
+
203
+ text-decoration: none;
204
+
205
+ -webkit-transition: all 0.3s ease;
206
+
207
+ -moz-transition: all 0.3s ease;
208
+
209
+ -o-transition: all 0.3s ease;
210
+
211
+ transition: all 0.3s ease;
212
+
213
+
214
+
215
+ span {
216
+
217
+ display: table-cell;
218
+
219
+ vertical-align: middle;
220
+
221
+
222
+
223
+ }
224
+
225
+
226
+
227
+ &:hover,
228
+
229
+ &:active {
230
+
231
+ color: #000;
232
+
233
+ background: #ccf;
234
+
235
+ border-color: #00f;
236
+
237
+ border-radius: 10px;
238
+
239
+ }
240
+
241
+
242
+
243
+
244
+
245
+ }
246
+
247
+
248
+
249
+ span {
250
+
251
+ display: table-cell;
252
+
253
+ vertical-align: middle;
254
+
255
+ vertical-align: middle;
256
+
257
+ position: absolute;
258
+
259
+ top: 0;
260
+
261
+ left: 0;
262
+
263
+ width: 100%;
264
+
265
+ height: 100%;
266
+
267
+ text-align: center;
268
+
269
+ display: table;
270
+
271
+ color: #fff;
272
+
273
+ text-decoration: none;
274
+
275
+ -webkit-transition: all 0.3s ease;
276
+
277
+ -moz-transition: all 0.3s ease;
278
+
279
+ -o-transition: all 0.3s ease;
280
+
281
+ transition: all 0.3s ease;
282
+
283
+
284
+
285
+ }
286
+
287
+
288
+
289
+ .prev {
290
+
291
+
292
+
293
+ }
294
+
295
+
296
+
297
+ .next {
298
+
299
+
300
+
301
+
302
+
303
+ }
304
+
305
+
306
+
307
+
308
+
309
+ }
310
+
311
+ }
312
+
313
+ }
314
+
315
+
316
+
317
+ コード
318
+
319
+ ```