WEBサイト制作の勉強

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

レスポンシブデザインサイト

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no">
<title>キリン風レスポンシブ対応サイト</title>
<link rel="apple-touch-icon" href="touch-icon.png">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/style-l.css" media="only screen and (min-width:960px)">
<link rel="stylesheet" href="css/style-m.css" 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/wideslider.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/wideslider.js"></script>
</head>
<body>
<header id="pc-header">
<h1>レスポンシブ対応サイト制作</h1>
<div class="inner">
<nav id="pc-nav">
<ul>
<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>
</nav>
</div>
</header>

<div id="first-impression">
<div class="wideslider">
<ul>
<li><a href="#1"><img src="img/header01.png" alt="#"></a></li>
<li><a href="#2"><img src="img/header02.png" alt="#"></a></li>
<li><a href="#3"><img src="img/header03.png" alt="#"></a></li>
</ul>
</div>
</div>  <!--/first-impression-->
<header id="smartphone-header">
<div class="inner">
<ul class="nav">
<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>
</header>  <!--/smartphone-header-->
  <div id="content">
  <div class="inner">
    <ul class="contents-list">
      <li id="ph01" class="size-2x2"><a href="#"><img src="img/01-l.png" alt="#"></a></li>
      <li id="ph02" class="size-2x1"><a href="#"><img src="img/02-m.png" alt="#"></a></li>
      <li id="ph03" class="size-1x1"><a href="#"><img src="img/03-s.png" alt="#"></a></li>
      <li id="ph04" class="size-1x1"><a href="#"><img src="img/04-s.png" alt="#"></a></li>
      <li id="ph05" class="size-2x1"><a href="#"><img src="img/05-m.png" alt="#"></a></li>
      <li id="ph06" class="size-1x1"><a href="#"><img src="img/06-s.png" alt="#"></a></li>
      <li id="ph07" class="size-1x1"><a href="#"><img src="img/07-s.png" alt="#"></a></li>
      <li id="ph08" class="size-2x1"><a href="#"><img src="img/08-m.png" alt="#"></a></li>
      <li id="ph09" class="size-1x1"><a href="#"><img src="img/09-s.png" alt="#"></a></li>
    </ul>
    </div>
  </div>

<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>
<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>
</footer>
</body>
</html>
common.css(共有のスタイル)
@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;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}
 article, aside, dialog, figure, footer, header,
 main, menu, nav, section { display: block; }

img {
  max-width: 100%; /*フルードイメージ*/
}

/*共有部分のスタイル*/
footer {
  width:100%;
  background-color: #CCC;
}
footer ul a em{
  font-weight:bold;
}
 
/* ホバーズーム*/
.size-2x2 {
  max-width:357px;
  max-height:357px;
  overflow: hidden;
}
.size-2x2 img {
  transition: transform 0.3s linear;
}
.size-2x2 img:hover {
  transform: scale(1.1);
}

.size-2x1 {
  max-width:357px;
  max-height:170px;
  overflow: hidden;
}
.size-2x1 img {
  transition: transform 0.3s linear;
}
.size-2x1 img:hover {
  transform: scale(1.1);
}

.size-1x1 {
  max-width:170px;
  max-height:170px;
  overflow: hidden;
}
.size-1x1 img {
  transition: transform 0.3s linear;
}
.size-1x1 img:hover {
  transform: scale(1.1);
}
style-l.css
@charset "utf-8";
/* CSS Document */

#smartphone-header { display:none; }

#pc-header h1 {
  font-size: 22px;
  width: 100%;
  background: #000;
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-weight: bold;
  text-align: center;
}
.inner {
  width:960px;
  margin:0 auto;
}
#pc-nav ul {
  overflow:hidden;
  margin: 10px 0;
}
#pc-nav li{
  float:left;
  font-size:13px;
  font-weight:600;
  width:158px;
  height:50px;
  line-height:50px;
  margin:0 1px;
  text-align:center;
  background-color:#F0F0F0;
}
#pc-nav li a {
  display:block;
}
#pc-nav li.item-info a { color:#E96562; }
#pc-nav li.campaign a { color:#14AEB0; }
#pc-nav li.recipe a { color:#FF8F01; }
#pc-nav li.csv a { color:#E3578A; }
#pc-nav li.company-info a { color:#438FC9; }
#pc-nav li.custmor a { color:#7BA600; }
#pc-nav li:hover { box-sizing:border-box; }
#pc-nav li.item-info:hover { border-bottom:solid 3px #E96562; }
#pc-nav li.campaign:hover { border-bottom:solid 3px #14AEB0; }
#pc-nav li.recipe:hover { border-bottom:solid 3px #FF8F01; }
#pc-nav li.csv:hover { border-bottom:solid 3px #E3578A; }
#pc-nav li.company-info:hover { border-bottom:solid 3px #438FC9; }
#pc-nav li.custmor:hover { border-bottom:solid 3px #7BA600; }

/*ギャラリー部分*/
#content {
  background:#333;
}
ul.contents-list {
  overflow: hidden;
  background: #FFF;
  padding: 9px;
}
ul.contents-list li{
  float:left;
  margin:9px;
}

footer {
  overflow:hidden;
}
footer ul{
  font-size:12px;
  width:136px;
  margin:0 7px 0 7px;
  padding-top: 20px;
}
footer ul li:nth-of-type(1) {margin-bottom:1em; }
footer .inner { position:relative; height:12em;}
footer ul { position:absolute; top:0; }
footer ul:nth-of-type(2) { left:16%; }
footer ul:nth-of-type(3) { left:32%; }
footer ul:nth-of-type(4) { left:48%; }
footer ul:nth-of-type(5) { left:64%; }
footer ul:nth-of-type(6) { left:80%; }
footer ul a {color:#333;}
footer ul li:hover{
  text-decoration:underline;
}
style-m.css
@charset "utf-8";
/*ここからstyle-l.cssからのコピー*/
#smartphone-header { display:none; }

#pc-header h1 {
  font-size: 22px;
  width: 100%;
  background: #000;
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-weight: bold;
  text-align: center;
}
.inner {
  width:960px;
  margin:0 auto;
}
#pc-nav ul {
  overflow:hidden;
  margin: 10px 0;
}
#pc-nav li{
  float:left;
  font-size:13px;
  font-weight:600;
  width:158px;
  height:50px;
  line-height:50px;
  margin:0 1px;
  text-align:center;
  background-color:#F0F0F0;
}
#pc-nav li a {
  display:block;
}
#pc-nav li.item-info a { color:#E96562; }
#pc-nav li.campaign a { color:#14AEB0; }
#pc-nav li.recipe a { color:#FF8F01; }
#pc-nav li.csv a { color:#E3578A; }
#pc-nav li.company-info a { color:#438FC9; }
#pc-nav li.custmor a { color:#7BA600; }
#pc-nav li:hover { box-sizing:border-box; }
#pc-nav li.item-info:hover { border-bottom:solid 3px #E96562; }
#pc-nav li.campaign:hover { border-bottom:solid 3px #14AEB0; }
#pc-nav li.recipe:hover { border-bottom:solid 3px #FF8F01; }
#pc-nav li.csv:hover { border-bottom:solid 3px #E3578A; }
#pc-nav li.company-info:hover { border-bottom:solid 3px #438FC9; }
#pc-nav li.custmor:hover { border-bottom:solid 3px #7BA600; }

/*ギャラリー部分*/
#content {
  background:#333;
}
ul.contents-list {
  overflow: hidden;
  background: #FFF;
  padding: 9px;
}
ul.contents-list li{
  float:left;
  margin:9px;
}

footer {
  overflow:hidden;
}
footer ul{
  font-size:12px;
  width:136px;
  margin:0 7px 0 7px;
  padding-top: 20px;
}
footer ul li:nth-of-type(1) {margin-bottom:1em; }
footer .inner { position:relative; height:14em;}
footer ul { position:absolute; top:0; }
footer ul:nth-of-type(2) { left:16%; }
footer ul:nth-of-type(3) { left:32%; }
footer ul:nth-of-type(4) { left:48%; }
footer ul:nth-of-type(5) { left:64%; }
footer ul:nth-of-type(6) { left:80%; }
footer ul a {color:#333;}
footer ul li:hover{
  text-decoration:underline;
}
/*ここまでがstyle-l.cssからのコピー*/


/*Mサイズ専用のスタイル*/
.inner {
  width:100%;
}
#pc-nav ul li {
  width:16.31%; /*ナビ全体の幅960pxに対しliの幅が158pxなので158÷960*/
}

.size-1x1 { width:18%; height:auto;}
.size-2x1 { width:37.1%; height:auto;}
.size-2x2 { width:37.1%; height:auto;}

ul.contents-list{
  position: relative;
  overflow:hidden;
  width: 100%;
  padding: 4px 0 14px 4px;
}
ul.contents-list li img {
  width:100%;
  border:solid 1px #CCC;
  box-sizing:border-box;
}
ul.contents-list li#ph01{
  padding-bottom: 19%;
}
ul.contents-list li#ph02{
  position: absolute;
  left:39.2%;
}
ul.contents-list li#ph03{
  position: absolute;
  left:78.3%;
}
ul.contents-list li#ph04{
  position: absolute;
  left:39.2%;
  top:32.3%;
}
ul.contents-list li#ph05{
  position: absolute;
  left:59.2%;
  top:32.3%;
}
ul.contents-list li#ph06{
  position: absolute;
  top:65%;
}
ul.contents-list li#ph07{
  position: absolute;
  top:65%;
  left:19.3%;
}
ul.contents-list li#ph08{
  position: absolute;
  top:65%;
  left:39.2%;
}
ul.contents-list li#ph09{
  position: absolute;
   top:65%;
  left:78.3%;
}
style-s.css
@charset "utf-8";
/* CSS Document */
.inner {
  width:100%
}
#pc-header ul{ display:none; }
h1 {
  font-size: 20px;
  width: 100%;
  background: #000;
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-weight: bold;
  text-align: center;
}
.top-images img {
  width:100%;
}
#smartphone-header {
  width:100%;
  display:block;
  overflow: hidden;
}
#smartphone-header ul.nav {margin:0; }
#smartphone-header ul.nav li{
  text-align:center;
  float:left;
  width:50%;
  margin:0;
  background-color:#fff;
  border-bottom:solid 1px #ddd;
  box-sizing:border-box;
}
#smartphone-header ul.nav li a{
  display: block;
  width: 100%;
  font-size: 18px;
  padding: 12px 0;
}
ul.nav li:nth-of-type(odd){
  border-right:solid 1px #ddd;
}

ul.nav li.item-info a{ color:#E96562; }
ul.nav li.campaign a{ color:#14AEB0; }
ul.nav li.recipe a{ color:#FF8F01; }
ul.nav li.csv a{ color:#E3578A; }
ul.nav li.company-info a{ color:#438FC9; }
ul.nav li.custmor a{ color:#7BA600; }
ul.nav li:hover { box-sizing:border-box; }
ul.nav li.item-info a:hover {background-color:#E96562;color:#fff; }
ul.nav li.campaign a:hover {background-color:#14AEB0;color:#fff; }
ul.nav li.recipe a:hover {background-color:#FF8F01;color:#fff; }
ul.nav li.csv a:hover {background-color:#E3578A;color:#fff; }
ul.nav li.company-info a:hover {background-color:#438FC9;color:#fff; }
ul.nav li.custmor a:hover {background-color:#7BA600;color:#fff; }


/*ギャラリー部分*/
ul.contents-list { 
  position: relative;
  overflow: hidden;
}
ul.contents-list li {
  float: left;
  padding: 1px;
  margin:0;
  width:100%;
}
ul.contents-list li img {
  width:100%;
  border:solid 1px #CCC;
  box-sizing:border-box;
}
.size-1x1 {
  max-width:49%;
}
.size-2x1 {
  max-width:99%;
}
.size-2x2 {
  max-width:99%;
}

footer .inner ul {
  width:100%;
  border-bottom:solid 1px #FFF;
  position:relative;
  top:auto;
  left:auto;
  margin:0;
}
footer .inner ul li {
  position:relative;
  top:auto;
  left:auto;
  float:none;
  display:none;
}
footer .inner ul li:nth-of-type(1) {
  font-size:14px;
  display:block;
  margin:0;
}
footer .inner ul li a{
  display: block;
}
footer .inner ul li a:hover {
  background: #F9F;
}
footer .inner ul li a em{
  font-size: 16px;
  padding-left: 5px;
  color:#555;
  font-weight:normal;
  height: 3em;
  line-height: 3em;
}
wideslider.css
@charset "utf-8";

/* =======================================

	CommonElements

======================================= */

#first-impression {
	width: 100%;
	text-align: center;
}
.wideslider {
	width: 100%;
	text-align: left;
	position: relative;
	overflow: hidden;
}
.wideslider ul,
.wideslider ul li {
	float: left;
	display: inline;
	overflow: hidden;
}

.wideslider ul li img {
	width: 100%;
	display: none;
}

.wideslider_base {
	top: 0;
	position: absolute;
}
.wideslider_wrap {
	top: 0;
	position: absolute;
	overflow: hidden;

}
.slider_prev,
.slider_next {
	top: 0;
	overflow: hidden;
	position: absolute;
	z-index: 100;
	cursor: pointer;
}
.slider_prev {background: #fff url(../img/prev.jpg) no-repeat right center;}
.slider_next {background: #fff url(../img/next.jpg) no-repeat left center;}

.pagination {
	bottom: 10px;
	left: 0;
	width: 100%;
	height: 15px;
	text-align: center;
	position: absolute;
	z-index: 200;
}

.pagination a {
	margin: 0 5px;
	width: 15px;
	height: 15px;
	display: inline-block;
	overflow: hidden;
	background: #333;
}
.pagination a.active {
	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}


/* =======================================
	ClearFixElements
======================================= */
.wideslider ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.wideslider ul {
	display: inline-block;
	overflow: hidden;
}