質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1174閲覧

z-indexの使い方、width100%の調整方法を教えてください!

katusi

総合スコア12

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/02/13 14:15

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/です。
少し多いですがよろしくお願いいたします!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

1,header-logoがslideのimgに隠れてしまうのですがz-indexで調整しても上手く重なりが反対になりません。

slickスクリプトか画像のz-index を1000に設定しているので、それ以上の数値を設定すればいいでしょう。

css

1.header-logo img { 2 display: block; 3 position: absolute; 4 z-index: 1001; 5}

2,menu-btnを押した時にheaderのheightを長くするにはどうしたらいいですか?

margin で上下余白を大きくすればいいでしょう。

css

1.header-menu li { 2 font-family: 'Abel', sans-serif; 3 margin: 25px 20px; /*上下 左右*/ 4}

3,slideの下にある画像の切り替えする数字のボタンをarrowsで消せないのですがどうすれば良いですか?

呈示のコードでは数字は表示されないので、よく分からないですか、slickの引数で
dots: false,としたらどうでしょうか。

4,slideの画像のwidthが100%にならないのですがどうしたら良いでしょうか?

下記でなりませんか。

css

1.slider img { 2 width: 100%; 3}

投稿2020/02/13 17:33

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問