質問編集履歴

4

文法の修正

2021/12/25 15:52

投稿

yuri.s
yuri.s

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,213 +1,465 @@
1
- 画像同士の幅を小さくしていくにはどうしたら良いですか?
2
-
3
-
4
-
5
- SwiperSwiperの親要素の幅指定がどこのか分かりません。
1
+ 左右に余白をつけて、見えている数字をぶらせないよう(1~3を表示させてループ、4は始めは見えない)方法が分かりません。
6
-
7
-
8
-
9
- ↓を★のところへ記入しましたが、さらに広くなってしまいます。
2
+
3
+
10
4
 
11
5
  ```ここに言語を入力
12
6
 
7
+ <!DOCTYPE html>
8
+
9
+ <html lang="ja">
10
+
11
+
12
+
13
+ <head>
14
+
15
+ <title></title>
16
+
17
+
18
+
19
+ <link rel="shortcut icon" href="images/favicon.ico">
20
+
21
+
22
+
23
+ <meta charset="utf-8">
24
+
25
+ <meta name="robots" content="noindex,nofollow">
26
+
27
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.0/animate.min.css">
28
+
29
+ <link rel="stylesheet" href="css/basic_style.css">
30
+
31
+ <!--14,15新しく-->
32
+
33
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
34
+
35
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js">
36
+
37
+ <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
38
+
39
+ <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>
40
+
41
+ <script src="./js/wow.min.js"></script>
42
+
43
+
44
+
45
+ <script type="text/javascript">
46
+
47
+ var ua = navigator.userAgent;
48
+
49
+ if (ua.indexOf('iPhone') > 0
50
+
51
+ || (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0)
52
+
53
+ || ua.indexOf('Windows Phone') > 0) {
54
+
55
+ location.href = './sp/';
56
+
57
+ }
58
+
59
+ </script>
60
+
61
+
62
+
63
+ </head>
64
+
65
+
66
+
67
+
68
+
69
+ <body>
70
+
71
+ <div class="wrapper">
72
+
13
- <div style="display:grid;grid-template-columns:calc(100% - 30px) 30px;">
73
+ <div style="display:grid;grid-template-columns:calc(100% - 30px) 30px;">
74
+
75
+
76
+
77
+ <!-- Swiper START -->
78
+
79
+ <div class="swiper-container">
80
+
81
+ <!-- メイン表示部分 -->
82
+
83
+ <div class="swiper-wrapper">
84
+
85
+ <!-- 各スライド -->
86
+
87
+ <div class="swiper-slide">Slide 1</div>
88
+
89
+ <div class="swiper-slide">Slide 2</div>
90
+
91
+ <div class="swiper-slide">Slide 3</div>
92
+
93
+ <div class="swiper-slide">Slide 4</div>
94
+
95
+ </div>
96
+
97
+ <div class="swiper-button-prev"></div>
98
+
99
+ <div class="swiper-button-next"></div>
100
+
101
+ <div class="swiper-pagination"></div>
102
+
103
+ </div></div>
104
+
105
+ <!-- Swiper END -->
106
+
107
+ <script>
108
+
109
+
110
+
111
+ var mySwiper = new Swiper('.swiper-container', {
112
+
113
+
114
+
115
+ slidesPerView: 3,
116
+
117
+ loop: true,
118
+
119
+ autoplay: {
120
+
121
+ delay: 3000,
122
+
123
+ stopOnLastSlide: false,
124
+
125
+ disableOnInteraction: false,
126
+
127
+ reverseDirection: false
128
+
129
+ },
130
+
131
+ navigation: {
132
+
133
+ nextEl: '.swiper-button-next',
134
+
135
+ prevEl: '.swiper-button-prev'
136
+
137
+ },
138
+
139
+ pagination: {
140
+
141
+ el: '.swiper-pagination',
142
+
143
+ type: 'bullets',
144
+
145
+ clickable: true
146
+
147
+ }
148
+
149
+
150
+
151
+ });
152
+
153
+
154
+
155
+ </script>
156
+
157
+
158
+
159
+
160
+
161
+ </body>
162
+
163
+
164
+
165
+ </HTML>
166
+
167
+
14
168
 
15
169
  ```
16
170
 
17
-
18
-
19
171
  ```ここに言語を入力
20
172
 
21
-
22
-
23
- <div id="bg7">
24
-
25
- <!-- Swiper START -->
26
-
27
-
28
-
29
- <div class="swiper-container">
30
-
31
- <!-- メイン表示部分 -->
32
-
33
- <div class="swiper-wrapper">
34
-
35
- <!-- 各スライド -->
36
-
37
- <div class="swiper-slide"><img src="images/sly6.png"></div>
38
-
39
- <div class="swiper-slide"><img src="images/sly1.png"></div>
40
-
41
- <div class="swiper-slide"><img src="images/sly2.png"></div>
42
-
43
- <div class="swiper-slide"><img src="images/sly3.png"></div>
44
-
45
- <div class="swiper-slide"><img src="images/sly4.png"></div>
46
-
47
- <div class="swiper-slide"><img src="images/sly5.png"></div>
48
-
49
- </div>
50
-
51
- <div class="swiper-button-prev"></div>
52
-
53
- <div class="swiper-button-next"></div>
54
-
55
- <div class="swiper-pagination"></div>
56
-
57
- </div>
58
-
59
- <!-- Swiper END -->
60
-
61
- <script>
62
-
63
-
64
-
65
- var mySwiper = new Swiper('.swiper-container', {
66
-
67
- slidesPerView: 3,
68
-
69
- loop: true,
70
-
71
- autoplay: {
72
-
73
- delay: 3000,
74
-
75
- stopOnLastSlide: false,
76
-
77
- disableOnInteraction: false,
78
-
79
- reverseDirection: false
80
-
81
- },
82
-
83
- navigation: {
84
-
85
- nextEl: '.swiper-button-next',
86
-
87
- prevEl: '.swiper-button-prev'
88
-
89
- },
90
-
91
- pagination: {
92
-
93
- el: '.swiper-pagination',
94
-
95
- type: 'bullets',
96
-
97
- clickable: true
98
-
99
- }
100
-
101
-
102
-
103
- });
104
-
105
-
106
-
107
- </script>
108
-
109
- </div>
110
-
111
-
112
-
113
-
173
+ @charset "utf-8";
174
+
175
+
176
+
177
+ /*
178
+
179
+ Theme Name: SUBHAND
180
+
181
+ Author: SUBHAND.LLC
182
+
183
+ Author URL: http://www.subhand.net/
184
+
185
+ */
186
+
187
+
188
+
189
+
190
+
191
+ /* common
192
+
193
+ ---------------------------------------------*/
194
+
195
+ * {margin:0;padding:0;}
196
+
197
+
198
+
199
+ a:link,a:visited {
200
+
201
+ color: #ffffff;
202
+
203
+ text-decoration:underline;
204
+
205
+ }
206
+
207
+ a:hover,a:active {
208
+
209
+ color: #d90909;
210
+
211
+ text-decoration:underline;
212
+
213
+ }
214
+
215
+
216
+
217
+ .impact {font-size:20pt; font-weight:bold;}
218
+
219
+ .impact2 {color:red;}
220
+
221
+ .impact3 {background:yellow; color:#000;}
222
+
223
+ /* #impact4 {underline:;} */
224
+
225
+ .impact5 {background:#173B50; padding:2px 5px; color:#fff;}
226
+
227
+ .impact6 {background:#f4f4f4; padding:3px; line-height:1.1;}
228
+
229
+ .impact7 {background: #B60000; padding:2px 5px; color:#fff;}
230
+
231
+ .style2 {color: #FF0000}
232
+
233
+ .style3 {color: #333333}
234
+
235
+ .style4 {color: #000000}
236
+
237
+
238
+
239
+
240
+
241
+ img{ border: none;}
242
+
243
+
244
+
245
+ /* ボタンのマウスオーバーで明るくする */
246
+
247
+ .btn:hover {
248
+
249
+ filter: brightness(120%);
250
+
251
+ }
252
+
253
+
254
+
255
+ ol, ul {
256
+
257
+ list-style-type: none;
258
+
259
+ }
260
+
261
+
262
+
263
+
264
+
265
+ /* animation
266
+
267
+ ---------------------------------------------*/
268
+
269
+ .feedInUp {
270
+
271
+ opacity: 0;
272
+
273
+ transform: translate(0,30px);
274
+
275
+ -webkit-transform: translate(0,30px);
276
+
277
+ transition: 1.5s;
278
+
279
+ }
280
+
281
+ .feedInUp_On {
282
+
283
+ opacity: 1.0;
284
+
285
+ transform: translate(0,0);
286
+
287
+ -webkit-transform: translate(0,0);
288
+
289
+ }
290
+
291
+
292
+
293
+ /* layout
294
+
295
+ ---------------------------------------------*/
296
+
297
+
298
+
299
+
300
+
301
+ /*TopIntro-Start*/
302
+
303
+ body {
304
+
305
+ width: 100%;
306
+
307
+ height: 100%;
308
+
309
+ margin: 0px;
310
+
311
+ padding: 0px;
312
+
313
+
314
+
315
+ background-color: #fff;
316
+
317
+ background-repeat: repeat;
318
+
319
+ background-attachment: fixed;
320
+
321
+ background-position: top center;
322
+
323
+
324
+
325
+ -webkit-text-size-adjust:none;
326
+
327
+
328
+
329
+ text-align:center;
330
+
331
+ font-size:18px;
332
+
333
+ font-family: 'meiryo', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', sans-serif;
334
+
335
+ color: #383d5c;
336
+
337
+ }
338
+
339
+
340
+
341
+ .wrapper{
342
+
343
+ overflow:hidden;
344
+
345
+ }
346
+
347
+
348
+
349
+ /* 全体のスタイル */]
350
+
351
+ .swiper-wrapper {
352
+
353
+ width: 100%;
354
+
355
+ height: 250px;
356
+
357
+ }
358
+
359
+ /* 全スライド共通スタイル */
360
+
361
+ .swiper-slide {
362
+
363
+ color: #ffffff;
364
+
365
+ width: 100%;
366
+
367
+ height: 100%;
368
+
369
+ text-align: center;
370
+
371
+ line-height: 250px;
372
+
373
+ }
374
+
375
+ /* 4の倍数+1枚目のスライドのスタイル(1枚目、5枚目…) */
376
+
377
+ .swiper-slide:nth-child(4n+1) {
378
+
379
+ background-color: #EECB27;
380
+
381
+ }
382
+
383
+ /* 4の倍数+2枚目のスライドのスタイル(2枚目、6枚目…) */
384
+
385
+ .swiper-slide:nth-child(4n+2) {
386
+
387
+ background-color: #E13239;
388
+
389
+ }
390
+
391
+ /* 4の倍数+3枚目のスライドのスタイル(3枚目、7枚目…) */
392
+
393
+ .swiper-slide:nth-child(4n+3) {
394
+
395
+ background-color: #1F1762;
396
+
397
+ }
398
+
399
+ /* 4の倍数+4枚目のスライドのスタイル(4枚目、8枚目…) */
400
+
401
+ .swiper-slide:nth-child(4n+4) {
402
+
403
+ background-color: #BEDAE5;
404
+
405
+ }
406
+
407
+
408
+
409
+
410
+
411
+ #
412
+
413
+
414
+
415
+ #container {
416
+
417
+
418
+
419
+ text-align:left;
420
+
421
+ width:1000px;
422
+
423
+ margin:0 auto;
424
+
425
+
426
+
427
+ }
428
+
429
+
430
+
431
+ #container2 {
432
+
433
+
434
+
435
+ text-align:left;
436
+
437
+ width:800px;
438
+
439
+ margin:0 auto;
440
+
441
+
442
+
443
+ }
444
+
445
+
446
+
447
+
448
+
449
+ #containerform {
450
+
451
+
452
+
453
+ text-align:left;
454
+
455
+ width: 450px;
456
+
457
+ margin-left: 50px;
458
+
459
+
460
+
461
+
462
+
463
+ }
114
464
 
115
465
  ```
116
-
117
-
118
-
119
- ```.sly6 { background: url("../images/sly6.png") no-repeat top center; height: 536px; }
120
-
121
- .sly1 { background: url("../images/sly1.png") no-repeat top center; height: 536px; }
122
-
123
- .sly2 { background: url("../images/sly2.png") no-repeat top center; height: 536px; }
124
-
125
- .sly3 { background: url("../images/sly3.png") no-repeat top center; height: 536px; }
126
-
127
- .sly4 { background: url("../images/sly4.png") no-repeat top center; height: 536px; }
128
-
129
- .sly5 { background: url("../images/sly5.png") no-repeat top center; height: 536px; }
130
-
131
-
132
-
133
- /*sly*/
134
-
135
- /* 全体のスタイル */
136
-
137
- .swiper-wrapper {
138
-
139
- width: 100%;
140
-
141
- height: 250px;
142
-
143
- }
144
-
145
- /* 全スライド共通スタイル */
146
-
147
- .swiper-slide {
148
-
149
- color: #ffffff;
150
-
151
- width: 100%;
152
-
153
- height: 100%;
154
-
155
- text-align: center;
156
-
157
- line-height: 250px;
158
-
159
- }
160
-
161
-
162
-
163
-
164
-
165
- *, *:before, *:after {
166
-
167
- box-sizing: border-box;
168
-
169
-
170
-
171
- }
172
-
173
- .col_2{
174
-
175
- width: 100%;
176
-
177
- display: flex;
178
-
179
- display: -ms-flexbox; /* IE10 */
180
-
181
- flex-wrap: wrap;
182
-
183
- -ms-flex-wrap: wrap; /* IE10 */
184
-
185
- /*幅の調整*/
186
-
187
- padding-left: 330px;
188
-
189
- padding-right: 330px;
190
-
191
- }
192
-
193
- .col_2 > div{
194
-
195
- width: 50%;
196
-
197
- padding: 1px;
198
-
199
- }
200
-
201
- @media screen and (max-width: 960px) {
202
-
203
- .col_2 > div{
204
-
205
- width: 100%;
206
-
207
- }
208
-
209
- }
210
-
211
-
212
-
213
- ```

3

文法の修正

2021/12/25 15:52

投稿

yuri.s
yuri.s

スコア6

test CHANGED
File without changes
test CHANGED
@@ -2,9 +2,15 @@
2
2
 
3
3
 
4
4
 
5
+ SwiperかSwiperの親要素の幅指定がどこにあるのか分かりません。
6
+
7
+
8
+
9
+ ↓を★のところへ記入しましたが、さらに広くなってしまいます。
10
+
5
11
  ```ここに言語を入力
6
12
 
7
- <div style="display:grid;grid-template-columns:calc(100% - 10px) 10px;">
13
+ <div style="display:grid;grid-template-columns:calc(100% - 30px) 30px;">
8
14
 
9
15
  ```
10
16
 
@@ -18,6 +24,8 @@
18
24
 
19
25
  <!-- Swiper START -->
20
26
 
27
+
28
+
21
29
  <div class="swiper-container">
22
30
 
23
31
  <!-- メイン表示部分 -->

2

文法の修正

2021/12/25 15:33

投稿

yuri.s
yuri.s

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,15 +1,17 @@
1
- 背景の白枠の中にスライサーを入れたいです。画像同士の幅をするにはどうしたら良いですか?
1
+ 画像同士の幅を小さしていくにはどうしたら良いですか?
2
-
3
-
4
-
5
- swiperかswiperの親要素の幅指定を見直したいです。
6
-
7
- このコードだとどの部分でしょうか?
8
2
 
9
3
 
10
4
 
11
5
  ```ここに言語を入力
12
6
 
7
+ <div style="display:grid;grid-template-columns:calc(100% - 10px) 10px;">
8
+
9
+ ```
10
+
11
+
12
+
13
+ ```ここに言語を入力
14
+
13
15
 
14
16
 
15
17
  <div id="bg7">

1

文法の修正

2021/12/25 15:21

投稿

yuri.s
yuri.s

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,13 @@
1
1
  背景の白枠の中にスライサーを入れたいです。画像同士の幅を狭くするにはどうしたら良いですか?
2
2
 
3
+
4
+
5
+ swiperかswiperの親要素の幅指定を見直したいです。
6
+
7
+ このコードだとどの部分でしょうか?
8
+
9
+
10
+
3
11
  ```ここに言語を入力
4
12
 
5
13