回答編集履歴

8

add solution to background changing

2020/07/31 10:34

投稿

YufanLou
YufanLou

スコア464

test CHANGED
@@ -159,3 +159,259 @@
159
159
  }
160
160
 
161
161
  ```
162
+
163
+
164
+
165
+ ---
166
+
167
+
168
+
169
+ 追記:左側で写真のスライドみたいなのを作りたいとコメントいただいたので、CSS Transition で簡単な実装を追記します。
170
+
171
+
172
+
173
+ まずは ul を捨てて、一つの a だけ残してください。
174
+
175
+
176
+
177
+ ```html
178
+
179
+ <div class="main_l">
180
+
181
+ <a role="img"></a>
182
+
183
+ </div>
184
+
185
+ ```
186
+
187
+
188
+
189
+ a に main_l を満たすための CSS:
190
+
191
+
192
+
193
+ ```css
194
+
195
+ .main_l { display: block; }
196
+
197
+ .main_l a {
198
+
199
+ display: block;
200
+
201
+ width: 100%;
202
+
203
+ height: 100%;
204
+
205
+ }
206
+
207
+ ```
208
+
209
+
210
+
211
+ a の background を設定します。background-image を後で JavaScript に設定します。
212
+
213
+
214
+
215
+ ```css
216
+
217
+ .main_l a {
218
+
219
+ background-position: center center;
220
+
221
+ background-size: cover;
222
+
223
+ }
224
+
225
+ ```
226
+
227
+
228
+
229
+ JavaScript について、まずは設定を説明しましょう:
230
+
231
+
232
+
233
+ ```javascript
234
+
235
+ let config = {
236
+
237
+ selector: ".main_l a",
238
+
239
+ bgUrls: [
240
+
241
+ "https://placehold.jp/1000x1000.png?text=Slide%201",
242
+
243
+ "https://placehold.jp/1000x1000.png?text=Slide%202",
244
+
245
+ "https://placehold.jp/1000x1000.png?text=Slide%203",
246
+
247
+ "https://placehold.jp/1000x1000.png?text=Slide%204"
248
+
249
+ ],
250
+
251
+ fadeDelay: 1,
252
+
253
+ interval: 5,
254
+
255
+ onTransition: currentUrl => {
256
+
257
+ let mainL = document.querySelector(".main_l a");
258
+
259
+ mainL.setAttribute(
260
+
261
+ "href",
262
+
263
+ `#anchor_${currentUrl.substring(currentUrl.length - 1)}`
264
+
265
+ );
266
+
267
+ mainL.setAttribute(
268
+
269
+ "aria-label",
270
+
271
+ `Slide ${currentUrl.substring(currentUrl.length - 1)}`
272
+
273
+ );
274
+
275
+ }
276
+
277
+ };
278
+
279
+ ```
280
+
281
+
282
+
283
+ selector はスライドになる要素の CSS 選択符です。複数の要素が見つかる場合、最初の要素を使います。
284
+
285
+
286
+
287
+ bgUrls は背景画像の URL の Array です。
288
+
289
+
290
+
291
+ fadeDelay は画像の切り替えのとき fade 動画の長さです。単位は秒。
292
+
293
+
294
+
295
+ interval は画像の切り替えの間隔時間です。単位は秒。
296
+
297
+
298
+
299
+ onTransition は毎回画像切り替えの際に実行したい関数です。関連のため、切り替え後表示する画像の URL を引数で渡します。これで切り替えごとURLによってリンクを変えます。
300
+
301
+
302
+
303
+ 実装は下記のようになります:
304
+
305
+
306
+
307
+ ```javascript
308
+
309
+ (function(config) {
310
+
311
+ // background を変える要素を選択
312
+
313
+ let mainL = document.querySelector(config.selector);
314
+
315
+
316
+
317
+ // background 画像を事前ロード
318
+
319
+ // じゃないと第一回コードする際 fade-in 動画見えない
320
+
321
+ let bgUrls = config.bgUrls;
322
+
323
+ function preloadImgUrls(urlArr) {
324
+
325
+ for (let url of urlArr) {
326
+
327
+ let img = new Image();
328
+
329
+ img.src = url;
330
+
331
+ }
332
+
333
+ }
334
+
335
+ preloadImgUrls(bgUrls);
336
+
337
+
338
+
339
+ // 最初の background を設定、今の background への index を記録
340
+
341
+ // 次の background 循環で取得
342
+
343
+ let currentBg = 0;
344
+
345
+ mainL.style.backgroundImage = `url(${bgUrls[currentBg]})`;
346
+
347
+ function getNextBgUrl() {
348
+
349
+ currentBg = (currentBg + 1) % bgUrls.length;
350
+
351
+ return bgUrls[currentBg];
352
+
353
+ }
354
+
355
+
356
+
357
+ // fade 動画を設定
358
+
359
+ let fadeDelay = config.fadeDelay;
360
+
361
+ mainL.style.transition = `opacity ${fadeDelay}s ease-in-out`;
362
+
363
+ async function waitForMs(ms) {
364
+
365
+ return new Promise(resolve => setTimeout(resolve, ms));
366
+
367
+ }
368
+
369
+ async function fadeOut() {
370
+
371
+ mainL.style.opacity = 0;
372
+
373
+ await waitForMs(fadeDelay * 1000);
374
+
375
+ }
376
+
377
+ async function fadeIn() {
378
+
379
+ await waitForMs(20); // fix animation fade in
380
+
381
+ // ここまたないと fade-in 動画たまに見えない
382
+
383
+ mainL.style.opacity = "";
384
+
385
+ await waitForMs(fadeDelay * 1000);
386
+
387
+ }
388
+
389
+
390
+
391
+ // 背景画像の循環を起動
392
+
393
+ let onTransition = config.onTransition;
394
+
395
+ onTransition(bgUrls[currentBg]);
396
+
397
+ setInterval(async () => {
398
+
399
+ await fadeOut();
400
+
401
+ let url = getNextBgUrl();
402
+
403
+ mainL.style.backgroundImage = `url(${url})`;
404
+
405
+ onTransition(url);
406
+
407
+ await fadeIn();
408
+
409
+ }, config.interval * 1000);
410
+
411
+ })(config);
412
+
413
+ ```
414
+
415
+
416
+
417
+ [Demo](https://codesandbox.io/s/peaceful-khorana-z2d25?file=/index.js) で実装の様子を見れます。

7

use background

2020/07/31 10:33

投稿

YufanLou
YufanLou

スコア464

test CHANGED
@@ -103,3 +103,59 @@
103
103
  .main_l img { width: 100vw; }
104
104
 
105
105
  ```
106
+
107
+
108
+
109
+ ---
110
+
111
+
112
+
113
+ 追記:完璧に余白ないようにするには、img 要素ではなく、background を使います。目が不自由な方のために、a 要素に role="img" をつけて、aria-label="説明文" もつけます。
114
+
115
+
116
+
117
+ ```html
118
+
119
+ <ul>
120
+
121
+ <li style="background-image: url(images/bg01.jpg)">
122
+
123
+ <a href="XXX" role="img" aria-label="画像1"></a>
124
+
125
+ </li>
126
+
127
+ <li style="background-image: url(images/bg2.jpg)">
128
+
129
+ <a href="XXX" role="img" aria-label="画像2"></a>
130
+
131
+ </li>
132
+
133
+ <li style="background-image: url(images/bg03.jpg)">
134
+
135
+ <a href="XXX" role="img" aria-label="画像3"></a>
136
+
137
+ </li>
138
+
139
+ <li style="background-image: url(images/bg04.jpg)">
140
+
141
+ <a href="XXX" role="img" aria-label="画像4"></a>
142
+
143
+ </li>
144
+
145
+ </ul>
146
+
147
+ ```
148
+
149
+
150
+
151
+ ```css
152
+
153
+ .main_l li {
154
+
155
+ background-position: center center;
156
+
157
+ background-size: cover;
158
+
159
+ }
160
+
161
+ ```

6

fix width

2020/07/23 11:21

投稿

YufanLou
YufanLou

スコア464

test CHANGED
@@ -87,3 +87,19 @@
87
87
  .main_l { flex-direction: column; }
88
88
 
89
89
  ```
90
+
91
+
92
+
93
+ ---
94
+
95
+
96
+
97
+ 追記:コメントの実例を改めてみたら、その効果は画像の width を 100vw に固定したものです。下記のようで設定できます。
98
+
99
+
100
+
101
+ ```css
102
+
103
+ .main_l img { width: 100vw; }
104
+
105
+ ```

5

add change flex-direction

2020/07/23 10:59

投稿

YufanLou
YufanLou

スコア464

test CHANGED
@@ -71,3 +71,19 @@
71
71
  .main_l_box1 { height: 100vh; }
72
72
 
73
73
  ```
74
+
75
+
76
+
77
+ ---
78
+
79
+
80
+
81
+ 追記:ひたすら 100vh 設定したら左側他の調整が難しくなりそうなので、下記のようでは内容の高さが固定されなくても左側を満たします。flex の方向を縦にします。画像の高さが十分であれば上下に余白がなくなれます。けど、ウィンドが短くなると、左右に余白が出るので、画像に min-width を設定してください。
82
+
83
+
84
+
85
+ ```css
86
+
87
+ .main_l { flex-direction: column; }
88
+
89
+ ```

4

leave no space above and below

2020/07/23 10:08

投稿

YufanLou
YufanLou

スコア464

test CHANGED
@@ -55,3 +55,19 @@
55
55
  }
56
56
 
57
57
  ```
58
+
59
+
60
+
61
+ ---
62
+
63
+
64
+
65
+ 追記:上下の余白をなくしたいと依頼されました:
66
+
67
+
68
+
69
+ ```css
70
+
71
+ .main_l_box1 { height: 100vh; }
72
+
73
+ ```

3

fix width

2020/07/22 08:36

投稿

YufanLou
YufanLou

スコア464

test CHANGED
@@ -44,6 +44,8 @@
44
44
 
45
45
  .main_l {
46
46
 
47
+ overflow: hidden; /* width を内容に影響されないように */
48
+
47
49
  display: flex;
48
50
 
49
51
  justify-content: center;

2

縦で中央固定追加

2020/07/22 04:19

投稿

YufanLou
YufanLou

スコア464

test CHANGED
@@ -29,3 +29,27 @@
29
29
 
30
30
 
31
31
  追記:`overflow: scroll`使うと上下だけではなく左右スクロールバーも出そうです。上下だけでほしいなら、`overflow-y`を使ってください。左右だけでほしいなら、`overflow-x`を使ってください。
32
+
33
+
34
+
35
+ ---
36
+
37
+
38
+
39
+ 追記:`.main_l` の中の画像を中央に固定したい場合はこうしてください:
40
+
41
+
42
+
43
+ ```css
44
+
45
+ .main_l {
46
+
47
+ display: flex;
48
+
49
+ justify-content: center;
50
+
51
+ align-items: center;
52
+
53
+ }
54
+
55
+ ```

1

add fix for extra scroll bar

2020/07/22 04:12

投稿

YufanLou
YufanLou

スコア464

test CHANGED
@@ -21,3 +21,11 @@
21
21
 
22
22
 
23
23
  [Demo](https://codesandbox.io/s/peaceful-khorana-z2d25)
24
+
25
+
26
+
27
+ ---
28
+
29
+
30
+
31
+ 追記:`overflow: scroll`使うと上下だけではなく左右スクロールバーも出そうです。上下だけでほしいなら、`overflow-y`を使ってください。左右だけでほしいなら、`overflow-x`を使ってください。