求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

モバイルファーストサイトの制作 jQuery部分の導入

授業で制作を進めているモバイルファーストを意識したRWDサイト(netsmart)のモバイルサイト部分を完成させましょう。

完成例

今回組み込むjQuery

  • キービジュアルのスライド(bxslider)
  • タブパネル
  • アコーディオンパネル
  • ハンバーガーメニュー

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ネットスマート|モバイルサイト</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no">
<link rel="apple-touch-icon" href="touch-icon.png">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/script.js"></script>

</head>
<body>
<header id="globalHeader">
<h1>株式会社ネットスマート</h1>
<nav>
<p id="menuToggle">メニュー<a href="#" id="btn">
<span id="btn-icon"></span></a></p>
<ul id="menu">
  <li class="service"><a href="#"><div>サービス紹介</div></a></li>
  <li class="proven"><a href="#"><div>実績紹介</div></a></li>
  <li class="corporate"><a href="#"><div>会社概要</div></a></li>
  <li class="recruit"><a href="#"><div>採用情報</div></a></li>
</ul>
</nav>
</header>

<div id="content">
<div id="slide">
<div><img src="img/img_keyvisual_01.jpg" alt="#" class="switch"></div>
</div><!--/slide-->

<div class="alert">
<ul>
  <li><a href="#"><div>メンテナンスのお知らせ</div></a></li>
</ul>
</div><!--/alert-->

<section id="pickup">
<h2>サービスピックアップ</h2>
<ul class="tab">
  <li class="current"><a href="#cms">CMS</a></li>
  <li><a href="#seo">SEO</a></li>
  <li><a href="#social">ソーシャル</a></li>
</ul>
<div class="tabContents current" id="cms">
<div class="round">
<p><a href="#"><img src="img/img_pickup_cms.png" alt="CMS"></a></p>
</div><!--/round-->
<p class="text">低価格&amp;高機能なCMS導入。<br>充実の管理画面でサイト運用を効率的に。</p>
</div><!--/tabContents-->

<div class="tabContents" id="seo">
<div class="round">
<p><a href="#"><img src="img/img_pickup_seo.png" alt="SEO"></a></p>
</div><!--/round-->
<p class="text">検索ワードを短期間で上位表示。<br>スマートフォンサイトにも対応します。</p>
</div><!--/tabContents-->

<div class="tabContents" id="social">
<div class="round">
<p><a href="#"><img src="img/img_pickup_social.png" alt="ソーシャル"></a></p>
</div><!--/round-->
<p class="text">Facebookページ作成からソーシャルメディアマーケティングまで幅広く支援致します。</p>
</div><!--/tabContents-->
</section> <!--pickup-->

<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-->

<section class="seminar toggle">
<h2><a href="#">セミナー<span class="plus-icon close"></span></a></h2>
<dl class="informationLink"><h5></h5>
<dt>2016年8月11日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年7月19日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年7月14日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年7月10日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
<dt>2016年6月29日</dt><dd><a href="#">テキストテキストテキストテキストテキスト</a></dd>
</dl>
</section><!--/seminar-->

<section class="information toggle hidden">
<h2><a href="#">お知らせ<span class="plus-icon"></span></a></h2>
<dl class="informationLink">
  <dt>2016年3月18日</dt><dd><a href="#">採用情報を更新しました</a></dd>
  <dt>2016年3月11日</dt><dd><a href="#">実績紹介を更新しました</a></dd>
  <dt>2016年3月1日</dt><dd><a href="#">サービスが紹介されました</a></dd>
  <dt>2016年2月25日</dt><dd><a href="#">社内ブログを開設しました</a></dd>
</dl>
</section><!--/information-->
</div><!--/body-->

<footer id="globalFooter">
<nav>
<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>
</nav>
<p id="copyright"><small>&copy;2016 Net Smart Co., Ltd. All rights Reserved.</small></p>
</footer>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p,
address,ul, ol, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}


/*  共通部分
---------------------------------------------------------- */
body {
  color: #222;
  font: 14px/1.3 ; /*font指定のショートハンド*/
  -webkit-text-size-adjust: 100%; /*古いIOS対応*/
  overflow-x:hidden;
}
a {
  color: #222;
}


/*  レイアウト
---------------------------------------------------------- */
/*  Header  */
#globalHeader {
  background: linear-gradient(to bottom,#E8EAF6, #ffffff); /*W3C*/
  border-bottom: 1px solid #ccc;
  padding: 10px 5px;
  overflow:hidden;
}
#globalHeader h1 {
  width: 120px;
  float: left;
  background: url(../img/logo.png) no-repeat;
  background-size: contain;
  padding: 5px 0 0 5px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
/*  content  */
#slide img {
  max-width: 100%; /*フルードイメージ*/
}

/* Alert */
.alert {
  background: #ddd;
  padding: 10px;
}
.alert ul {
  background: #fff;
  border: 1px solid #ababab;
  border-radius: 5px;
}
.alert ul li a {
  background: url(../img/icon_alert_2x.png) no-repeat 10px 10px; /*最初から高画質ディスプレイ用に大きいサイズを使用*/
  display: block;
  padding: 12px 20px 12px 40px;
  background-size: 21px;
}

/* Pick Up */
#pickup {
  background:#5C6BC0;
  color: #fff;
  padding: 5px;
}
#pickup h2 {
  color: #fff;
  font-size: 14px;
  padding: 10px 5px;
}
#pickup ul.tab {
  display: table; /*表組みのようなレイアウトになる*/
  width: 100%;
}
#pickup ul.tab li {
  display: table-cell;
  width: 33.33%;
}
#pickup ul.tab li a {
  background: -webkit-linear-gradient(top, #eeedf2, #717171 4%, #2b2b2b 74%);
  background: linear-gradient(to bottom, #eeedf2, #717171 4%, #2b2b2b 74%);
  border: 1px solid #444444;
  border-bottom: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: #fff;
  display: block;
  font-weight: bold;
  margin: 0 2px;
  padding: 10px 0;
  text-align: center;
}
#pickup ul.tab li.current a {
  background: -webkit-linear-gradient(top, #e9e9e9 0%, #ffffff 29%);
  background: linear-gradient(to bottom, #e9e9e9 0%, #ffffff 29%);
  color: #000;
}
#pickup div.tabContents {
  display: none;
  padding: 0 3px; /*ul.tab liに指定したmarginとborderの分、かさを増す*/
}
#pickup div.tabContents.current {
  display: block;
}

#pickup div.round {
  background: -webkit-linear-gradient(top, #fff 14%, #dfdddd 100%);
  background: linear-gradient(to bottom, #fff 14%, #dfdddd 100%);
  border: 1px solid #fff;
  border-radius: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 10px;
  text-align: center;
}

#pickup div.round a {
  background: url(../img/icon_arrow_black_large.png) no-repeat 100% 50%;
  display: block;
}
#pickup .tabContents p.text {
  margin: 10px;
}
.indexBoxes {
  margin: 0 0 20px 0;
}
div.indexBoxes ul {
  border-bottom: 1px solid #ccc;
}

.indexBoxes ul li,
section.seminar h2,
section.information h2 {
  background: linear-gradient(to bottom, #ffffff, #efefef);
  border-top: 1px solid #ccc;
}
.indexBoxes ul li a {
  display: block;
  background: url(../img/icon_arrow_black.png) no-repeat 100% 50%;
  font-size: 16px;
  font-weight: bold;
  line-hegiht: 1;
  padding: 12px 10px;
}
.seminar h2 a, .information h2 a {
  display:block;
  font-size: 16px;
  font-weight: bold;
  line-hegiht: 1;
  padding: 12px 10px;
  position: relative;
}

dl.informationLink dt {
  clear: left;
  color: #777;
  float: left;
  margin-top: 12px;
  padding-left: 10px;
  width: 8em;
  z-index: 1;
}
dl.informationLink dd {
  background: url(../img/icon_arrow_gray.png) no-repeat 100% 50%;
  border-top: 1px solid #ccc;
  z-index:10;
}
dl.informationLink dd a {
  display: block;
  margin: 0;
  padding: 12px 30px 12px 10em;
}

.toggle.hidden dl {
display:none;
}

/*  Footer
---------------------------------------------------------- */
#globalFooter nav ul {
  background: #eaeaea;
  overflow: hidden;
}
#globalFooter nav ul li {
  border: 1px solid #ccc;
  border-bottom: none;
  box-sizing: border-box;
  float: left;
  text-align: center;
  width: 50%;
}
#globalFooter nav ul li a {
  display: block;
  padding: 10px 0;
}

#globalFooter nav ul li:nth-child(odd) {
  border-left: none;
  clear: left;
}

#globalFooter nav ul li:nth-child(even) {
  border-right: none;
  margin-left: -1px;
}

#globalFooter p#copyright {
  background:#3F51B5;
  color: #fff;
  padding: 15px 0;
  text-align: center;
}


/*  ドロップダウンメニュー
---------------------------------------------------------- */
#globalHeader nav {
  float: right;
}
#globalHeader nav p#menuToggle {
  display: block;
  background: #333;
  border: 1px solid #444;
  border-radius: 5px;
  color: #fff;
  line-height: 36px;
  padding-left: 6px;
  position:relative;
  z-index:9999;
}
#btn {
  float: right;
  background-image: url(../img/bg_line.png);
  background-position: 0 60%;
  background-repeat: repeat-y;
  background-size: 2px auto;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  padding-left: 20px;
  margin-left: 10px;
}
#btn-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  margin: -1px 0 0 -11px;
  transition: .2s;
  background: #FFF;
}
#btn-icon:before, #btn-icon:after {
  display: block; content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  background: #FFF;
  transition: .3s;
}
#btn-icon:before {
  margin-top: -8px;
}
#btn-icon:after {
  margin-top: 6px;
}
#btn .close {
  background: transparent;
}
#btn .close:before, #btn .close:after {
  margin-top: 0;
}
#btn .close:before {
  transform: rotate(-45deg);
}
#btn .close:after {
  transform: rotate(-135deg);
}

/*クリックしたら出てくるメニュー部分*/
ul#menu {
  background: #333;
  border-bottom: 1px solid #000;
  position: absolute;
  right:-100%;
  top: 59px;
  width: 100%;
  height:100vh;
  z-index: 999;
  transition:0.4s;
}
ul#menu.drow {
  right:0;
}
ul#menu li {
  border-top: 1px solid #000;
}
ul#menu li a {
  border-top: 1px solid #666;
  color: #fff;
  display: block;
  padding: 10px;
}
ul#menu li:first-child,
ul#menu li:first-child a {
  border-top: none;
}

/*+ボタン*/
.plus-icon {
  display: block;
  width: 24px;
  height: 2px;
  background: #222;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -1px;
  transition: 0.2s;
}
.plus-icon:after {
  display: block;
  content: "";
  width: 24px;
  height: 2px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top:-1px;
  background: #222;
  transform: rotate(90deg);
  transition: 0.4s;
}

/*マイナスボタンの記述*/
.plus-icon.close {
  background: transparent;
}
.plus-icon.close:after {
  transform: rotate(0);
}



@media screen and (min-width:641px){
/*タブレット時*/

}
@media screen and (min-width:960px){
/*PC時のレイアウト*/
}

javascript

// JavaScript Document

$(function(){

  // ヘッダーメニュー
  $("#btn").on('click touchstart',function() {
    $("#menu").toggleClass('drow'); //ドロワーメニューのクラス移動
    $("#btn-icon").toggleClass("close");//ハンバーガーメニュー用
    return false;
  });


  // タブパネル
  $('.tab a').on('click touchstart',function(){ //#pickupの中の.tab a
    $(this).parent().addClass('current').siblings('.current').removeClass('current');/*#pickupの中の.tabの中のaがthisで、クリックされるとa要素の親要素のliにクラス名currentがaddされる。さらにもし他のliに既にクラス名currentが付いている場合は削除する*/
    var tabTarget = $(this).attr('href');
    $( tabTarget ).addClass('current').siblings('.current').removeClass('current');
    return false;
  });

 // アコーディオン
$('.toggle h2').on('click touchstart',function(){
 $(this).siblings('dl').slideToggle(300);
		 $(this).find('span').toggleClass('close');//findはthis要素の子孫要素の中限定で指定
		 return false;
});
	
	
	
});