質問編集履歴

1

下の要素のコードを追加しました。

2021/07/13 10:03

投稿

Kiiko1
Kiiko1

スコア21

test CHANGED
File without changes
test CHANGED
@@ -230,6 +230,238 @@
230
230
 
231
231
 
232
232
 
233
+ ```下の要素のコード:HTML
234
+
235
+
236
+
237
+ <section class="tech-block">
238
+
239
+ <h2>Technology</h2>
240
+
241
+ <section class="tech-item">
242
+
243
+ <section class="tech">
244
+
245
+ <a href="#">
246
+
247
+ <iframe class="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/ccTikqRF9ls?controls=0&amp;start=60" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
248
+
249
+ <div class="tech-text">
250
+
251
+ <div class="category">tech-No.1</div>
252
+
253
+ <p class="description">We offer industrial robots in a wide range of
254
+
255
+ versions with various.</p>
256
+
257
+ </div>
258
+
259
+ </a>
260
+
261
+ </section>
262
+
263
+
264
+
265
+ <section class="tech"><br>
266
+
267
+ <a href="#">
268
+
269
+ <iframe class="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/rMi3XtG0ZWc?controls=0&amp;start=60" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
270
+
271
+ <div class="tech-text">
272
+
273
+ <div class="category">tech-No.2</div>
274
+
275
+ <p class="description">We offer industrial robots in a wide range of versions with various.</p>
276
+
277
+ </div>
278
+
279
+ </a>
280
+
281
+ </section>
282
+
283
+ </section>
284
+
285
+
286
+
287
+ <section class="tech-item">
288
+
289
+ <section class="tech"><br>
290
+
291
+ <a href="#">
292
+
293
+ <iframe class="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/3zmMHrxAMaA?controls=0&amp;start=60" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
294
+
295
+ <div class="tech-text">
296
+
297
+ <div class="category">tech-No.3</div>
298
+
299
+ <p class="description">We offer industrial robots in a wide range of versions with various.</p>
300
+
301
+ </div>
302
+
303
+ </a>
304
+
305
+ </section>
306
+
307
+
308
+
309
+ <section class="tech"><br>
310
+
311
+ <a href="#">
312
+
313
+ <iframe class="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/DIfJ96qgIpc?controls=0&amp;start=60" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
314
+
315
+ <div class="tech-text">
316
+
317
+ <div class="category">tech-No.4</div>
318
+
319
+ <p class="description">We offer industrial robots in a wide range of versions with various.</p>
320
+
321
+ </div>
322
+
323
+ </a>
324
+
325
+ </section>
326
+
327
+ </section>
328
+
329
+ </section>
330
+
331
+ ```
332
+
333
+
334
+
335
+ ```下の要素のコード:css
336
+
337
+ .tech-block .h2 {
338
+
339
+ margin-top: 0px;
340
+
341
+ margin-bottom: 0.4em;
342
+
343
+ margin-left: 30px;
344
+
345
+ font-size: 1.8rem;
346
+
347
+ line-height: 1.3;
348
+
349
+ font-weight: 500;
350
+
351
+ }
352
+
353
+ .tech {
354
+
355
+ width: 1250px;
356
+
357
+ margin-bottom: 130px;
358
+
359
+ margin-right: 10px;
360
+
361
+ margin-left: 10px;
362
+
363
+ padding: 8px;
364
+
365
+ border-radius: 5px;
366
+
367
+ background-color: #000000;
368
+
369
+ display: flex;
370
+
371
+ }
372
+
373
+ .tech .video {
374
+
375
+ width: 560px;
376
+
377
+ margin-left: 60px;
378
+
379
+ margin-top: 40px;
380
+
381
+ margin-bottom: 40px;
382
+
383
+ }
384
+
385
+ .tech .tech-text {
386
+
387
+ width: 900px;
388
+
389
+ margin-right: 60px;
390
+
391
+ margin-top: 90px;
392
+
393
+ }
394
+
395
+ .tech .category {
396
+
397
+ margin: 45px 9px 10px;
398
+
399
+ color: #F7DC01;
400
+
401
+ letter-spacing: 1px;
402
+
403
+ font-family: "Bebas Neue",sans-serif;
404
+
405
+ font-size: 17px;
406
+
407
+ }
408
+
409
+ .tech .category::before {
410
+
411
+ content: '';
412
+
413
+ display: inline-block;
414
+
415
+ width: 19px;
416
+
417
+ height: 19px;
418
+
419
+ margin-right: 5px;
420
+
421
+ margin-left: 20px;
422
+
423
+ border: 2px solid;
424
+
425
+ border-radius: 50%;
426
+
427
+ vertical-align: -5px;
428
+
429
+ }
430
+
431
+ .tech .description {
432
+
433
+ margin: 30px;
434
+
435
+ line-height: 1.5;
436
+
437
+ }
438
+
439
+ .tech > a {
440
+
441
+ display: flex;
442
+
443
+ margin: -8px -8px -11px;
444
+
445
+ padding: 8px 8px 11px;
446
+
447
+ border-radius: inherit;
448
+
449
+ color: #FFF;
450
+
451
+ transition: all 0.3s;
452
+
453
+ }
454
+
455
+ .tech > a:hover {
456
+
457
+ box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
458
+
459
+ opacity: 0.8;
460
+
461
+ }```
462
+
463
+
464
+
233
465
  ### 現在の状況
234
466
 
235
467
  ![イメージ説明](8691e13be6d7f67b267d213e49cddd28.png)