WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

制作したレスポンシブサイトに動きをつける

制作したRWDサイトのギャラリー部分に動きをつけます。
今回はサムネイルが並んでいるギャラリー部分にjQueryプラグインの「masonry」を導入します。

masonry.desandro.com


「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;
}
}