WEBサイト制作の勉強

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

フェリカテクニカルアカデミー

レスポンシブデザインの制作

f:id:yachin29:20150908045032p:plain
http://yachin29.com/kirin/




用意する画像

ギャラリー部分

378px×378px 1枚
378px×184px 3枚
184px×184px 5枚

スライド部分

980px×400px 3枚

の合計12枚


PC用ーボタン画像

f:id:yachin29:20150904165609p:plain


タブレット用ーボタン画像
f:id:yachin29:20150904165614p:plain


まずはギャラリー部分の作成
(白い隙間はすべて10pxとする)

f:id:yachin29:20150904174131p:plain



次にスライダー部分の作成

black-flag.net



今回のポイントはPC用サイトでのみ表示させるナビボタンや画像と、スマートフォンサイトでのみ表示させるナビボタンや画像を「display:none」を上手く使って、表示・非表示を切り替えましょう。

また、「li:not(:first-child)」(first-child以外のli)など便利な擬似クラスもしっかりと覚え、目的にあった擬似クラスをつかえるようにしましょう。


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/head_logo_001_sp.jpg" alt=""></h1>
<nav class="pc-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><!--/pc-nav-->
</div>
</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">
<div class="inner">
<ul>
<li id="photo1" class="size-2x2"><a href="#"><img src="img/01.png"></a></li>
<li id="photo1-2" class="size-2x2"><a href="#"><img src="img/01-2.png"></a></li>
<li id="photo2" class="size-2x1"><a href="#"><img src="img/02.png"></a></li>
<li id="photo3" class="size-1x1"><a href="#"><img src="img/03.png"></a></li>
<li id="photo4" class="size-1x1"><a href="#"><img src="img/04.png"></a></li>
<li id="photo5" class="size-2x1"><a href="#"><img src="img/05.png"></a></li>
<li id="photo6" class="size-1x1"><a href="#"><img src="img/06.png"></a></li>
<li id="photo7" class="size-1x1"><a href="#"><img src="img/07.png"></a></li>
<li id="photo8" class="size-2x1"><a href="#"><img src="img/08.png"></a></li>
<li id="photo9" class="size-1x1"><a href="#"><img src="img/09.png"></a></li>
<li id="photo10" class="size-1x1"><a href="#"><img src="img/10.png"></a></li>
</ul>
</div>
</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>


style.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;
}

ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
  color: #222;
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/*レイアウト*/

header {
  border-bottom: 1px solid #CCC;
}
.inner {
  width: 980px;
  margin: 0 auto;
}
h1 {
	margin: 10px 0;
}
.pc-nav {
  width: 980px;
  height: 46px;
  margin: 0 auto;
  overflow: hidden;
  background: #FFF;
}
.pc-nav li {
  float: left;
  height: 30px;
  width: 16.6%;
  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/gnav_on.png) no-repeat center -5px;
}
.pc-nav li.nav2 a {
  background: url(../img/gnav_on.png) no-repeat center -48px;
}
.pc-nav li.nav3 a {
  background: url(../img/gnav_on.png) no-repeat center -91px;
}
.pc-nav li.nav4 a {
  background: url(../img/gnav_on.png) no-repeat center -134px;
}
.pc-nav li.nav5 a {
  background: url(../img/gnav_on.png) no-repeat center -177px;
}
.pc-nav li.nav6 a {
  background: url(../img/gnav_on.png) no-repeat center -220px;
}
.pc-nav li a:hover {
  line-height: 42px;
}
.pc-nav li.nav1 a:hover {
  border-bottom:solid 3px #E96562;
}
.pc-nav li.nav2 a:hover {
  border-bottom:solid 3px #14AEB0;
}
.pc-nav li.nav3 a:hover {
  border-bottom:solid 3px #FF8F01;
}
.pc-nav li.nav4 a:hover {
  border-bottom:solid 3px #E3578A;
}
.pc-nav li.nav5 a:hover {
  border-bottom:solid 3px #438FC9;
}
.pc-nav li.nav6 a:hover {
  border-bottom:solid 3px #7BA600;
}

.sp-nav {
  display: none;
}

#content {
  background: #222;
  width: 100%;
}
#content ul {
  width: 970px;
  background: #FFF;
  overflow: hidden;
  padding: 5px;
}
#content li {
  float: left;
  margin: 5px;
}
li#photo1-2 {
  display: none;
}
li#photo10 {
  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:979px){
  
img {
  max-width: 100%; /*フルードイメージ*/
}
.pc-nav {
  width: 99%;
}
.pc-nav li.nav1 a {
  background: url(../img/gnav_641_on.png) no-repeat center -10px;
}
.pc-nav li.nav2 a {
  background: url(../img/gnav_641_on.png) no-repeat center -63px;
}
.pc-nav li.nav3 a {
  background: url(../img/gnav_641_on.png) no-repeat center -116px;
}
.pc-nav li.nav4 a {
  background: url(../img/gnav_641_on.png) no-repeat center -169px;
}
.pc-nav li.nav5 a {
  background: url(../img/gnav_641_on.png) no-repeat center -222px;
}
.pc-nav li.nav6 a {
  background: url(../img/gnav_641_on.png) no-repeat center -275px;
}
.inner {
  width: 100%;
}

/*ギャラリー部分*/
#content {
  width: 100%;
}

#content ul {
  width: 98.98%;/* 970px÷980px*/
  padding:0.51%; /*5px÷980px*/
}
#content li {
  margin:0.51%; /*5px÷980px*/
}
.size-1x1 {width:18.775%; height: auto;} /*184÷980*/
.size-2x1 {width:38.57%; height: auto;}
.size-2x2 {width:38.57%; height: auto;} /*378÷980*/

li#photo1{
  width: 38.36%;
}
li#photo4{
  width: 18.77%;
}
footer {
  width: 98.88%;/* 970÷980*/
  padding:0.51%;
  margin: 0 auto;
}
footer ul{
  font-size:10px;
  float: left;
  width: 16.66%;
}
footer ul li:first-child{
  font-size: 12px;
  font-weight:bold;
  line-height: 2;
}
}


/*スマートフォンサイト*/
@media screen and (max-width:640px){

h1 {
  width: 40%;
}
.pc-nav {
  display: none;
}
.sp-nav {
  display: block;
  overflow: hidden;
}
.sp-nav li{
  text-align:center;
  float:left;
  width:50%;
  margin:0;
  background-color:#fff;
  border-bottom:solid 1px #ddd;
  box-sizing:border-box;
}
.sp-nav li a{
  display: block;
  width: 100%;
  font-size: 14px;
  padding: 14px 0;
}
.sp-nav li:nth-of-type(odd) {
  border-right:solid 1px #ddd;
}
.sp-nav li a:hover {
  color: #FFF;
}
.sp-nav li.nav1 a:hover {
  background:#E96562;
}
.sp-nav li.nav2 a:hover {
  background:#14AEB0;
}
.sp-nav li.nav3 a:hover {
  background:#FF8F01;
}
.sp-nav li.nav4 a:hover {
  background:#E3578A;
}
.sp-nav li.nav5 a:hover {
  background:#438FC9;
}
.sp-nav li.nav6 a:hover {
  background:#7BA600;
}
#content ul {
  width: 98.98%;/* 970÷980*/
  padding:0.56%;
}
#content li {
  float: left;
  margin:0;
  width:100%;
  padding: 3px;
  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#photo1{
  width: 100%;
}
li#photo4{
  width: 50%;
}

li#photo1{
  display: none;
}
li#photo1-2 {
  display: block;
}
li#photo10 {
  display: block;
}
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/next.jpg) no-repeat right center;
  background-size: 6%;
  width: 96%;
  margin: 0 auto;
  display: block;
  padding: 10px 0;
}
footer ul li:first-child:hover {
  background: #EEE;
}
footer ul li:not(:first-child){
  display:none;
}
}


Googleのクローラーはレスポンシブをどう見ているのか? | webutubutu