<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>
<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>
<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";
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";
#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";
#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;
}
.inner {
width:100%;
}
#pc-nav ul li {
width:16.31%;
}
.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";
.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";
#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;
}
.wideslider ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
.wideslider ul {
display: inline-block;
overflow: hidden;
}