2017-03-15

レスポンシブサイトのナビボタンを画像で作る

前回の授業で作ったギャラリー部分とスライダーにナビゲーションを追加します。
レスポンシブサイトのナビゲーションを画像で作る場合、レスポンシブを加味した画像作りを心がけましょう。
また、今回のナビゲーションボタンの画像はCSSスプライトで作ります。
さらに参考サイトであるキリンのサイト同様、ボタンをホバーしたら、ボタン下部に▲とボーダーが出てくる設定にしましょう。

参考画像
f:id:yachin29:20170224131120p:plain

f:id:yachin29:20170224131213p:plain

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>

2017-03-09

モバイルファーストを意識したレスポンシブデザインサイトの制作 4

jQuery レスポンシブデザイン

ここまでで、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;
		 };
});

2017-03-08

モバイルファーストを意識したレスポンシブデザインサイトの制作 3

Webサイト制作レスポンシブデザイン

レスポンシブサイトのタブレット・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;
}

2017-03-08

ウィンドウサイズによって画像を切り替える

jQuery

レスポンシブサイトでは基本的に画像は可変に設定するべきですが、幅が960pxの時と幅が320pxの時とで同じ画像で良いか、というと必ずしもそうではありません。例えば画像に文章が乗っている場合であれば、なおさらです。
backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。

そこで今回は、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。

スマホサイトの時の画像名
「img_keyvisual_01_sp.jpg」

PCサイトの時の画像名
「img_keyvisual_01_pc.jpg」

この末尾のspとpcを変える事でウィンドウサイズに適した画像に差し替える事が出来ます。

「replaceWidth」で設定する値をもとに
ウィンドウサイズがそれ以上だったら画像ファイル名「_pc」が付いているものを表示し、
それ以下だったら画像ファイル名「_sp」が付いているものを表示します。

window.innerWidth

「window.innerWidth」とはブラウザウィンドウのビューポート (viewport) の幅を取得出来る。

thisと$thisの違い

「$(this)」はjQueryオブジェクト。
「this」はDOMエレメント。

違いを簡単に説明すると、イベントが発生した要素に対して、javaScriptのメソッドやプロパティを利用したい時は「this」利用し、jQueryで操作したい時は$(this)を利用してjQueryオブジェクトに変換してから利用する。
「this」の持つ情報はjavaScriptで操作できる「DOM要素」です。イベントで設定したfunction内で利用した場合はイベントが発生したDOM要素を指します。

www.jquerystudy.info

ウィンドウサイズによる画像置換を行いたい画像に「.switch」を追加

<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();
	});
});

2017-03-02

ドロワーメニュー

HTML5+CSS3

/*  ハンバーガーメニュー
---------------------------------------------------------- */

#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;
}

2017-02-24

メガドロップダウンメニューの導入

レスポンシブデザイン

最後にPC用のナビにメガドロップダウンメニューを入れます

f:id:yachin29:20160908004023p:plain

最近よく見かけるメガドロップダウンメニュー。特にコーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。
メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテンツにダイレクトに飛べるので、ユーザーの手間が省けるわけです。ユーザビリティの向上のためにも情報量の多いサイトであれば積極的に使っていきましょう。

メガドロップダウンメニューを採用しているサイト例
www.tiffany.co.jp

www.nike.com

www.kureha.co.jp

<nav class="pc-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a>
<div class="Wrap">
<div class="wrapInner">
</div><!-- /.wrapInner -->
</div><!-- /.Wrap -->
</li>

メガドロップダウンメニューのCSS

/*メガドロップメニュー*/
.pc-nav ul li .Wrap {
  position: absolute;
  top: 116px;
  left: 0;
  z-index: 100;
  overflow: hidden;
  display: none;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.6);
}
.Wrap .wrapInner {
  margin: 30px auto 0;
  width: 960px;
  height: 360px;
  background: #FFF;
  border-radius:8px;
}
.pc-nav ul li:hover:after{
  display:block;
  content: "";
  border: 10px solid transparent;
  border-bottom: 18px solid #fff;
  position: absolute;
  top: 120px;
  margin-left: 5%;
  z-index: 1000;
}

メガドロップダウンメニューのjQuery

$(function(){
  $('.pc-nav > ul > li').hover(function(){
    Panel = $(this).children('.Wrap');
    Panel.each(function(){
    Panel.css({display:'block',opacity:'0'}).stop().animate({opacity:'1'},200);
    });
  },function(){
    Panel.css({display:'none'});
  });
});

2017-02-24

既存サイトのトレース　ニュースリリース部分

レスポンシブデザイン

PCレイアウト
f:id:yachin29:20170224015445p:plain

タブレット（959px〜641px）
f:id:yachin29:20170613105423p:plain

スマホ時（640px以下）
f:id:yachin29:20170613105452p:plain

このようなニュースリリース部分はレスポンシブを考えるとul要素を使ってコーディングする方が簡単に出来るので、多くの場合はul・liで組まれていますが、文章構造的にはdl要素を使う方が良いでしょう。
なので、今回はdl要素を使って実際にコーディングして行きます。

ポイント

ddがdtの下に回り込まないようにする
dtとddで行数が違う場合にレイアウトが崩れないようにする
dtとddの高さを１行目で合わせる

スマホ時のポイント
スマホ時になると最新記事３つ以外は隠れていて、「もっと見る」ボタンをクリックすると表示されるようにしてみましょう。
この際に最新記事３つ以外にクラス名をつけるやり方もありますが、それでは運用効率が非常に悪いので、擬似クラス（nth）を使えるようになりましょう。
さらに、これはjQueryだけで無く、プログラム全般に言えることですが、動きをつける際にはまず「何をしたら」、「何が」、「どうなる」という事をしっかりと明確にしましょう。
また、jQueryで要素を取得する際には「ツリー構造」と「ノード」の考え方をしっかりと理解する必要があります。

Traversingメソッドを利用

Traversingのメリット

トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」から見てどういう関係性にある「要素」、という形で指定する事ができます。jQueryを使う上で非常に大事な考え方なので、しっかりと理解しましょう。

childrenメソッド
jQueryオブジェクトで指定した要素の「子」要素でセレクタにマッチする要素を選択します。子要素とは階層構造（入れ子構造）において直下にある要素のことです。
childrenメソッドを利用すれば「セレクタ：>（子要素）」と同じようなことが可能です。

parentメソッド
指定した要素の「親」要素を選択します。親要素とは階層構造（入れ子構造）において直上にある要素のことです。
名前が似ているparentsメソッドはparentメソッドと異なり「先祖」要素も選択します。

siblingsメソッド
指定した要素の兄弟要素（同じ階層の要素）を選択します。引数を設定しない場合はすべての兄弟要素を選択します。

f:id:yachin29:20170224130454p:plain