Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
あと、CSSとJavaScriptだけでは再現確認できないかと思います。
他者がコピペで動作確認できるようご配慮願います。
{
const open = document.getElementById('open');
const overlay = document.querySelector('.overlay');
const close = document.getElementById('close')
open.addEventListener('click' , () =>{
overlay.classList.add('show');
open.classList.add('hide');
});
close.addEventListener('click', () =>{
overlay.classList.remove('show');
open.classList.remove('hide');
});
const next = document.getElementById('next');
const ul = document.querySelector('ul');
next.addEventListener('click', () => {
ul.style.transform = 'translateX(-200px)';
});
}
CSS
body{
margin:0;
font-family: Verdana,sans-serif;
}
header{
display: flex;
padding: 0 16px;
}
header h1{
margin:0;
font-size: 22px;
line-height: 64px;
}
.sp-menu{
margin-left: auto;
}
.sp-menu #open{
font-size: 32px;
line-height: 64px;
cursor: pointer;
}
.sp-menu #open.hide{
display: none;
}
.overlay{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(255, 255, 255, 0.95);
text-align: center;
padding:64px;
opacity: 0;
pointer-events: none;
transition: opacity .6s;
}
.overlay.show{
opacity: 1;
pointer-events: auto;
}
.overlay #close{
position: absolute;
top: 16px;
right: 16px;
font-size: 32px;
cursor: pointer;
}
.overlay ul{
list-style-type: none;
margin:0;
padding:0;
}
.overlay li{
margin-top: 24px;
opacity: 0;
transform: translateY(16px);
}
.overlay.show li{
opacity: 1;
transform: none;
}
.overlay.show li:nth-child(1){
transition-delay: .1s;
}
.overlay.show li:nth-child(2){
transition-delay: .2s;
}
.overlay.show li:nth-child(3){
transition-delay: .3s;
}
.container{
width:95%;
height:440px;
margin:16px auto;
overflow: hidden;
position: relative;
}
ul{
list-style-type: none;
margin: 0;
padding:0;
height:100%;
display:flex;
transition: transform .3s;
}
li{
height:100%;
min-width: 100%;
}
li img{
width:100%;
height:100%;
object-fit:cover;
}
#prev,
#next{
position: absolute;
top: 45%;
border: none;
background: rgba(0, 0, 0, .8);
color: #fff;
font-size: 35px;
padding:0 8px 4px;
cursor: pointer;
}
#prev:hover,
#next:hover{
opacity: .8;
}
#prev{
left: 0;
}
#next{
right: 0;
}
HTML
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="stylesheet.css"> <link rel="shortcut icon" href="image/watermark.jpeg"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <title>洗足池運輸株式会社</title> </head> <body> <header> <div class="logo"> <h1>洗足池運輸 株式会社</h1> </div> <div class="sp-menu"> <span class="material-icons" id="open">menu</span> </div> </header> <div class="overlay"> <span class="material-icons" id="close">close</span> <nav> <ul> <li><a href="#">about</a></li> <li><a href="#">consept</a></li> </ul> </nav> </div> <div class="container"> <ul> <li><img src="image/main_img01.jpg" alt=""></li> <li><img src="image/main_img02.jpg" alt=""></li> <li><img src="image/main_img.jpg" alt=""></li> </ul><script src="main.js"></script> </body> </html><button id="prev">«</button> <button id="next">»</button> </div>
こちらのコード使って背景を透過するメニューバーとボタンを押すと画像が移動するを作りたいのですがheaderは消えるのですが画像が消えませんあと写真も移動しません誰か教えてくださいお願いします
markdownを使ってソースコードを書いてください。
https://teratail.com/help/question-tips#:~:text=teratail%E3%81%A6%E3%82%99%E3%81%AF%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%88%E3%82%99%E3%82%92%E3%82%B7%E3%83%B3%E3%82%BF%E3%83%83%E3%82%AF%E3%82%B9%E3%83%8F%E3%82%A4%E3%83%A9%E3%82%A4%E3%83%88%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8B%E3%82%99%E3%81%A6%E3%82%99%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82
https://teratail-v2.storage.googleapis.com/assets/img/tour/01.webm?1594714893253494
https://teratail.com/questions/238564
あなたの回答
tips
プレビュー
