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

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

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

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

HTML5

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

Q&A

0回答

507閲覧

スライドする背景画像の上に文字やアイコンを配置したい

toshi_72

総合スコア0

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2021/08/19 08:12

HPの作成を行っています。
右上のメニューが下になってしまい、背景画像に隠れてしまいます。

発生している問題・エラーメッセージ

右上のメニューをスライドする画像の上に配置したいのですが、画像が上になってしまい隠れてしまいます。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Tsubasa Takahashi</title> <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキス"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="img/favicon.ico"> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="js/main.js"></script> </head>
<body> <header id="header"> <nav> <ul> <li><a href="#menu">MENU</a></li> <li><a href="#about">ABOUT</a></li> <li><a href="#SCHEDULE">SCHEDULE</a></li> <li><a href="#RESULTS">RESULTS</a></li> <li><a href="#RESULTS">GALLERY</a></li> <li><a href="#NEWS">NEWS</a></li> <li><a href="#SPONSOR">SPONSOR</a></li> </ul> </nav> <div class="main_imgBox"> <h1><img class="main_logo" src="img/tsubasa_logo.png" alt="logo"> <div class="main_img" style="background-image: url(img/slide_1.JPG)"></div> <div class="main_img" style="background-image: url(img/slide_2.JPG)"></div> <div class="main_img" style="background-image: url(img/slide_3.JPG)"></div> <div class="main_img" style="background-image: url(img/slide_4.JPG)"></div> <div class="main_img" style="background-image: url(img/slide_5.JPG)"></div> </div> </header>

#header {
width: 100%;
min-height: 100vh;
padding: 20px 40px;
position: absolute;
}

.main_logo {
z-index:11;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:50%;
height:auto;
}

.main_img {
z-index:10;
opacity: 0;
width: 100%;
height: 680px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
-webkit-animation: anime 25s 0s infinite;
animation: anime 25s 0s infinite; }

.main_img:nth-of-type(2) { -webkit-animation-delay: 5s; animation-delay: 5s; } .main_img:nth-of-type(3) { -webkit-animation-delay: 10s; animation-delay: 10s; } .main_img:nth-of-type(4) { -webkit-animation-delay: 15s; animation-delay: 15s; } .main_img:nth-of-type(5) { -webkit-animation-delay: 20s; animation-delay: 20s; }

@keyframes anime {
0% {
opacity: 0;
}
8% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
transform: scale(1.2);
z-index:9;
}
100% { opacity: 0 }
}

@-webkit-keyframes anime {
0% {
opacity: 0;
}
8% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
-webkit-transform: scale(1.2);
z-index:9;
}
100% { opacity: 0 }
}

nav ul {
display: flex;
justify-content: flex-end;
}
nav li {
margin-left: 30px;
}
nav li a {
color: #fff;
font-weight: bold;
transition: all 0.3s ease;
filter: drop-shadow(1px 1px 2px #121212);
}
nav li a:hover {
color: #e03131;
}

ソースコード

### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問