既存サイトを参考にしてレスポンシブサイトを制作
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 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;} /*▲▲▲▲▲▲*/ /*Ｍサイズ専用のスタイル*/ 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; }
