今まで学んだことをいかして、下のようなサイトを作成してみよう。
以下の仕様を満たすこと。
◯重なっているコビトカバの写真をクリックすると最前面に表示される。
◯表の偶数行に色をつける。
◯jQueryは不可
なお、コビトカバの画像は下からダウンロードできる。
[作例]
●imagesフォルダに3枚の画像を配置する。
●ルートの直下にindex.htmlを以下のように作成する。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <link rel="stylesheet" href="css/main.css"> <title>コビトカバ</title> </head> <body> <div id="container"> <header> <h1>コビトカバ Love</h1> <div id="headerImageBox"> <img id="kaba1" class="headerImage" src="images/kaba1.jpg"> <img id="kaba2" class="headerImage" src="images/kaba2.jpg"> <img id="kaba3" class="headerImage" src="images/kaba3.jpg"> </div> </header> <main> <h2>飼育中のコビトカバ一覧</h2> <table> <thead> <tr><th>名前</th><th>性別</th><th>体重</th></tr> </thead> <tbody> <tr><td>やすお</td><td>オス</td><td>200kg</td></tr> <tr><td>はな</td><td>メス</td><td>240kg</td></tr> <tr><td>だいち</td><td>オス</td><td>190kg</td></tr> <tr><td>のぞみ</td><td>メス</td><td>220kg</td></tr> <tr><td>やま</td><td>オス</td><td>230kg</td></tr> </tbody> </table> </main> <footer> ©kobitokaba.net </footer> </div> <script src="js/main.js"></script> </body> </html>
●cssフォルダを作成しその中にmain.cssを以下のように作成する。
h1,h2{
width:400px;
background-color:pink;
text-align:center;
border-radius:20px;
color:white;
margin:30px auto 10px;
}
#headerImageBox{
position:relative;
height:600px;
}
#headerImageBox img{
position:absolute;
display: block;
width:500px;
height:auto;
}
#kaba1{
top:170px;
left:0;
}
#kaba2{
top:120px;
right:0;
}
#kaba3{
top:20px;
left: 50%;
transform: translateX(-50%);
}
table{
width:500px;
margin:0 auto;
border-collapse: collapse;
}
table *{
border:1px solid #ddd;text-align: center;
}
table thead tr{
background-color: #86ddde;
}
table tbody tr:nth-child(even){
background-color: #d0dedd;
}
footer{
margin-top:50px;
height:40px;
background-color:pink;
text-align:center;
line-height:40px;
color:white;
}
●jsフォルダを作成しmain.jsを以下のように作成する。
'use strict';
window.onload=function(){
var images=document.getElementsByClassName("headerImage");
var zIndexMax=0;
for(var i=0;i<images.length;i++){
images[i].addEventListener("click",function(){
this.style.zIndex=++zIndexMax;
});
}
}
コメント