用意する画像
ギャラリー部分
378px×378px 1枚
378px×184px 3枚
184px×184px 5枚
スライド部分
980px×400px 3枚
の合計12枚
PC用ーボタン画像
タブレット用ーボタン画像
まずはギャラリー部分の作成
(白い隙間はすべて10pxとする)
次にスライダー部分の作成
今回のポイントは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; } }