４月１５日 授業内容（frameworks,mixitup）
ポートフォリオなどに使えるframework.js
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>frame_works</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-2.2.1.min.js"></script> <script src="js/framework.js"></script> </head> <body> <div id="container"> <h1>ポートフォリオなどに使えるframework.js</h1> <nav> <ul id="filter"> <li class="current"><a href="#" class="all">全部</a></li> <li><a href="#" class="ja">和食</a></li> <li><a href="#" class="fr">フレンチ</a></li> <li><a href="#" class="vt">ベトナム料理</a></li> <li><a href="#" class="me">肉</a></li> <li><a href="#" class="vm">肉・野菜</a></li> <li><a href="#" class="vg">野菜</a></li> </ul> </nav> <ul id="portfolio"> <li class="ja me"><img src="img/w1.png" alt="#"></li> <li class="ja vm"><img src="img/w2 .png" alt="#"></li> <li class="ja vg"><img src="img/w3.png" alt="#"></li> <li class="fr me"><img src="img/f1.png" alt="#"></li> <li class="fr vm"><img src="img/f2.png" alt="#"></li> <li class="fr vg"><img src="img/f3.png" alt="#"></li> <li class="vt me"><img src="img/v1.png" alt="#"></li> <li class="vt vm"><img src="img/v2.png" alt="#"></li> <li class="vt vg"><img src="img/v3.png" alt="#"></li> </ul> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,h2,h3,p,ul,li{font-family:"Hiragino Kaku Gothic proN", Meiryo, sans-serif; padding:0; margin:0;} a{text-decoration:none;} ul,li{list-style:none;} img{vertical-align:bottom;} /*body*/ body{overflow-y:scroll;/*文字が多くてレイアウトがずれてしまうのを防止する為に元からスクロールバーを表示させる*/ font: 14px/1.3 sans-serif; /*font指定のショートハンド*/} #container{width:960px; margin:20px auto;} #filter{ overflow:hidden; width:840px; margin:0 auto;} #filter li a{float:left; width:100px; margin:10px; text-align:center; background:orange; color:white; display:block; } #filter li a:hover{background:white; color:orange;} #portfolio{width:960px; margin:0 auto; overflow:hidden;} #portfolio li{float:left; margin:10px;}
$(document).ready(function() {
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).attr("class").toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#portfolio li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});。。。。。。。。。。。。。。。。。。。。。
filtering・・・情報量が多く時にグループ分けと並べ替え機能などが必要な時に使う
上のサイトからzipファイルをダウンロードする。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-2.2.1.min.js"></script> <script src="js/jquery.mixitup.js"></script> <script> // On document ready: $(function(){ // Instantiate MixItUp: $('#Container').mixItUp(); }); </script> <title>mixitup</title> </head> <body> <div class="controls"> <label>カテゴリー：</label> <button class="filter" data-filter="all">全部</button> <button class="filter" data-filter=".ja">和食</button><!--all以外のdata-filterは.を必ずつけること--> <button class="filter" data-filter=".fr">フレンチ</button> <button class="filter" data-filter=".vt">ベトナム料理</button> <button class="filter" data-filter=".me">肉</button> <button class="filter" data-filter=".vm">肉・野菜</button> <button class="filter" data-filter=".vg">野菜</button> </div><!--.cotrols--> <div id="Container" class="container"><!--idのcontainerは必ず大文字のC--> <div class="mix ja me"> <a href="#"><img src="../frame_works/img/w1.png" alt="#"></a> </div> <div class="mix ja vm"> <a href="#"><img src="../frame_works/img/w2 .png" alt="#"></a> </div> <div class="mix ja vg"> <a href="#"><img src="../frame_works/img/w3.png" alt="#"></a> </div> <div class="mix fr me"> <a href="#"><img src="../frame_works/img/f1.png" alt="#"></a> </div> <div class="mix fr vm"> <a href="#"><img src="../frame_works/img/f2.png" alt="#"></a> </div> <div class="mix fr vg"> <a href="#"><img src="../frame_works/img/f3.png" alt="#"></a> </div> <div class="mix vt me"> <a href="#"><img src="../frame_works/img/v1.png" alt="#"></a> </div> <div class="mix vt vm"> <a href="#"><img src="../frame_works/img/v2.png" alt="#"></a> </div> <div class="mix vt vg"> <a href="#"><img src="../frame_works/img/v3.png" alt="#"></a> </div> <div class="gap"></div><!--これを入れないと画像が画像が等間隔で広がってしまう。--> <div class="gap"></div> </div><!--#container .container--> </body> </html>
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; box-sizing: border-box; } table { border-collapse: collapse; border-spacing: 0; } ul, ol { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: 0; vertical-align: bottom; } /*body { overflow-y: scroll; }*/ .controls{ padding: 2%; background: #333; color: #eee; } label{ font-weight: 300; margin: 0 .4em 0 0; } button{ display: inline-block; padding: .4em .8em; background: #666; border: 0; color: #ddd; font-size: 16px; font-weight: 300; border-radius: 4px; cursor: pointer; } button.active{ background: #68b8c4; } button:focus{ outline: 0 none; } button + label{ margin-left: 1em; } .container{ padding: 2% 2% 0; text-align: justify; font-size: 0.1px; background: #68b8c4; -webkit-backface-visibility: hidden; } .container:after{ content: ''; display: inline-block; width: 100%; } .container .mix, .container .gap{ display: inline-block; width: 49%; } .container .mix{ margin-bottom: 2%; display: none; } .container .mix:after{ /* content: attr(data-myorder);*/ color: white; font-size: 16px; display: inline-block; vertical-align: top; /*padding: 4% 0 6% 0;*/ font-weight: 700; } .container .mix:before{ content: ''; display: inline-block; padding-top: 0; } img { max-width: 100%; } @media all and (min-width: 420px){ .container .mix, .container .gap{ width: 32%; } } @media all and (min-width: 640px){ .container .mix, .container .gap{ width: 24%; } }
