読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

制作したレスポンシブサイトにjQueryを入れる

前回の授業でfooterを含めて、静的ページでのレスポンシブサイトは完成です。
今回はさらにjQueryを使い動的部分を導入し、ユーザビリティーをさらに高めていく手段を考えて行きましょう。

yachin29.hatenablog.com

今回取り入れたいjQuery

  • footer部分をアコーディオンパネルにする(SP時のみ)
  • メガメニューの導入(PC時のみ)

さらにCSS3のアニメーションを使ってテキストを表示


静的ページのデータ
index.html

<!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/style.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>
</head>
<body>
<header>
<div class="inner">
<h1><img src="img/logo.svg" alt=""></h1>
<nav class="pc-nav">
<ul class="megaMenu">
<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">
<ul id="grid">
<li class="size-2x2 pc-img"><a href="#"><img src="img/01.png"></a></li>
<li class="size-2x1 sp-img"><a href="#"><img src="img/01-2.png"></a></li>
<li class="size-2x1"><a href="#"><img src="img/02.png"></a></li>
<li class="size-1x1"><a href="#"><img src="img/03.png"></a></li>
<li class="size-1x1"><a href="#"><img src="img/04.png"></a></li>
<li class="size-2x1"><a href="#"><img src="img/05.png"></a></li>
<li class="size-1x1"><a href="#"><img src="img/06.png"></a></li>
<li class="size-1x1"><a href="#"><img src="img/07.png"></a></li>
<li class="size-1x1"><a href="#"><img src="img/08.png"></a></li>
<li class="size-1x1"><a href="#"><img src="img/09.png"></a></li>
<li class="size-1x1"><a href="#"><img src="img/10.png"></a></li>
<li class="size-1x1 sp-img"><a href="#"><img src="img/11.png"></a></li>
</ul>
</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 {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
  color: #222;
}
img {
  border: none;
}
img, input {
  vertical-align: bottom;
}

/*レイアウト*/

header {
  border-bottom: 1px solid #CCC;
}
.inner {
  width: 960px;
  margin: 0 auto;
}
h1 {
	margin: 10px 0;
}
.pc-nav {
  width:960px;
  margin:30px auto 0;
  height: 50px;
  overflow: hidden;
  background: #FFF;
}
.pc-nav li {
  position: relative;
  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/nav-bg.png) no-repeat center top;
}
.pc-nav li.nav2 a {
  background: url(../img/nav-bg.png) no-repeat center -50px;
}
.pc-nav li.nav3 a {
  background: url(../img/nav-bg.png) no-repeat center -100px;
}
.pc-nav li.nav4 a {
  background: url(../img/nav-bg.png) no-repeat center -150px;
}
.pc-nav li.nav5 a {
  background: url(../img/nav-bg.png) no-repeat center -200px;
}
.pc-nav li.nav6 a {
  background: url(../img/nav-bg.png) no-repeat center -250px;
}
.pc-nav li a:hover {
  line-height: 47px;
}
.pc-nav li.nav1 a:hover {
  border-bottom:solid 3px #f53737;
}
.pc-nav li.nav2 a:hover {
  border-bottom:solid 3px #d8f537;
}
.pc-nav li.nav3 a:hover {
  border-bottom:solid 3px #3bf537;
}
.pc-nav li.nav4 a:hover {
  border-bottom:solid 3px #37e5f5;
}
.pc-nav li.nav5 a:hover {
  border-bottom:solid 3px #f537e1;
}
.pc-nav li.nav6 a:hover {
  border-bottom:solid 3px #f53768;
}
.sp-nav {
  display: none;
}

#content {
  background:#000000;
}
ul#grid {
  width: 940px;
  margin: 0 auto;
  overflow: hidden;
  padding: 10px;
  background:#FFFFFF;
}
#grid li {
  float: left;
  margin: 10px;
}
li.sp-img{
  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:959px){

img {
  max-width: 100%; /*フルードイメージ*/
}
.pc-nav {
  width:98%;
  padding:0 1%;
}
.pc-nav li.nav1 a {
  background: url(../img/nav-bg-768.png) no-repeat center top;
}
.pc-nav li.nav2 a {
  background: url(../img/nav-bg-768.png) no-repeat center -50px;
}
.pc-nav li.nav3 a {
  background: url(../img/nav-bg-768.png) no-repeat center -100px;
}
.pc-nav li.nav4 a {
  background: url(../img/nav-bg-768.png) no-repeat center -150px;
}
.pc-nav li.nav5 a {
  background: url(../img/nav-bg-768.png) no-repeat center -200px;
}
.pc-nav li.nav6 a {
  background: url(../img/nav-bg-768.png) no-repeat center -250px;
}
.inner {
  width: 100%;
}

/*ギャラリー部分*/

ul#grid {
  width: 98%;
  padding: 1%;
}
#grid li {
  margin:1.06%;
}
.size-1x1 {width:17.87%;} /*168÷940*/
.size-2x1 {width:37.87%;}
.size-2x2 {width:37.6%;} /*356÷940*/


footer {
  width: 98.88%;/* 970÷980*/
  padding:0.56%; /*footer内に5px相当のpaddingを取っている*/

}
footer ul{
  font-size:10px;
}
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;
  width:100%;
}
.sp-nav ul {
  overflow:hidden;
}
.sp-nav li {
  width: 50%;
  float:left;
  height:40px;
  padding: 14px 0 12px 0;
  border-bottom: 1px solid #999999;
  box-sizing: border-box;
}
.sp-nav li:nth-child(odd) {
  border-right: 1px solid #999999;
}
.sp-nav li a {
  display:block;
  font-size: 14px;
  padding-left: 10px;
  margin-left: 10px;
}
.sp-nav li a:hover {
  text-decoration: underline;
}
.sp-nav li.nav1 a {
  border-left:solid 3px #f53737;
}
.sp-nav li.nav2 a {
  border-left:solid 3px #d8f537;
}
.sp-nav li.nav3 a {
  border-left:solid 3px #3bf537;
}
.sp-nav li.nav4 a {
  border-left:solid 3px #37e5f5;
}
.sp-nav li.nav5 a {
  border-left:solid 3px #f537e1;
}
.sp-nav li.nav6 a {
  border-left:solid 3px #f53768;
}
#content li {
  float: left;
  margin:0;
  width:100%;
  padding: 2px;
  box-sizing: border-box;
}
#content li img {
  width: 100%;
}
li.size-1x1 {max-width:50%; height: auto;} 
li.size-2x1 {max-width:100%; height: auto;}
li.size-2x2 {max-width:100%; height: auto;}
li#photo4{
  width: 50%;
}
li.pc-img{
  display: none;
}
li.sp-img {
  display: block;
}


/*footer部分のレイアウト*/
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/li-btn.png) no-repeat right center;
  background-size: 5%;
  width: 96%;
  margin: 0 auto;
  display: block;
  padding: 10px 0;
}
footer ul li:first-child:hover {
  background: #EEE;
}
footer ul li:not(:first-child){
  background:#FFF;
  height: 30px;
  display:none;
}
}


アコーディオンパネルの入れる際に、注意が必要なのが、PCの際にはアコーディオンの動きは必要な無く、SPの時にのみに動かしたいので、「.width」を使い条件分岐させる必要があります。(.widthはファイルを読み込むタイミングでwidthの値を取得します。)

<script>
$(function(){
	var w = $(window).width(); //ブラウザの幅を取得
	var x = 767;//ブレイクポイントを設定

		  if(w <= x){ //ブレイクポイントでアコーディオンが動くようにする条件分岐
        $('footer li:first-child').on("click", function() {
					$('footer li:not(li:first-child)').slideUp();
            $(this).siblings().slideDown();
							return false;
        });
				};
    });
</script>