制作したRWDサイトのギャラリー部分に動きをつけます。
今回はサムネイルが並んでいるギャラリー部分にjQueryプラグインの「masonry」を導入します。
「masonry」を導入する事で、タブレット・スマホ時のCSSの記述も変更が必要になります。
また、必要なjQueryをHTMLファイルのhead内に記述しましょう。
<script> $(function(){ $('#wrap').masonry({ //親要素のクラスを指定 itemSelector: '.box', //整理される要素のclassを指定 columnWidth: 194, //一列の幅サイズを指定 isAnimated: true, //スムースアニメーション設定 isFitWidth: true, //親要素の幅サイズがピッタリ gutterWidth: 0, //整理される要素間の溝の幅を指定 containerStyle: { position: 'relative' }, //親要素にスタイルを追加できる isResizable: true //ウィンドウサイズが変更された時に並び替え }); }); </script>
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>RWDサイト|応用編</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="css/style3.css"> <link rel="stylesheet" href="css/wideslider.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/wideslider.js"></script> <script src="js/masonry.pkgd.js"></script> <script> $(function(){ $('#wrap').masonry({ //親要素のクラスを指定 itemSelector: '.box', //整理される要素のclassを指定 columnWidth: 194, //一列の幅サイズを指定 isAnimated: true, //スムースアニメーション設定 isFitWidth: true, //親要素の幅サイズがピッタリ gutterWidth: 0, //整理される要素間の溝の幅を指定 containerStyle: { position: 'relative' }, //親要素にスタイルを追加できる isResizable: true //ウィンドウサイズが変更された時に並び替え }); }); </script> </head> <body> <header> <div class="inner"> <h1><img src="img/logo.svg" alt=""></h1> <nav class="pc-nav"> <ul> <li class="nav1"><a href="#">商品情報</a></li> <li class="nav2"><a href="#">キャンペーン</a></li> <li class="nav3"><a href="#">エンタメ</a></li> <li class="nav4"><a href="#">CSV活動</a></li> <li class="nav5"><a href="#">企業情報</a></li> <li class="nav6"><a href="#">お客様相談室</a></li> </ul> </nav><!--/pc-nav--> </div><!--/.inner--> </header> <div class="wideslider"> <ul> <li><a href="#"><img src="img/slide01.png" alt="#"></a></li> <li><a href="#"><img src="img/slide02.png" alt="#"></a></li> <li><a href="#"><img src="img/slide03.png" alt="#"></a></li> </ul> </div><!--/wideslider--> <nav class="sp-nav"> <ul> <li class="nav1"><a href="#">商品情報</a></li> <li class="nav2"><a href="#">キャンペーン</a></li> <li class="nav3"><a href="#">エンタメレシピ</a></li> <li class="nav4"><a href="#">CSV活動</a></li> <li class="nav5"><a href="#">企業情報</a></li> <li class="nav6"><a href="#">お客様相談室</a></li> </ul> </nav> <div id="content"> <div class="inner"> <ul id="wrap"> <li id="photo1" class="size-2x2 box"><a href="#"><img src="img/01.png"></a></li> <li id="photo1-2" class="size-2x1 box"><a href="#"><img src="img/01-2.png"></a></li> <li id="photo2" class="size-2x1 box"><a href="#"><img src="img/02.png"></a></li> <li id="photo3" class="size-1x1 box"><a href="#"><img src="img/03.png"></a></li> <li id="photo4" class="size-1x1 box"><a href="#"><img src="img/04.png"></a></li> <li id="photo5" class="size-2x1 box"><a href="#"><img src="img/05.png"></a></li> <li id="photo6" class="size-1x1 box"><a href="#"><img src="img/06.png"></a></li> <li id="photo7" class="size-1x1 box"><a href="#"><img src="img/07.png"></a></li> <li id="photo8" class="size-2x1 box"><a href="#"><img src="img/08.png"></a></li> <li id="photo9" class="size-1x1 box"><a href="#"><img src="img/09.png"></a></li> <li id="photo10" class="size-1x1 box"><a href="#"><img src="img/10.png"></a></li> </ul> </div> </div> <footer> <div class="inner"> <ul> <li><a href="#">商品情報</a></li> <li><a href="#">○○○○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> <ul> <li><a href="#">キャンペーン</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○</a></li> </ul> <ul> <li><a href="#">エンタメ・レシピ</a></li> <li><a href="#">○○○○</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○○</a></li> <li><a href="#">○○○○○○</a></li> <li><a href="#">○○○○○</a></li> <li><a href="#">○○○○</a></li> </ul> <ul> <li><a href="#">CSV活動</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○○</a></li> <li><a href="#">○○○○○○</a></li> <li><a href="#">○○○○○○</a></li> </ul> <ul> <li><a href="#">企業情報</a></li> <li><a href="#">○○○○○○○○</a></li> <li><a href="#">○○○○○○○○</a></li> <li><a href="#">○○○○</a></li> <li><a href="#">○○○○</a></li> </ul> <ul> <li><a href="#">お客様相談室</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○○○○</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○○○○</a></li> </ul> </div> </footer> </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; } ul, ol { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ color: #222; } img { border: 0; } img, input { vertical-align: bottom; } /*レイアウト*/ header { border-bottom: 1px solid #CCC; } .inner { width: 980px; margin: 0 auto; } h1 { margin: 10px 0; } .pc-nav { height: 46px; overflow: hidden; background: #FFF; } .pc-nav li { float: left; height: 30px; width: 16.66%; border-right: 1px solid #999; box-sizing: border-box; } .pc-nav li:first-child { border-left: 1px solid #999; box-sizing: border-box; } .pc-nav li a { display: block; line-height: 30px; white-space: nowrap; text-indent: 100%; overflow: hidden; } .pc-nav li.nav1 a { background: url(../img/gnav_on.png) no-repeat center -5px; } .pc-nav li.nav2 a { background: url(../img/gnav_on.png) no-repeat center -48px; } .pc-nav li.nav3 a { background: url(../img/gnav_on.png) no-repeat center -91px; } .pc-nav li.nav4 a { background: url(../img/gnav_on.png) no-repeat center -134px; } .pc-nav li.nav5 a { background: url(../img/gnav_on.png) no-repeat center -177px; } .pc-nav li.nav6 a { background: url(../img/gnav_on.png) no-repeat center -220px; } .pc-nav li a:hover { line-height: 42px; } .pc-nav li.nav1 a:hover { border-bottom:solid 3px #E96562; } .pc-nav li.nav2 a:hover { border-bottom:solid 3px #14AEB0; } .pc-nav li.nav3 a:hover { border-bottom:solid 3px #FF8F01; } .pc-nav li.nav4 a:hover { border-bottom:solid 3px #E3578A; } .pc-nav li.nav5 a:hover { border-bottom:solid 3px #438FC9; } .pc-nav li.nav6 a:hover { border-bottom:solid 3px #7BA600; } .sp-nav { display: none; } #content { background: #222; width: 100%; } #content ul { width: 970px; background: #FFF; overflow: hidden; padding: 5px; margin: 0 auto; } #content li { float: left; margin: 5px; position: relative; /*ホバー用*/ overflow: hidden; /*ホバー用*/ } li#photo1-2 { display: none; } li#photo10 { display: none; } footer { width:100%; background: #CCC; padding: 30px 0; overflow:hidden; } footer ul{ font-size:12px; float: left; width: 16.66%; } footer ul li:first-child{ font-size: 14px; font-weight:bold; line-height: 2.4; } footer ul li { line-height: 2; } footer ul li:hover{ text-decoration:underline; } /*タブレット用記述*/ @media screen and (max-width:979px){ .pc-nav { width: 99%; } .pc-nav li.nav1 a { background: url(../img/gnav_641_on.png) no-repeat center -10px; } .pc-nav li.nav2 a { background: url(../img/gnav_641_on.png) no-repeat center -63px; } .pc-nav li.nav3 a { background: url(../img/gnav_641_on.png) no-repeat center -116px; } .pc-nav li.nav4 a { background: url(../img/gnav_641_on.png) no-repeat center -169px; } .pc-nav li.nav5 a { background: url(../img/gnav_641_on.png) no-repeat center -222px; } .pc-nav li.nav6 a { background: url(../img/gnav_641_on.png) no-repeat center -275px; } .inner { width: 100%; } footer { width: 98.88%;/* 970÷980*/ padding:0.56%; margin: 0 auto; } footer ul{ font-size:10px; float: left; width: 16.66%; } footer ul li:first-child{ font-size: 12px; font-weight:bold; line-height: 2; } } /*スマートフォンサイト*/ @media screen and (max-width:767px){ h1 { width: 40%; } .pc-nav { display: none; } .sp-nav { display: block; overflow: hidden; } .sp-nav li{ text-align:center; float:left; width:50%; margin:0; background-color:#fff; border-bottom:solid 1px #ddd; box-sizing:border-box; } .sp-nav li a{ display: block; width: 100%; font-size: 14px; padding: 14px 0; } .sp-nav li:nth-of-type(odd) { border-right:solid 1px #ddd; } .sp-nav li a:hover { color: #FFF; } .sp-nav li.nav1 a:hover { background:#E96562; } .sp-nav li.nav2 a:hover { background:#14AEB0; } .sp-nav li.nav3 a:hover { background:#FF8F01; } .sp-nav li.nav4 a:hover { background:#E3578A; } .sp-nav li.nav5 a:hover { background:#438FC9; } .sp-nav li.nav6 a:hover { background:#7BA600; } li#photo1{ display: none; } li#photo1-2 { display: block; } li#photo10 { display: block; } footer { width: 100%; padding:0; } footer ul{ float: none; width: 100%; } footer ul li:first-child{ font-size: 14px; line-height: 2; border-bottom: 1px solid #999; text-decoration: none; } footer ul li:first-child a { background: url(../img/next.jpg) no-repeat right center; background-size: 6%; width: 96%; margin: 0 auto; display: block; padding: 10px 0; } footer ul li:first-child:hover { background: #EEE; } footer ul li:not(:first-child){ display:none; } }