制作したレスポンシブサイトにスライドするjQueryを追加する
index.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="css/common.css" rel="stylesheet"> <link href="css/style-l.css" rel="stylesheet" media="only screen and (min-width:960px)"> <link href="css/style-m.css" rel="stylesheet" media="only screen and (min-width:641px) and (max-width:959px)"> <link href="css/style-s.css" rel="stylesheet" media="only screen and (max-width:640px)"> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <title>レスポンシブ対応サイト制作自習</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="js/jquery.bxslider.js"></script> <script> $(document).ready(function(){ $('.bxslider').bxSlider(); }); </script> </head> <body> <div id="header"> <div class="inner"> <h1>レスポンシブ対応サイト制作</h1> <ul class="navi"> <li class="item-info"><a href="#">商品情報</a></li> <li class="campaign"><a href="#">キャンペーン</a></li> <li class="recipe"><a href="#">エンタメレシピ</a></li> <li class="csv"><a href="#">CSV活動</a></li> <li class="company-info"><a href="#">企業情報</a></li> <li class="custmor"><a href="#">お客様相談室</a></li> </ul> </div> </div> <div id="first-impression"> <div class="inner"> <ul class="bxslider"> <li class="top-imagies"><a href="#"><img src="img/header01.png" alt="#"></a></li> <li class="top-imagies"><a href="#"><img src="img/header02.png" alt="#"></a></li> <li class="top-imagies"><a href="#"><img src="img/header03.png" alt="#"></a></li> </ul> </div> </div> <!--/first-impression--> <div id="smartphone-header"> <div class="inner"> <ul class="navi"> <li class="item-info"><a href="#">商品情報</a></li> <li class="campaign"><a href="#">キャンペーン</a></li> <li class="recipe"><a href="#">エンタメレシピ</a></li> <li class="csv"><a href="#">CSV活動</a></li> <li class="company-info"><a href="#">企業情報</a></li> <li class="custmor"><a href="#">お客様相談室</a></li> </ul> </div> </div> <!--/smartphone-header--> <div id="container"> <div class="inner"> <ul class="contents-list"> <li id="contents01" class="contents-size-2x2"><a href="#"><img src="img/01-l.png" alt="#"></a></li> <li id="contents02" class="contents-size-2x1"><a href="#"><img src="img/02-m.png" alt="#"></a></li> <li id="contents03" class="contents-size-1x1"><a href="#"><img src="img/03-s.png" alt="#"></a></li> <li id="contents04" class="contents-size-1x1"><a href="#"><img src="img/04-s.png" alt="#"></a></li> <li id="contents05" class="contents-size-2x1"><a href="#"><img src="img/05-m.png" alt="#"></a></li> <li id="contents06" class="contents-size-1x1"><a href="#"><img src="img/06-s.png" alt="#"></a></li> <li id="contents07" class="contents-size-1x1"><a href="#"><img src="img/07-s.png" alt="#"></a></li> <li id="contents08" class="contents-size-1x1"><a href="#"><img src="img/08-s.png" alt="#"></a></li> <li id="contents09" class="contents-size-1x1"><a href="#"><img src="img/09-s.png" alt="#"></a></li> <li id="contents10" class="contents-size-1x1"><a href="#"><img src="img/10-s.png" alt="#"></a></li> </ul> </div> </div> <!--/container--> <div id="footer"> <div class="inner"> <ul> <li><a href="#"><em>商品情報</em></a></li> <li><a href="#">○○○○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> <ul> <li><a href="#"><em>キャンペーン</em></a></li> <li><a href="#">○○○○○○○○○○○○○</a></li> </ul> <ul> <li><a href="#"><em>エンタメ・レシピ</em></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> <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="#"><em>CSV活動</em></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> <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="#"><em>企業情報</em></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> <li><a href="#">○○○○</a></li> <li><a href="#">○○○○</a></li> <li><a href="#">○○○○○○○○</a></li> </ul> <ul> <li><a href="#"><em>お客様相談室</em></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> <li><a href="#">○○○○</a></li> </ul> </div> </div> </body> </html>
