- button を作る。<p><button class="redbtn"><a href="#"> red </a></button></p>
- button の見映えを変更する。border-radius
- imgをfloatでレイアウトする。margin の値をうまくとって余白が均等になるようにする。
- jQueryでは、どのようにセレクターを使うかで悩んだ。取っ掛かりでは、属性セレクタを使うことにした。ところが…
- <li class="red skirt">のように、ある属性に対して2つの値を指定すると、属性セレクタがうまく効かない。
- たとえば今回、上のようにクラスを設定すると、$(li [class != 'red'])としても、うまく「赤」以外を選択できない。
- あきらめて、擬似クラス :not を使ってセレクトすることにした。
- $('li:not(.red)'):hide; このとき、クラス名は '.red'ではなく、.redにすること。これでてこずった。
html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q10</title>
<link rel="stylesheet" href="style.css">
<script src="js/jquery-2.2.3.min.js"></script>
<script>
$(function(){
$('.allbtn').on('click', function(){
$("#card li").show();}),
$('.redbtn').on('click', function(){
$("li:not(.red)").hide();});
$('.graybtn').on('click', function(){
$("li:not(.gray)").hide();});
$('.yellowbtn').on('click', function(){
$("li:not(.yellow)").hide();});
$('.bluebtn').on('click', function(){
$("li:not(.blue)").hide();});
$('.shirtbtn').on('click', function(){
$("li:not(.shirt)").hide();});
$('.blazerbtn').on('click', function(){
$("li:not(.blazer)").hide();});
$('.trouserbtn').on('click', function(){
$("li:not(.trouser)").hide();});
$('.skirtbtn').on('click', function(){
$("li:not(.skirt)").hide();});
});
</script>
</head><body>
<div id="container">
<h1>Filtering</h1>
<div id="button">
<p><button class="allbtn"><a href="#">all</a></button></p>
<p><button class="shirtbtn"><a href="#">shirt</a></button></p>
<p><button class="blazerbtn"><a href="#">blazer</a></button></p>
<p><button class="trouserbtn"><a href="#">trouser</a></button></p>
<p><button class="skirtbtn"><a href="#">skirt</a></button></p>
<p><button class="redbtn"><a href="#">red</a></button></p>
<p><button class="graybtn"><a href="#">gray</a></button></p>
<p><button class="yellowbtn"><a href="#">yellow</a></button></p>
<p><button class="bluebtn"><a href="#">blue</a></button></p>
</div><!--button--><div id="card">
<ul>
<li class="red skirt"><img src="img/01red_skirt.jpg" class="card red skirt"></li>
<li class="gray blazer"><img src="img/02gray_blazer.jpg"></li>
<li class="yellow shirt"><img src="img/03yellow_shirts.jpg"></li>
<li class="blue skirt"><img src="img/04blue_skirt.jpg"></li>
<li class="gray trouser"><img src="img/05gray_trouser.jpg"></li>
<li class="red shirt"><img src="img/06red_shirts.jpg"></li>
<li class="blue shirt"><img src="img/07blue_shirts.jpg"></li>
<li class="yellow trouser"><img src="img/08yellow_trouser.jpg"></li>
<li class="red blazer"><img src="img/09red_blazer.jpg"></li>
<li class="gray shirt"><img src="img/10gray_shirts.jpg"></li>
<li class="yellow skirt"><img src="img/11yellow_skirt.jpg"></li>
<li class="blue blazer"><img src="img/12blue_blazer.jpg"></li>
</ul>
</div><!--cards-->
</div><!--container-->
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
html{
font-size: 16px;
}
html, body, ul, li, h1, p, img, button, a{
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
ul, li {
list-style: none;
}
img{
vertical-align: bottom;
}
a{
text-decoration: none;
}
/*reset
-----------------------------------------------------------------------------------------------*/
#container{
width: 960px;
margin: 50px auto;
text-align: center;
}
h1{
margin-bottom: 3rem;
font-size: 60px;
font-family: "Arial Black", Gadget, sans-serif;
}
#button{
display: flex ;
justify-content: space-around;
width: 960px;
margin: 2rem auto;
}
#button button{
width: 80px;
height: 32px;
cursor: pointer;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #777777;
border-radius: 16px;
border-style: none;
box-shadow: 2px 3px 4px -2px #777777;
}
#card{
width: 960px;
margin: 0 auto;
}
#card>ul{
overflow: hidden;
}
#card>ul>li img{
width:150px;
height: 150px;
float: left;
margin: 5px;
}
#card>ul>li:first-child img{
margin-left: none;
}
