WEBサイト制作の勉強

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

制作したレスポンシブサイトをカスタマイズ

制作したレスポンシブサイトにスライドする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>