前回の授業でfooterを含めて、静的ページでのレスポンシブサイトは完成です。
今回はさらにjQueryを使い動的部分を導入し、ユーザビリティーをさらに高めていく手段を考えて行きましょう。
今回取り入れたいjQueryは
- footer部分をアコーディオンパネルにする(SP時のみ)
- メガメニューの導入（PC時のみ）
さらにCSS３のアニメーションを使ってテキストを表示
静的ページのデータ
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>
