質問編集履歴
2
CSSの内容を追加しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -192,6 +192,8 @@
|
|
|
192
192
|
|
|
193
193
|
```CSS
|
|
194
194
|
|
|
195
|
+
(commnon.css)
|
|
196
|
+
|
|
195
197
|
.header {
|
|
196
198
|
|
|
197
199
|
display: flex;
|
|
@@ -548,22 +550,54 @@
|
|
|
548
550
|
|
|
549
551
|
}
|
|
550
552
|
|
|
553
|
+
```CSS
|
|
554
|
+
|
|
555
|
+
(top.css)
|
|
556
|
+
|
|
557
|
+
.slider{
|
|
558
|
+
|
|
559
|
+
margin: 100px auto;
|
|
560
|
+
|
|
561
|
+
width: 80%;
|
|
562
|
+
|
|
563
|
+
list-style: none;
|
|
564
|
+
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.slider img{
|
|
568
|
+
|
|
569
|
+
height: auto;
|
|
570
|
+
|
|
571
|
+
width: 100%;
|
|
572
|
+
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
/*slick setting*/
|
|
576
|
+
|
|
577
|
+
.slick-prev:before,
|
|
578
|
+
|
|
579
|
+
.slick-next:before {
|
|
580
|
+
|
|
581
|
+
color: #000;
|
|
582
|
+
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
|
|
586
|
+
|
|
587
|
+
|
|
588
|
+
|
|
589
|
+
```JS
|
|
590
|
+
|
|
591
|
+
$('.close-button, .open-button').click(function () {
|
|
592
|
+
|
|
593
|
+
$('.header nav').slideToggle();
|
|
594
|
+
|
|
595
|
+
});
|
|
596
|
+
|
|
551
597
|
```
|
|
552
598
|
|
|
553
599
|
|
|
554
600
|
|
|
555
|
-
```JS
|
|
556
|
-
|
|
557
|
-
$('.close-button, .open-button').click(function () {
|
|
558
|
-
|
|
559
|
-
$('.header nav').slideToggle();
|
|
560
|
-
|
|
561
|
-
});
|
|
562
|
-
|
|
563
|
-
```
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
601
|
|
|
568
602
|
|
|
569
603
|
|
1
説明が足りない部分がありました。申し訳ございません。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
-
ハンバーガーメニューの出し入れをしたいです
|
|
3
|
+
ハンバーガーメニューの出し入れをしたいです、その上でsliderも作用してほしいです
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
SPサイズにしたときにハンバーガーメニュー自体は出るのですが、クリックしてもメニューが出ません。PCサイズではヘッダーを横並びにしたいのですが、SPサイズに合わせてコーディングするとPCサイズにしたときにヘッダーが消えてしまいます。
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
ハンバーガーメニューの出し入れができるような記述をするとsliderが機能しなくなり、ただの縦並びの画像になります。
|
|
16
16
|
|
|
17
17
|
```
|
|
18
18
|
|
|
@@ -122,7 +122,29 @@
|
|
|
122
122
|
|
|
123
123
|
</header>
|
|
124
124
|
|
|
125
|
-
|
|
125
|
+
<main>
|
|
126
|
+
|
|
127
|
+
<div class="section-top__image">
|
|
128
|
+
|
|
129
|
+
<div class="swiper-container">
|
|
130
|
+
|
|
131
|
+
<ul class="slider">
|
|
132
|
+
|
|
133
|
+
<li><img title="岸壁の猫" src="htdocs/assets/images/top/IMG_1192.JPG" alt="岸壁の猫"></li>
|
|
134
|
+
|
|
135
|
+
<li><img src="htdocs/assets/images/top/IMG_1034.JPG" alt="振り向く猫"></li>
|
|
136
|
+
|
|
137
|
+
<li><img src="htdocs/assets/images/top/IMG_1222.png" alt="集まる猫"></li>
|
|
138
|
+
|
|
139
|
+
<li><img src="htdocs/assets/images/experience/IMG_1405.png" alt="公園の猫"></li>
|
|
140
|
+
|
|
141
|
+
</ul>
|
|
142
|
+
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
</div>
|
|
146
|
+
|
|
147
|
+
</main>
|
|
126
148
|
|
|
127
149
|
<footer class="footer">
|
|
128
150
|
|
|
@@ -160,7 +182,7 @@
|
|
|
160
182
|
|
|
161
183
|
<a href=""><img src="htdocs/assets/images/common/logo_tsn-02.svg" alt="" width="100"></a>
|
|
162
184
|
|
|
163
|
-
<div> <small class="site-title">©️
|
|
185
|
+
<div> <small class="site-title">©️しまねこ</small> </div>
|
|
164
186
|
|
|
165
187
|
</footer>
|
|
166
188
|
|
|
@@ -576,4 +598,16 @@
|
|
|
576
598
|
|
|
577
599
|
にするとハンバーガーメニューをクリックした後のページを出せるのですが、閉じるボタンが効きません。
|
|
578
600
|
|
|
601
|
+
|
|
602
|
+
|
|
603
|
+
実際にこのサイトに記したコードだけで自分でもテストしましたが、ハンバーガーメニューはクリックしても開かないなど正常には動いていませんでした。(SafariとGoogleChromeで検証しましたが共にダメでした。)
|
|
604
|
+
|
|
605
|
+
|
|
606
|
+
|
|
607
|
+
</body>前にscriptが含まれているものを移動するとハンバーガーメニューはクリックで出し入れできるようになったのですが、sliderが動かない、という事態になりました。
|
|
608
|
+
|
|
609
|
+
|
|
610
|
+
|
|
579
611
|
### 補足情報（FW/ツールのバージョンなど）
|
|
612
|
+
|
|
613
|
+
sliderを動かしながら、ハンバーガーメニューも表示したいです。
|