teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

css を一部修正しました。

2021/07/01 07:56

投稿

beginner15
beginner15

スコア1

title CHANGED
File without changes
body CHANGED
@@ -37,60 +37,56 @@
37
37
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
38
38
  </head>
39
39
 
40
- <body>
40
+ <body>
41
- <header>
41
+ <header>
42
- <nav id="nav">
42
+ <nav id="nav">
43
- <ul>
43
+ <ul>
44
- <li><a href="#">works</a></li>
44
+ <li><a href="#">works</a></li>
45
+ <li><a href="#">profile</a></li>
45
- <li><a href="#">blog</a></li>
46
+ <li><a href="#">blog</a></li>
46
- <li><a href="#">profile</a></li>
47
- <li><a href="#">contact</a></li>
47
+ <li><a href="#">contact</a></li>
48
- </ul>
48
+ </ul>
49
- </nav>
49
+ </nav>
50
- <div id="hamburger">
50
+ <div id="hamburger">
51
- <span class="inner_line" id="line1"></span>
51
+ <span class="inner_line" id="line1"></span>
52
- <span class="inner_line" id="line2"></span>
52
+ <span class="inner_line" id="line2"></span>
53
- <span class="inner_line" id="line3"></span>
53
+ <span class="inner_line" id="line3"></span>
54
- </div>
54
+ </div>
55
- <h1>my portfolio</h1>
55
+ <h1>My Portfolio</h1>
56
- </header>
56
+ </header>
57
57
 
58
- <div class="splide-outer">
58
+ <div class="splide-outer">
59
- <div class="splide">
59
+ <div class="splide">
60
- <div class="splide__track">
60
+ <div class="splide__track">
61
- <ul class="splide__list">
61
+ <ul class="splide__list">
62
- <li class="splide__slide">
62
+ <li class="splide__slide">
63
- <picture>
63
+ <picture>
64
- <source media="(min-width: 768px)" srcset="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1_PC">
64
+ <source media="(min-width: 768px)" srcset="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1_PC">
65
- <img src="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1_SP">
65
+ <img src="https://placehold.jp/ccffff/000000/960x540.png?text=Slide1_SP">
66
- </picture>
66
+ </picture>
67
- </li>
67
+ </li>
68
- <li class="splide__slide">
68
+ <li class="splide__slide">
69
- <picture>
69
+ <picture>
70
- <source media="(min-width: 768px)" srcset="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2_PC">
70
+ <source media="(min-width: 768px)" srcset="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2_PC">
71
- <img src="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2_SP">
71
+ <img src="https://placehold.jp/ffccff/000000/960x540.png?text=Slide2_SP">
72
- </picture>
72
+ </picture>
73
- </li>
73
+ </li>
74
- <li class="splide__slide">
74
+ <li class="splide__slide">
75
- <picture>
75
+ <picture>
76
- <source media="(min-width: 768px)" srcset="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3_PC">
76
+ <source media="(min-width: 768px)" srcset="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3_PC">
77
- <img src="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3_SP">
77
+ <img src="https://placehold.jp/ccffcc/000000/960x540.png?text=Slide3_SP">
78
- </picture>
78
+ </picture>
79
- </li>
79
+ </li>
80
- </ul>
80
+ </ul>
81
+ </div>
81
82
  </div>
82
- </div>
83
+ </div>
83
- </div>
84
+ </body>
84
-
85
85
  <!-- partial -->
86
86
  <script src="../About_My_Site/JS/script.js"></script>
87
87
  <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
88
+
88
89
 
89
- </body>
90
- </html>
91
-
92
-
93
-
94
90
  ```
95
91
 
96
92
  ```CSS

1

htmlのコードを一部修正しました。

2021/07/01 07:56

投稿

beginner15
beginner15

スコア1

title CHANGED
File without changes
body CHANGED
@@ -90,11 +90,7 @@
90
90
  </html>
91
91
 
92
92
 
93
- document.addEventListener('DOMContentLoaded', () => {
93
+
94
- new Splide('.splide', {
95
- type: 'loop',
96
- }).mount()
97
- })
98
94
  ```
99
95
 
100
96
  ```CSS