制作したデータをインターネット上で表示させるためには作ったデータをサーバーにアップロードする必要があります。
サーバーには無料のものと有料のものがありますが、授業では無料サーバーを使用していきます。
webサイト制作においてサーバーは必須のものです。今のうちからサーバーへのアップロードに慣れておきましょう。
無料レンタルサーバーは世の中に沢山ありますが、授業では「webcrow」「xdomain」の２つを使用します。
（※ウェブクロウは、無料で機能を拡張できるオプションサービスが「PHP・MySQLオプション」と「容量増加オプション」の２つ用意されていますが、必ず「PHP・MySQLオプション」を選びましょう。）
今回は以前作った既存サイト（キリン）の二ユースリリース部分に「もっと見る」ボタンを作り、さらにそのボタンのテキストをslideToggleの動きに合わせて「もっと見る」と「閉じる」に切り替えます。
以前はtoggleイベントを利用する事で簡単にスイッチが作成できたのですが、v1.9で廃止されてしまったため、今回はフラグを使って、slideToggleの動きに合わせたスイッチを作ります。
フラグが「close」であれば、テキストを「閉じる」、フラグが「open」であれば、テキストを「もっと見る」に差し替える、というスイッチを作ります。
slideToggleの場合であれば、「display:block」と「display:none」の状態を取得してテキストを切り替える事が可能です
$(function(){ $('p.more').on('click', function() { $(this).siblings('dl').children('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').slideToggle(0); if($(this).siblings('dl').children('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').css('display') == 'block'){ $(this).text('閉じる'); }else{ $(this).text('もっと見る'); }; }); });
さらに余裕があれば、「load」「 resize」メソッドを使って、可変に対応させて見ましょう。
$(window).on('load resize',function(){ if($(window).innerWidth() <= 640){ $('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').css('display','none'); $('.more').on('click', function() { $(this).siblings('dl').children('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').slideToggle(0); if($('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').css('display') == 'block'){ $(this).text('閉じる'); }else{ $(this).text('もっと見る'); }; }); }else { $('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').css('display','block'); }; });
作例
前回の授業で作ったギャラリー部分とスライダーにナビゲーションを追加します。
レスポンシブサイトのナビゲーションを画像で作る場合、レスポンシブを加味した画像作りを心がけましょう。
また、今回のナビゲーションボタンの画像はCSSスプライトで作ります。
さらに参考サイトであるキリンのサイト同様、ボタンをホバーしたら、ボタン下部に▲とボーダーが出てくる設定にしましょう。
参考画像
nav要素の高さ：50px
li要素の高さ：30px
ホバーしたら出てくるborderの幅：3px
以前はPC用とSP用に２つのnav要素を用意して、display:block と display:none で表示・非表示をコントロールしていましたが、今回は１つのnav要素でPC・SP共に使いまわす方法を取ります。もちろん「display:none」がNGでは無いですが、安易に「display:none」を使うのを辞めようという流れがあるのも事実です。
なので、ケース・バイ・ケースで常に両方の選択肢を持てるようにしましょう。
今回はこのナビゲーションにメガドロップダウンメニューを入れるので、授業ではPC用とSP用に２つのnav要素を用意する方法で進めますが、余裕のある人は自宅などで１つのnav要素のパターンもやって見て下さい。
2つのnav要素のパターン
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>レスポンシブでのCSSスプライト</title> <meta name="viewport" content="width=device-width"> <style> html,body,ul,li { margin:0; padding:0; line-height:1.0; } ul { list-style:none; } a { text-decoration:none; } .pc-nav { width:100%; height:50px; margin-top:50px; border-bottom:1px solid #999999; } .pc-nav ul { width:960px; margin: 0 auto; overflow:hidden; height:50px; } .pc-nav li { width:16.66%; height:30px; float:left; 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:50px; text-indent:100%; white-space:nowrap; overflow:hidden; background: url(img/nav.png) no-repeat center top; } .pc-nav li.nav2 a { background-position:center -50px; } .pc-nav li.nav3 a { background-position:center -100px; } .pc-nav li.nav4 a { background-position:center -150px; } .pc-nav li.nav5 a { background-position:center -200px; } .pc-nav li.nav6 a { background-position:center -250px; } .pc-nav li a:hover { line-height:47px; border-bottom:3px solid #FF0000; } .pc-nav li.nav1 a:hover { background: url(img/nav_h.png) no-repeat center top; } .pc-nav li.nav2 a:hover { background: url(img/nav_h.png) no-repeat center -50px; } .pc-nav li.nav3 a:hover { background: url(img/nav_h.png) no-repeat center -100px; } .pc-nav li.nav4 a:hover { background: url(img/nav_h.png) no-repeat center -150px; } .pc-nav li.nav5 a:hover { background: url(img/nav_h.png) no-repeat center -200px; } .pc-nav li.nav6 a:hover { background: url(img/nav_h.png) no-repeat center -250px; } .sp-nav { display:none; } @media screen and (max-width:959px) { .pc-nav ul { width:100%; padding:0 1%; box-sizing:border-box; } } @media screen and (max-width:640px) { .pc-nav { display:none; } .sp-nav { display:block; width:100%; } .sp-nav ul { width:100%; overflow:hidden; height:122px; } .sp-nav li { width:50%; height:40px; float:left; position:relative; } .sp-nav li a { display:block; font-size:13px; line-height:40px; color:#222; padding-left:30px; box-sizing:border-box; border-bottom: 1px solid #999999; } .sp-nav li:nth-child(even) a { border-left:1px solid #999999; } .sp-nav li a:after { display:block; content:""; width:2px; height:16px; background:#F00; position:absolute; top:12px; left:10px; } .sp-nav li a:hover { text-decoration: underline; } } </style> </head> <body> <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--> <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><!--/sp-nav--> </body> </html>
1つのnav要素のパターン
htmlファイル
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>レスポンシブでのCSSスプライト</title> </head> <body> <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--> </body> </html>
CSSファイル
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>レスポンシブでのCSSスプライト</title> <meta name="viewport" content="width=device-width"> <style> /* 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 { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ color: #222; } img { border: none; } img, input { vertical-align: bottom; } .pc-nav { margin-top:50px; height: 50px; border-bottom:1px solid #999; } .pc-nav ul { width:960px; margin: 0 auto; overflow: hidden; height:50px; } .pc-nav li { float: left; height: 30px; width: 16.66%; 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: 50px; white-space: nowrap; text-indent: 100%; overflow: hidden; } .pc-nav li.nav1 a { background: url(img/nav.png) no-repeat center top; } .pc-nav li.nav2 a { background:url(img/nav.png) no-repeat center -50px; } .pc-nav li.nav3 a { background:url(img/nav.png) no-repeat center -100px; } .pc-nav li.nav4 a { background:url(img/nav.png) no-repeat center -150px; } .pc-nav li.nav5 a { background:url(img/nav.png) no-repeat center -200px; } .pc-nav li.nav6 a { background:url(img/nav.png) no-repeat center -250px; } .pc-nav li a:hover { line-height: 47px; border-bottom:solid 3px #ed0200; } .pc-nav li.nav1 a:hover { background: url(img/nav_h.png) no-repeat center top; } .pc-nav li.nav2 a:hover { background:url(img/nav_h.png) no-repeat center -50px; } .pc-nav li.nav3 a:hover { background:url(img/nav_h.png) no-repeat center -100px; } .pc-nav li.nav4 a:hover { background:url(img/nav_h.png) no-repeat center -150px; } .pc-nav li.nav5 a:hover { background:url(img/nav_h.png) no-repeat center -200px; } .pc-nav li.nav6 a:hover { background:url(img/nav_h.png) no-repeat center -250px; } @media screen and (max-width:959px){ .pc-nav { width:98%; padding:0 1%; } @media screen and (max-width:640px){ .pc-nav { width:100%; height:120px; margin:0; border-bottom:none; } .pc-nav ul { width: 100%; height: 120px; overflow:hidden; } .pc-nav li { width: 50%; height:40px; border-right: none; box-sizing: border-box; border-bottom: 1px solid #CCC; } .pc-nav li:first-child { border-left: none; box-sizing: border-box; } .pc-nav li a { display: block; line-height: 40px; white-space: normal; text-indent: 0; overflow: visible; padding-left: 30px; box-sizing: border-box; font-size:14px; position:relative; } .pc-nav li a:before { display:block; content:""; position: absolute; top:10px; left:20px; width:2px; height:20px; background:#F00; } .pc-nav li.nav1 a { background: none; } .pc-nav li.nav2 a { background: none; } .pc-nav li.nav3 a { background: none; } .pc-nav li.nav4 a { background: none; } .pc-nav li.nav5 a { background: none; } .pc-nav li.nav6 a { background: none; } .pc-nav li a:hover { line-height: 40px; background: none; border-bottom:none; text-decoration: underline; } .pc-nav li.nav1 a:hover, .pc-nav li.nav2 a:hover, .pc-nav li.nav3 a:hover, .pc-nav li.nav4 a:hover, .pc-nav li.nav5 a:hover, .pc-nav li.nav6 a:hover { background: none; } .pc-nav li:nth-child(odd) { border-right: 1px solid #999999; } } </style> </head> <body> <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--> </body> </html>
ここまでで、PC時のレイアウトも含めほぼ完成ですが、今のままだとPC時にもjQueryのアコーディオンパネルが動いてしまうので、if文でウィンドウサイズがスマホサイズの時のみに動くように条件分岐をしてみましょう。
また、スマホの機種によっては、「touchstart」の動きが安定しない為、タップした際にアコーディオンパネルが開いて閉じる、という挙動になってしまうので、アコーディオンパネルのようにslideToggleを使う場合はアニメーションが実行中はアニメーションの処理を受け付けないようにしましょう。
元のアコーディオンパネルの記述
// アコーディオン $('.toggle').find('h2').on('click touchstart',function(){ $(this).siblings('dl').slideToggle(300, function(){ $(this).parent().toggleClass('close'); }); });
新しい記述
スマホサイズの時のみに動くようにif文と.not(':animated')を追加
// アコーディオン $('.toggle h2').on('click',function(){ if( $('body').width() <= 640){ $(this).siblings('dl').not(':animated').slideToggle(300); $(this).find('span').toggleClass('close'); return false; }; });
レスポンシブサイトのタブレット・PCレイアウトを完成させます。
作例
http://yachin29.webcrow.jp/sp-pc/
タブレット・PCレイアウトを完成させる為に行うこと
HTMLにタブレット・PC専用のコンテンツを挿入する。
ブレイクポイントを指定し、タブレット・PC用のスタイルを新規作成したCSSファイルに記述する。
アコーディオンパネルをタブレット・PCでは動かないようにする。
HTMLファイルにタブレット・PC用のコンテンツを追加する為に「div class="indexBoxes"」部分の記述を一部変更します。
変更前の「div class="indexBoxes"」部分の記述
<div class="indexBoxes"> <ul> <li><a href="#"><div>サービス紹介</div></a></li> <li><a href="#"><div>実績紹介</div></a></li> <li><a href="#"><div>会社概要</div></a></li> <li><a href="#"><div>採用情報</div></a></li> </ul> </div><!--/indexBoxes-->
変更後
<div class="columnWrapper"><!--レスポンシブ用のwrapper--> <div class="indexBoxes"> <ul> <li><a href="#"><h2>サービス紹介</h2> <div class="captionBox"><img src="img/img_index_service.jpg" alt="サービス紹介"> <p>全てのインターネットユーザーにスマートさを。</p></div></a> </li> <li><a href="#"><h2>実績紹介</h2> <div class="captionBox"><img src="img/img_index_proven.jpg" alt="実績紹介"> <p>これまでに手がけたサービス、制作事例をご紹介します。</p></div></a> </li> <li><a href="#"><h2>会社概要</h2> <div class="captionBox"><img src="img/img_index_corporate.jpg" alt="会社概要"> <p>企業沿革、コーポレートメッセージなどご紹介します。</p></div></a> </li> <li><a href="#"><h2>採用情報</h2> <div class="captionBox"><img src="img/img_index_recruit.jpg" alt="採用情報"> <p>私たちの理念に共感でき、ともに未来を創っていける仲間を募集しております。</p></div></a> </li> </ul> </div><!--/indexBoxes--> <section class="seminar toggle"> <h2><span>セミナー</span></h2> <dl class="informationLink"> <dt>2015年11月11日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2015年10月19日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2015年10月14日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2015年10月10日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> <dt>2015年9月29日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd> </dl> </section><!--/seminar--> </div><!--/columnWrapper-->
/*レスポンシブデザイン用の追加記述*/ div.indexBoxes .captionBox{ display: none; } div.indexBoxes h2 { font-size: 16px; font-weight: bold; }
レスポンシブサイトでは基本的に画像は可変に設定するべきですが、幅が960pxの時と幅が320pxの時とで同じ画像で良いか、というと必ずしもそうではありません。例えば画像に文章が乗っている場合であれば、なおさらです。
backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。
そこで今回は、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。
スマホサイトの時の画像名
「img_keyvisual_01_sp.jpg」
PCサイトの時の画像名
「img_keyvisual_01_pc.jpg」
この末尾のspとpcを変える事でウィンドウサイズに適した画像に差し替える事が出来ます。
「replaceWidth」で設定する値をもとに
ウィンドウサイズがそれ以上だったら画像ファイル名「_pc」が付いているものを表示し、
それ以下だったら画像ファイル名「_sp」が付いているものを表示します。
「window.innerWidth」とはブラウザウィンドウの ビューポート (viewport) の幅を取得出来る。
違いを簡単に説明すると、イベントが発生した要素に対して、javaScriptのメソッドやプロパティを利用したい時は「this」利用し、jQueryで操作したい時は$(this)を利用してjQueryオブジェクトに変換してから利用する。
「this」の持つ情報はjavaScriptで操作できる「DOM要素」です。イベントで設定したfunction内で利用した場合はイベントが発生したDOM要素を指します。
<img src="img/img_keyvisual_01_sp.jpg" alt="#" class="switch">
jQueryの記述
$(function(){ //ウィンドウサイズによる画像置換 var sizeChange = $('.switch'), // 置換の対象とするclass属性。 pcName = '_pc', // 置換の対象とするsrc属性の末尾の文字列 spName = '_sp',// 置換の対象とするsrc属性の末尾の文字列 replaceWidth = 641; // 画像を切り替えるウィンドウサイズ。 sizeChange.each(function(){ var $this = $(this); function imgSize(){ if(window.innerWidth > replaceWidth) { // ウィンドウサイズが641px以上であれば_spを_pcに置換する。 $this.attr('src',$this.attr('src').replace(spName,pcName)); } else { $this.attr('src',$this.attr('src').replace(pcName,spName)); } } $(window).resize(function(){imgSize();}); imgSize(); }); });
/* ハンバーガーメニュー ---------------------------------------------------------- */ #globalHeader nav { float: right; } #globalHeader nav p#menuToggle { background: -webkit-linear-gradient(top, #eeedf2 1%, #717171 4%, #2b2b2b 84%);/*古いAndroid用*/ background: linear-gradient(to bottom, #eeedf2 1%, #717171 4%, #2b2b2b 84%);/*W3C標準*/ border: 1px solid #444; border-radius: 5px; color: #fff; line-height: 36px; padding-left: 6px; } #hum-btn { display:block; float: right; background: url(../img/bg_line.png) repeat-y 0 60%/2px auto; position: relative; width: 36px; height: 36px; border-radius: 5px; padding-left: 20px; margin-left: 10px; } #hum-btn-icon { display: block; position: absolute; top:0; left:0; bottom:0; right:0; margin:auto; width: 22px; height: 2px; transition: .2s; background: #FFF; } #hum-btn-icon:before, #hum-btn-icon:after { display: block; content: ""; position: absolute; top:0; left:0; bottom:0; right:0; margin:auto; width: 22px; height: 2px; background: #FFF; transition: .3s; } #hum-btn-icon:before { top: -14px; } #hum-btn-icon:after { top: 14px; } #hum-btn .close { background: transparent; } #hum-btn .close:before, #hum-btn .close:after { top: 0; } #hum-btn .close:before { transform: rotate(-45deg); } #hum-btn .close:after { transform: rotate(-135deg); } #globalHeader nav ul { display:none; } /*クリックしたら出てくるメニュー部分*/ ul#drawer { background: #333; border-bottom: 1px solid #000; position: absolute; left: 0; top: 50px; width: 100%; z-index: 99999; } ul#drawer li { border-top: 1px solid #000; } ul#drawer li a { border-top: 1px solid #666; color: #fff; display: block; padding: 10px; } ul#drawer li:first-child, ul#drawer li:first-child a { border-top: none; }
