今までの授業ではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。
全面レイアウトの場合、そのような考えで画像をサイズを決めなければいけないか、しっかりと理解しましょう。ホバーに関してはモデルとなっている既存サイトの動きを確認し、CSS3のtransitionを使って動かしてみましょう。
今まで授業で習った事を上手く組み合わせれば、今回のようなレイアウトのRWDサイトも問題無く制作出来るので、自分なりに色々と工夫をしてみましょう。
それと同時に、今まで習った基礎的な部分をしっかりと復習し必ず理解しておきましょう。
参考サイト
www.vogue.co.jp
http://mosaic-theme-active.myshopify.com/
サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。
$(function() { $("#to_top").on('click', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); });
複数の場所にスムーススクロールで移動させたい場合
$(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^="#"]').on('click',function() { // スクロールの速度 var speed = 400; // ミリ秒 // 移動先を取得 var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); });
注意しなければいけないのは、古い書き方だとjqueryの1.12.0以上だと動かないので、必ず正しい記述をしましょう。
間違った記述
$('a[href^=#]')
正しい記述
$('a[href^="#"]')
スクロールした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたスクロール時の処理を実行します。
引数を設定しない場合は、jQueryオブジェクトで指定した要素のスクロール位置（Y座標）を取得します。
スクロールが300pxに達したらボタンを表示
$('.scroll-btn').hide(); $(window).scroll(function () { if ($(this).scrollTop() > 300) { $('.scroll-btn').fadeIn(); } else { $('.scroll-btn').fadeOut(); } });
２カラムレイアウトをレスポンシブに作り変えましょう。
ヘッダー画像・バナー画像は自身で用意
使用画像
バナー見本
バナー素材
作例
PCレイアウト
タブレットレイアウト
スマホサイト
レスポンシブ化のソースコード
index.httml
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Pickupstream</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css"> <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header> <div class="inner"> <div id="site"> <h1>PickupStream</h1> </div> </div> <nav id="header_nav"> <ul id="main_nav"> <li><a href="url">HOME</a></li> <li><a href="url">ABOUT</a></li> <li><a href="url">CONTACT</a></li> </ul> </nav> </header> <!-- #header --> <div class="inner"> <p id="keyVisual"><img src="img/KeyVisual.jpg" alt="夜景画像"></p> <div id="content"> <section> <h2>海岸のデコレーション</h2> <p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p> <p id="plant"><img src="img/plant.jpg" alt="海浜植物"></p> <p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p> <p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p> </section> </div> <div id="sidebar"> <nav class="menu"> <h2>Main Menu</h2> <ul> <li><a href="#">山と森林</a></li> <li><a href="#">海と海岸</a></li> <li><a href="#">都市と建築</a></li> <li><a href="#">地上と地下</a></li> </ul> </nav> <div class="ad"> <p><img src="img/mihon.png" alt="広告"></p> </div> </div><!-- #sidebar --> </div><!-- #inner --> <!-- ### フッター ### --> <footer> <div class="inner"> <div id="footer_txt"> <p id="footer_title">Pickupstream</p> <p><small>Copyright © Pickupstream, all rights reserved.</small></p> </div> <ul> <li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-tumblr-square" aria-hidden="true"></i></a></li> </ul> </div> </footer> </body> </html>
@charset "UTF-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3,p,ul, li,div { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN",Meiryo, sans-serif; } ul { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: 0; vertical-align: bottom; } /* ### レイアウト ### */ header h1 { background: url(img/logo.png)no-repeat; width: 360px; height: 39px; margin: 10px 0; white-space: nowrap; text-indent: 100%; overflow: hidden; } .inner { width: 960px; margin:0 auto; overflow: hidden; } /* ナビゲーションメニュー */ nav#header_nav { background:#1C3479; } ul#main_nav { width: 960px; margin: 0 auto; font-size: 14px; overflow: hidden; background:#0097D8; } ul#main_nav li { float: left; width: 130px; } ul#main_nav li a { display: block; padding: 15px 0 13px; border-right: solid 1px #fff; color: #ffffff; text-align: center; } ul#main_nav li a:hover { background-color: #035; } p#keyVisual { margin-bottom: 30px; } #content{ width: 620px; float: right; margin-bottom:30px; } section h2 { font-size: 25px; line-height:28px; color:#185A68; border-left: solid 30px #185A68; margin: 0 0 6px; padding: 0 0 0 5px; } section p.new{ margin:0 0 10px; } section p { margin-top: 20px; line-height: 1.5; } section img{ border:8px solid #185A68; box-sizing:border-box; } /*サイドバー*/ #sidebar { width: 300px;/*バナーを100%で表示させる為*/ float: left; } #sidebar h2{ font-family: 'Lobster', cursive; } .menu{ margin-bottom:30px; } .ad { margin-bottom: 30px; } nav.menu h2 { font-size: 25px; color: #3F7A8C; margin: 0 0 5px; } nav.menu ul { border-top: solid 1px #aaaaaa; } nav.menu li { border-bottom: solid 1px #aaaaaa; } nav.menu li a { display: block; font-size: 14px; color: #666666; padding: 10px 0 10px 20px; background: url(img/listmark.png)no-repeat 0 50%; } nav.menu li a:hover { background-color: #def; } footer { color: #ffffff; background-color:#1C3479; padding: 10px 10px 20px; } footer p#footer_title { font-size: 18px; padding: 10px 0; font-weight: bold; } #footer_txt { width:50%; float:left; } footer ul { overflow:hidden; width:30%; float: right; margin-top:20px; } footer li { float:left; } footer li a { display:block; color:#FFFFFF; font-size:40px; margin-left:20px; } footer li a:hover { color: #FFCC33; } @media screen and (max-width:959px) { /*タブレット用レイアウト*/ header h1 { margin:10px; } .inner { width: 100%; } /* ナビゲーションメニュー */ ul#main_nav { width: 100%; } #content{ width: 64.58%; padding-right:10px; box-sizing:border-box; } section p.new{ margin:0 0 10px; } section p { margin-top: 20px; line-height: 1.5; } section img{ border:8px solid #185A68; box-sizing:border-box; } /*サイドバー*/ #sidebar { width: 31.25%; padding-left:10px; box-sizing:border-box; } nav.menu h2 { font-size: 25px; color: #3F7A8C; margin: 0 0 5px; } img { max-width:100%; } } @media screen and (max-width:767px) { /*スマホ用レイアウト*/ header h1 { background: url(img/logo.png)no-repeat center/contain; width: 240px; height: 39px; } ul#main_nav li { width: 33.33%; } ul#main_nav li a { display: block; padding: 15px 0 13px; border-right: solid 1px #fff; color: #ffffff; text-align: center; } ul#main_nav li:last-child a { border-right:none; } #content{ width: 100%; padding:10px; box-sizing:border-box; float:none; } #content section { margin:0 auto; } section img{ text-align:center; border:none; box-sizing:border-box; } section h2 { font-size: 22px; line-height:22px; color:#185A68; border-left: solid 10px #185A68; margin: 0 0 6px; padding: 0 0 0 5px; } #sidebar { width: 100%; padding-left:10px; padding-right:10px; box-sizing:border-box; float:none; } #sidebar p { text-align:center; } #footer_txt { width:100%; float:none; } footer ul { overflow:hidden; width:100%; float:none; margin-top:20px; } footer li:first-child a{ display:block; color:#FFFFFF; font-size:40px; margin-left:0; } }
今回はillustratorでカンプを作ります。
作例
http://yachin29.webcrow.jp/Cotorier/
まずはおおまかなレイアウトを決め、ワイヤーフレームを完成させます。ワイヤーフレームとは、Webページのおおまかなコンテンツ要素やレイアウトを示すものです。
作成する際はWebサイトとしての体裁や、情報の優先順位などを考えて、配置場所を考えながらレイアウトしていきます。
今回は、以下のコンテンツ要素を配置します。
この段階では細かいカラー設計はせず、グレースケールでカンプを制作していきましょう。
Cotorier Cafe
毎日の おいしいごはんと おまけをすこし
お店のこと
メニュー
アクセス
毎日食べたい、おうちみたいなごはんやおやつ
Cotorier Cafe（コトリエ カフェ）は、あなたのもうひとつの「おうち」に
なりたいごはんやさんです。毎日食べたくなるような、どこかホッとする
ごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えし
ます。気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、
「ただいま」を心よりお待ちしています。
お店について
おすすめメニュー
すべてのメニュー
日替わりごはんセット
春野菜とあさりのチャウダー豆としらすのごはん、新ごぼうのきんぴら
週替わりカレー
甘辛たけのこカレー ゆでたまごつき
季節のおやつ
西か東か！さくらもち食べ比べ対決セット
ひとくち晩酌
今だけ！いちごごろごろサングリア
お店からのお知らせ
■ 2017-04-22 ゴールデンウィークの営業について
■ 2017-04-21 今週の日替わりメニュー（4/21 - 4/26)
■ 2017-04-14 今週の日替わりメニュー（４14 - 4/19）
■ 2017-04-10 春限定のおやつがスタートしました！
こちらもどうぞ
Facebook
Twitter
Pinterest
Blog
店舗情報
地図・アクセス方法
住所 東京都杉並区高円寺南7丁目7-4 ことりやビル２F(東京メトロ丸ノ内線新高円寺駅から徒歩7分)
電話 03-0000-0000
営業時間 11:00 - 23:30（L.O. 23:00）
ランチタイム 11:00 - 15:00（L.O. 14:30）
定休日 日曜日・祝日
Copyright© Cotorier Cafe. All rights Reserved.
幅はすべて960px
次にテキストや画像を配置して行きますが、無造作に配置するのではなく、ガイドを使いグリッド状に配置して行きましょう。
いったん［フォントサイズ］を「16px」、［行送り］を「24px」としておきます。これらの値は、ブラウザーで閲覧する際のテキストの標準的なサイズと、日本語フォントで可読性が保てる行間の標準的な数値です。後ほど見出しや本文などの用途によってそれぞれ調整します。
メイン画像は自身で用意する。大きさは適宜。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Cotorier Cafe</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> <script type="text/javascript" src="https://ad.netowl.jp/js/webcrow-php.js"></script> <div id="container"> <header> <h1>Cotorier Cafe</h1> <p class="text">毎日のおいしいごはんとおまけをすこし</p> <p class="logo"><img src="img/logo.jpg" alt=""></p> <nav> <ul> <li><a href="#">お店のこと</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">アクセス</a></li> </ul> </nav> </header> <div id="main"> <p id="mainImg"><img src="img/main.jpg" alt=""></p> <div id="mainText"> <h2>毎日食べたい、<br>おうちみたいなごはんやおやつ</h2> <p class="textInfo">Cotorier Cafe（コトリエ カフェ）は、あなたのもうひとつの「おうち」に なりたいごはんやさんです。毎日食べたくなるような、どこかホッとする ごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えし ます。気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、 「ただいま」を心よりお待ちしています。</p> <p id="mainShop"><a href="#">お店について</a></p> </div> </div> <div id="menu"> <div id="menuInner"> <h3>おすすめメニュー</h3> <p id="all"><a href="#">すべてのメニュー</a></p> </div> <div id="menuPhoto"> <div class="menuFood"> <h4>日替わりごはんセット</h4> <p class="photo"><img src="img/photo1.jpg" alt="#"></p> <p class="photoText">春野菜とあさりのチャウダー豆としらすのごはん、新ごぼうのきんぴら</p> </div> <div class="menuFood"> <h4>週替わりカレー</h4> <p class="photo"><img src="img/photo2.jpg" alt="#"></p> <p class="photoText">甘辛たけのこカレー ゆでたまごつき</p> </div> <div class="menuFood"> <h4>季節のおやつ</h4> <p class="photo"><img src="img/photo3.jpg" alt="#"></p> <p class="photoText">西か東か！さくらもち食べ比べ対決セット</p> </div> <div class="menuFood"> <h4>ひとくち晩酌</h4> <p class="photo"><img src="img/photo4.jpg" alt="#"></p> <p class="photoText">今だけ！いちごごろごろサングリア</p> </div> </div> </div> <div id="info"> <div id="infoShop"> <h3>お店からのお知らせ</h3> <dl> <dt>■ 2017-04-22</dt> <dd>ゴールデンウィークの営業について</dd> <dt>■ 2017-04-21</dt> <dd>今週の日替わりメニュー（4/21 - 4/26)</dd> <dt>■ 2017-04-14</dt> <dd>今週の日替わりメニュー（４14 - 4/19）</dd> <dt>■ 2017-04-10</dt> <dd>春限定のおやつがスタートしました！</dd> </dl> </div> <div id="sns"> <p>こちらもどうぞ</p> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Pinterest</a></li> <li><a href="#">Blog</a></li> </ul> </div> </div> <div id="access"> <h3>店舗情報</h3> <h4>地図・アクセス方法</h4> <dl> <dt>住所</dt> <dd>東京都杉並区高円寺南7丁目7-4 ことりやビル２F<br>(東京メトロ丸ノ内線新高円寺駅から徒歩7分)</dd> <dt>営業時間</dt><dd>11:00 - 23:30（L.O. 23:00）<br>ランチタイム：11:00 - 15:00（L.O. 14:30）</dd> <dt>電話</dt><dd>03-0000-0000</dd> <dt>定休日</dt><dd>日曜日・祝日</dd> </dl> </div> <footer> <p><small>Copyright© Cotorier Cafe. All rights Reserved.</small></p> </footer> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ /*reset*/ html, body, div, h1, h2, h3, h4, p, ul, li, dl, dt, dd,header, nav, footer { margin:0; padding:0; line-height:1.0; font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } a { text-decoration:none; color:#222; } ul { list-style:none; } img { border:0; vertical-align:bottom; } /*PCレイアウト*/ #container { width: 960px; margin:0 auto; position: relative; } header { background: #F9E4C0; overflow:hidden; padding-top: 10px; } header h1 { font-size:30px; position: absolute; top: 50px; left: 100px; } header .text{ font-size: 14px; position: absolute; top: 30px; left: 100px; } header .logo { position:absolute; top:20px; left:20px; } header nav { float: right; margin: 0 10px 10px 0; } header ul { overflow: hidden; } header li { float: left; margin-right: 20px; } header li:last-child { margin-right:0; } header li a { display: block; width:140px; height:80px; background:#FFF9CC; text-align: center; line-height: 80px; } /*メイン部分*/ #main { overflow: hidden; padding-top: 40px; } #mainText { width:600px; float: left; } h2 { font-size: 40px; font-weight:normal; line-height: 1.6; } .textInfo { line-height:1.6; margin-bottom: 20px; } p#mainImg { width: 300px; float: right; margin-top: 30px; } #mainShop a { display: block; width:500px; height:60px; background:#FFF9CC; border: 1px #333 solid; box-sizing: border-box; margin-bottom: 40px; text-align: center; line-height:60px; font-size:20px; } /*メニュー部分*/ #menu { background:#FFE380; overflow: hidden; } #menuInner { overflow: hidden; margin: 30px 0; padding: 0 10px; } #menu h3 { width:320px; float: left; font-size: 40px; font-weight: normal; } #all a { display: block; float: right; background:#FFC; width:220px; height:50px; text-align:center; line-height:50px; } #menuPhoto { overflow: hidden; } #menu h4 { text-align: center; font-size:18px; font-weight:normal; margin-bottom: 10px; } .menuFood { float: left; width:220px; margin:10px; } .photo img { border-radius: 20px; } .photoText { margin: 10px 0 30px 0; line-height: 1.5; } /*お知らせ部分*/ #info { overflow: hidden; padding-top: 40px; } #info h3 { font-size:28px; font-weight: normal; margin-bottom: 30px; } #infoShop { float: left; width: 450px; margin:0 0 30px 10px; } #info dt, #info dd { float: left; margin-bottom: 20px; } #info dd { margin-left:10px; } #sns { float: right; width:480px; overflow:hidden; } #sns p { font-size:28px; text-align: center; margin-bottom: 10px; } #sns li { float: left; margin: 10px; } #sns li a { display: block; width:220px; height:60px; border-radius: 8px; background: #FFCC66; line-height: 60px; text-align:center; } /*アクセス部分*/ #access { background: #FACFB3; padding: 10px; } #access h3 { font-size: 28px; margin-top: 20px; font-weight: normal; width:120px; float: left; } #access h4 { width:190px; height: 40px; background: #FFC; float: left; font-weight: normal; margin:10px 0 40px 40px; text-align:center; line-height:40px; } #access dl { clear: both; overflow: hidden; margin-bottom: 30px; } #access dt, #access dd { float: left; line-height: 1.6; } #access dt { width: 80px; height: 70px; } #access dd { width: 380px; height: 70px; } /*フッター部分*/ footer { background: #FFF683; height:60px; text-align:center; } footer p { line-height: 60px; font-size: 18px; }
もちろんIE11もEdgeもSVG形式の画像をサポートしているので表示自体は問題なく出来ますが、やはりSafariやChromeなどでは問題無く表示されるのに、IE11とEdgeでは表示されない、もしくは形が崩れている、なんて事が良くあります。
その場合に気をつけて欲しいポイントはSVGタグ内の「width」と「height」の記述です。
SVGの書き出し方によってはSVGタグ内の「width」と「height」が省略されてしまう場合があります。そういったSVGデータをIE11やEdgeで見ると、大きさが極端にずれていたり、表示されなかったり、という事が起こります。
このように「width」と「height」の値が省略されている場合は、追加で記述しましょう
<svg x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px;" >
このように「width」と「height」の値を追加します。
<svg x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="width: 512px; height: 512px;" >
また、書き出し方によっては、viewBoxの値とstyleの値がずれている場合があるので、その場合は「width」と「height」を追加するだけでは無く、viewBoxの値とstyleの値と「width」「height」の値を揃えましょう。
<svg x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="width: 256px; height: 256px;" >
viewBoxの値とstyleの値と「width」「height」の値を揃える
<svg x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="width: 512px; height: 512px;">
ナビゲーションを画像にする場合、気をつけたいのがliに記述している文字の扱いです。今回は文字も含めて画像にしているので、このままでは画像の文字とliに記述している文字がダブってしまい、画像の文字が読めなくなってしまいます。
ここで絶対にやってはいけなのが画像の文字を見せる為にliに記述している文字を消すという行為です。表示的にはダブっている文字が消えて綺麗に見えますが、文章構造上liの中身が空という事になってしまうので、絶対にNG
文章構造上liの中身は必須なので、CSSの方で文字を見えなくさせる記述をします。
方法はいくつかあります。以前は「text-indent: -999em;」と指定し、ものすごく左の方に文字を移動させる、という方法もありましたが、
現在最も使われている方法は、文字を右にずらし見えなくさせるという方法です。
#nav li a { display: block; width: ボタン幅; height: ボタン高さ; background: url(背景画像のパス) no-repeat; white-space: nowrap; text-indent: 100%; overflow: hidden; }
white-spaceプロパティは、ソース中の半角スペース・タブ・改行の表示の仕方を指定する際に使用します。
「 nowrap」はソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示し、ボックスの大きさが指定されている場合にも、自動的に改行されません。
