スマホレイアウト
今までの授業ではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。
全面レイアウトの場合、そのような考えで画像をサイズを決めなければいけないか、しっかりと理解しましょう。ホバーに関してはモデルとなっている既存サイトの動きを確認し、CSS3のtransitionを使って動かしてみましょう。
今まで授業で習った事を上手く組み合わせれば、今回のようなレイアウトのRWDサイトも問題無く制作出来るので、自分なりに色々と工夫をしてみましょう。
それと同時に、今まで習った基礎的な部分をしっかりと復習し必ず理解しておきましょう。
参考サイト
www.vogue.co.jp
http://mosaic-theme-active.myshopify.com/
作成
http://yachin29.webcrow.jp/vogue0710/
スクロールイベント
$(function(){ $(window).scroll(function (){ if($(this).scrollTop() > 60) { $('nav').addClass('fixed'); }else{ $('nav').removeClass('fixed'); }; }); });
html
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーンレイアウトその2</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script> $(function(){ $(window).scroll(function (){ if($(this).scrollTop() > 60) { $('nav').addClass('fixed'); }else{ $('nav').removeClass('fixed'); }; }); }); </script> </head> <body> <h1><img src="img/logo.svg" alt="ロゴ"></h1> <header> <nav> <ul class="menu"> <li><a href="#">ボタン1</a></li> <li><a href="#">ボタン2</a></li> <li><a href="#">ボタン3</a></li> <li><a href="#">ボタン4</a></li> <li><a href="#">ボタン5</a></li> </ul> </nav> </header> <div id="container"> <div class="box1 box-top"> <div class="cap"> <h2>タイトル</h2> <p class="txt">説明文</p> <p class="btn">ボタン</p> </div> </div> <div class="box2 box-top"> <div class="cap"> <h2>タイトル</h2> <p class="txt">説明文</p> <p class="btn">ボタン</p> </div> </div> <div class="box3 box-bottom"> <div class="cap"> <h2>タイトル</h2> <p class="txt">説明文</p> <p class="btn">ボタン</p> </div> </div> <div class="box4 box-bottom"> <div class="cap"> <h2>タイトル</h2> <p class="txt">説明文</p> <p class="btn">ボタン</p> </div> </div> <div class="box5 box-bottom"> <div class="cap"> <h2>タイトル</h2> <p class="txt">説明文</p> <p class="btn">ボタン</p> </div> </div> </div><!--/#container--> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,h2,p,ul,li { margin:0; padding:0; line-height:1.0; } ul { list-style:none; } a { text-decoration:none; } img { border:none; vertical-align:bottom; } /*PCレイアウト*/ h1 { width:160px; height:160px; position:absolute; top:0; right:0; bottom:0; left:8%; margin:auto; z-index:100; } header { width:8%; height:100vh; background:#B0B0B0; float:left; } nav { width:100%; height:calc(100vh - 200px);/*100vh - 200px*/ background:#DD4F52; margin-top:200px; } .menu li { width:100%; height:calc((100vh - 200px) / 5); } .menu li a { display:block; width:100%; text-align:center; line-height:calc((100vh - 200px) / 5); color:#222; } .menu li a:hover { background:#F08688; } #container { width:92%; float:right; overflow:hidden; } .box-top { width:50%; height:50vh; float:left; overflow:hidden; position:relative; } .box-bottom { width:33.33%; height:50vh; float:left; overflow:hidden; } .box1 { background:url(img/L1.png) no-repeat center/cover; } .box2 { background:url(img/L2.png) no-repeat center/cover; } .box3 { background:url(img/S1.png) no-repeat center/cover; } .box4 { background:url(img/S2.png) no-repeat center/cover; } .box5 { background:url(img/S3.png) no-repeat center/cover; } .cap { width:100%; height:50vh; background:rgba(255,24,38,0.00); color:#FFFFFF; text-align:center; padding-top:160px; box-sizing:border-box; transition:0.1s linear; } .cap:hover { width:100%; height:50vh; background:rgba(255,24,38,1.00); text-align:center; padding-top:40px; } h2 { padding-top:100px; margin-bottom:60px; } p.txt { margin-bottom:80px; } /*スマホサイトのレイアウト*/ @media screen and (max-width:767px){ header { width:100%; height:60px; background:#B0B0B0; float:none; position:relative; } nav { width:100%; height:50px;/*100vh - 200px*/ background:#DD4F52; margin-top:0; position:absolute; top:100%; left:0; } .menu { overflow:hidden; } .menu li { width:20%; height:50px; float:left; } .menu li a { display:block; width:100%; text-align:center; line-height:50px; color:#222; border-right:1px solid #FFF; } .menu li:last-child a { border-right:none; } #container { width:100%; float:none; overflow:hidden; } .box-top { width:100%; height:50vh; float:none; margin-bottom:50vh; position:relative; overflow: visible;/*はみ出したものを表示させる(初期設定に戻す)*/ } .box-bottom { width:100%; height:50vh; float:none; overflow: visible; margin-bottom:50vh; position:relative; } .cap { width:100%; height:50vh; background:#FFF; color:#000; text-align:center; padding-top:0; box-sizing:border-box; transition: none; position:absolute; top:100%; left:0; } .cap:hover { width:100%; height:50vh; background:#FFF; text-align:center; padding-top:0; } h1 { width:50px; height:50px; position:absolute; top:5px; left:5px; margin:0; } .box1 { margin-top:50px;/*navの高さ分の隙間を取る*/ } /*スクロールイベント*/ nav.fixed { position:fixed; top:0; left:0; z-index:9999; } }