html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="practice9.css">
<script src="https://tsukigime-rider.com/js/jquery-3.1.1.min.js"></script>
<script src="https://tsukigime-rider.com/js/jquery-ui.js"></script>
<script src="https://tsukigime-rider.com/js/public/plugin/jquery.ui.touch-punch.min.js"></script>
<script src="https://tsukigime-rider.com/js/plugins/aos/aos.min.js"></script>
<script src="https://tsukigime-rider.com/js/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="https://tsukigime-rider.com/js/plugins/slick/slick.min.js"></script>
<title>practice8</title>
</head>
<body>
<header>
<div class="inner">
<div class="menu-btn"><img class="open" src="http://bunkai-san.jp/wp-content/themes/bunkaisan/img/sp-menu.png" alt="">
<img class="close" src="http://bunkai-san.jp/wp-content/themes/bunkaisan/images/toggle-off.png" alt="">
</div>
<ul class="header-menu">
<li class="menu-btn01">CONCEPT</li>
<li class="menu-btn02">FLOOR GUIDE</li>
<li class="menu-btn03">NEWS</li>
<li class="menu-btn04">ACCESS INFO</li>
<li class="menu-btn05">CONTACT</li>
</ul>
<div class="header-logo"><a href="http://bunkai-san.jp/"><img src="http://bunkai-san.jp/wp-content/themes/bunkaisan/img/logo.png" alt=""></a></div>
</div>
</header>
<main>
<div id="section1">
<div class="inner">
<div class="background-img">
<ul class="slider">
<li><img src="http://bunkai-san.jp/wp-content/themes/bunkaisan/img/main01.jpg" alt=""></li>
<li><img src="http://bunkai-san.jp/wp-content/themes/bunkaisan/img/main02.jpg" alt=""></li>
<li><img src="http://bunkai-san.jp/wp-content/themes/bunkaisan/img/main03.jpg" alt=""></li>
<li><img src="http://bunkai-san.jp/wp-content/themes/bunkaisan/img/main04.jpg" alt=""></li>
<li><img src="http://bunkai-san.jp/wp-content/themes/bunkaisan/img/main05.jpg" alt=""></li>
<li><img src="http://bunkai-san.jp/wp-content/themes/bunkaisan/img/main06.jpg" alt=""></li>
</ul>
</div>
</div>
</body>
</html>
```css```
.inner {
width: 100%;
overflow: hidden;
}
header {
height: 150px;
}
.inner ul {
list-style: none;
margin: 0;
padding: 0;
}
.header-menu {
display: flex;
justify-content: center;
}
.header-menu li {
font-family: 'Abel', sans-serif;
margin: 20px;
}
.menu-btn {
position: absolute;
top: 20px;
right: 50px;
width: 50px;
height: 50px;
z-index: 99;
}
.menu-btn img {
position: absolute;
width: 50px;
height: 50px;
}
.header-logo img {
display: block;
position: absolute;
z-index: 100;
}
#section1 {
position: relative;
max-width: 120%;
overflow: hidden;
}
.background-img {
position: relative;
}
.background-img li {
box-sizing: border-box;
display: inline-block;
float: left;
position: relative;
height: 665px;
}
.background-img img {
position: absolute;
top: -200px;
z-index: 60;
}
.slider img {
position: absolute;
}
.slider {
padding: 0; /* ulタグのデフォルトCSSを打ち消し /
margin: 0; / ulタグのデフォルトCSSを打ち消し / / ulタグのデフォルトCSSを打ち消し */
}
.slider li {
display: inline-block;
margin-bottom: 20px;
}
jQuery
<script>
$(function() {
$(".header-menu, .close").hide();
$(".menu-btn").click(function() {
$(".header-menu").slideToggle(200);
$(".open, .close").fadeToggle(200);
});
});
$(function(){
$(".slider").slick({
accessibility: true,
autoplay: true,
autoplaySpeed: 2000,
speed: 400,
dots: true,
fade: true,
arrows: false,
});
});
</script>
前提・実現したいこと
1,header-logoがslideのimgに隠れてしまうのですがz-indexで調整しても上手く重なりが反対になりません。
2,menu-btnを押した時にheaderのheightを長くするにはどうしたらいいですか？
3,slideの下にある画像の切り替えする数字のボタンをarrowsで消せないのですがどうすれば良いですか？
4,slideの画像のwidthが100%にならないのですがどうしたら良いでしょうか？
補足情報（FW/ツールのバージョンなど）
元のサイトのURLはhttp://bunkai-san.jp/です。
少し多いですがよろしくお願いいたします！
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。