WEBサイト制作の勉強

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

レスポンシブサイト制作

既存サイトを参考にしてレスポンシブサイトを制作

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)">
<title>レスポンシブ対応サイト制作</title>
</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>  <!--/inner-->
</div>  <!--/header-->

<div id="first-impression">
<div class="inner">
<p id="top-imagies">
<a href="#"><img src="img/header01.png" alt="#"></a></p>
</div>
</div>

<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>

<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>
共有部分のスタイル

common.css

@charset "utf-8";
/* CSS Document */

body,p,h1,h2,h3,h4,h5,ul,li,a,em,dl,img,em{
  padding:0;
  margin:0;
  text-decoration:none;
  color:#000;
  font-style: normal;
}

body {
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}

ul {
  list-style-type:none;
}

img {
	vertical-align:bottom
}

h1 {
  font-size: 24px;
  font-weight:bold;
  color:#f00;
}

#container {
  background-color:#222;
}
#container .inner {
  background-color:#fff;
	overflow: hidden;
}

#footer {
  width:100%;
  background-color: #CCC;
}
#footer ul a em{
  font-weight:bold;
}
#footer ul li:hover{
  text-decoration:underline;
}
画面が960px以上の時に適用されるスタイル

style-l.css

@charset "utf-8";
/* CSS Document */
body {
  font-size:14px;
}

#smartphone-header { display:none; }

.inner {
  width:960px;
  margin:0 auto;
}

#header {
  width:100%;
}

ul.navi {
  overflow:hidden;
  margin:21px 0;
}
ul.navi li{
  font-size:13px;
  font-weight:600;
  width:158px;
  height:35px;
  line-height:35px;
  margin:0 1px;
  text-align:center;
  float:left;
  background-color:#F0F0F0;
}
ul.navi li a {
  display:block;
}
ul.navi li.item-info a { color:#E96562; }
ul.navi li.campaign a { color:#14AEB0; }
ul.navi li.recipe a { color:#FF8F01; }
ul.navi li.csv a { color:#E3578A; }
ul.navi li.company-info a { color:#438FC9; }
ul.navi li.custmor a { color:#7BA600; }
ul.navi li:hover { box-sizing:border-box; }
ul.navi li.item-info:hover { border-bottom:solid 3px #E96562; }
ul.navi li.campaign:hover { border-bottom:solid 3px #14AEB0; }
ul.navi li.recipe:hover { border-bottom:solid 3px #FF8F01; }
ul.navi li.csv:hover { border-bottom:solid 3px #E3578A; }
ul.navi li.company-info:hover { border-bottom:solid 3px #438FC9; }
ul.navi li.custmor:hover { border-bottom:solid 3px #7BA600; }

#first-impression {
  height:auto;
  overflow:hidden;
  background-color:#FCF;
}
#top-imagies {
  width:100%;
}

#container .inner {
  padding:17px 0 0 20px;
  box-sizing:border-box;
}

ul.contents-list li{
  float:left;
  margin:0 17px 17px 0;
}
ul.contents-list li#contents01-smartphone {
  display:none;
}

.contents-size-1x1 {
  max-width:170px;
  max-height:170px;
}
.contents-size-2x1 {
  max-width:357px;
  max-height:170px;
}
.contents-size-2x2 {
  max-width:357px;
  max-height:357px;
}

#footer {
  overflow:hidden;
}
#footer ul{
  font-size:12px;
  width:136px;
  margin:0 7px 0 7px;
}
#footer ul li:nth-of-type(1) { margin-bottom:1em; }
#footer .inner { position:relative; height:25em;}
#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;}
画面サイズが959px~641pxの時に適用されるスタイル

style-m.css

@charset "utf-8";
/* CSS Document */

/*Lサイズのスタイルからのコピー*/
#smartphone-header { display:none; }

ul.navi {
  overflow:hidden;
  margin:21px 0;
}
ul.navi li{
  font-size:13px;
  font-weight:600;
  width:158px;
  height:35px;
  line-height:35px;
  margin:0 1px;
  text-align:center;
  float:left;
  background-color:#F0F0F0;
}
ul.navi li a {
  display:block;
}
ul.navi li.item-info a { color:#E96562; }
ul.navi li.campaign a { color:#14AEB0; }
ul.navi li.recipe a { color:#FF8F01; }
ul.navi li.csv a { color:#E3578A; }
ul.navi li.company-info a { color:#438FC9; }
ul.navi li.custmor a { color:#7BA600; }
ul.navi li:hover { box-sizing:border-box; }
ul.navi li.item-info:hover { border-bottom:solid 3px #E96562; }
ul.navi li.campaign:hover { border-bottom:solid 3px #14AEB0; }
ul.navi li.recipe:hover { border-bottom:solid 3px #FF8F01; }
ul.navi li.csv:hover { border-bottom:solid 3px #E3578A; }
ul.navi li.company-info:hover { border-bottom:solid 3px #438FC9; }
ul.navi li.custmor:hover { border-bottom:solid 3px #7BA600; }

#first-impression {
  height:auto;
  overflow:hidden;
  background-color:#FCF;
}
#top-imagies {
  width:100%;
}

#container .inner {
  padding:17px 0 0 20px;
  box-sizing:border-box;
}

ul.contents-list li{
  float:left;
  margin:0 17px 17px 0;
}

.contents-size-1x1 {
  max-width:170px;
  max-height:170px;
}
.contents-size-2x1 {
  max-width:357px;
  max-height:170px;
}
.contents-size-2x2 {
  max-width:357px;
  max-height:357px;
}

#footer {
  overflow:hidden;
}
#footer ul{
  font-size:12px;
  width:136px;
  margin:0 7px 0 7px;
}

#footer ul li:nth-of-type(1) { margin-bottom:1em; }
#footer .inner { position:relative; height:25em;}
#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;}

/*▲▲▲▲▲▲*/


/*Mサイズ専用のスタイル*/
body { width:auto; }
.inner { width:auto; }
#first-impression { width:auto; }
ul.navi li { width:16.31%; }
#top-imagies img { width:100%; height:auto; }
.contents-size-1x1 { width:18%; height:auto;}
.contents-size-2x1 { width:37.6%; height:auto;}
.contents-size-2x2 { width:37.6%; height:auto;}

ul.contents-list{
  position: relative;
  overflow:hidden;
  width: 100%;
}
ul.contents-list li img {
  width:100%;
  border:solid 1px #CCC;
  box-sizing:border-box;
}
ul.contents-list li#contents01{
  padding-bottom: 20%;
}
ul.contents-list li#contents02{
  position: absolute;
  left:38.6%;
}
ul.contents-list li#contents03{
  position: absolute;
  left:77.2%;
}
ul.contents-list li#contents04{
  position: absolute;
  left:38.6%;
  top:32.9%;
}
ul.contents-list li#contents05{
  position: absolute;
  left:57.6%;
  top:32.9%;
}
ul.contents-list li#contents06{
  position: absolute;
  top:65.8%;
}
ul.contents-list li#contents07{
  position: absolute;
  top:65.8%;
  left:19.5%;
}
ul.contents-list li#contents08{
  position: absolute;
  top:65.8%;
  left:38.8%;
}
ul.contents-list li#contents09{
  position: absolute;
  top:65.8%;
  left:57.8%;
}
ul.contents-list li#contents10{
  position: absolute;
  top:65.8%;
  left:77.15%;
}


画面サイズが640px以下の場合に適応されるスタイル
style-s.css

@charset "utf-8";
/* CSS Document */
body {
  width:100%
}
.inner {
  width:100%
}
#header ul.navi{ display:none; }

#top-imagies img {
  width:100%;
}
#smartphone-header {
  width:100%;
  display:block;
  overflow: hidden;
}
#smartphone-header ul.navi li a{
  display: block;
  width: 100%;
}
ul.navi { margin:0; }
ul.navi li{
  text-align:center;
  float:left;
  width:50%;
  margin:0;
  background-color:#fff;
  border-bottom:solid 1px #ddd;
  box-sizing:border-box;
}
ul.navi li:nth-of-type(odd){
  border-right:solid 1px #ddd;
}

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


#container .inner {
  padding:0;
}

ul.contents-list { 
  position: relative;
  overflow: hidden;
}
ul.contents-list li {
  float: left;
  padding: 0 0.45% 0.9%;
  margin:0;
  width:100%;
}

ul.contents-list li img {
  width:100%;
  border:solid 1px #CCC;
  box-sizing:border-box;
}

.contents-size-1x1 {
  max-width:49%;
  max-height:none;
}
.contents-size-2x1 {
  max-width:99%;
  max-height:none;
}
.contents-size-2x2 {
  max-width:98%;
  max-height:none;
}
#footer .inner ul {
  width:100%;
  height:4em;
  line-height:4em;
  border-bottom:solid 1px #CCC;
  position:relative;
  top:auto;
  left:auto;
  margin:0 2%;
}
#footer .inner ul li {
  font-weight:normal;
  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 em{
  color:#555;
  text-decoration:none;
  font-weight:normal;
}