読者です 読者をやめる 読者になる 読者になる

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

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

モバイルファーストサイトの制作・PC部分を完成させる

レスポンシブデザイン

960px用のレイアウトに変更

960px以上のレイアウトは基本的にはタブレットと同じですが、タブレット時に「768px」と固定値で指定している部分を「960px」に書き換えましょう。また、グローバルナビの高さも画像本来の高さである55pxに変更させます。
その他もろもろの細かい箇所も適宜変更させていきましょう。

アコーディオンメニューをスマホ時のみに有効にする

今のままではタブレット・PC時もアコーディオンメニューの開閉が出来てしまうので、スマホ時のみに有効になるようにjQueryを書き換えましょう。

jQueryでの幅取得「window.innerWidth」

jQueryで要素の横幅を取得する方法は「width()」、「innerWidth()」、「outerWidth()」などがありますが、これらではブラウザのスクロールバーを除外した横幅しか取得されず、数px、CSSで設定しているブレイクポイントと数px誤差が出てきています。
なので、ブラウザーの幅を取得したい場合は「window.innerWidth」を使いましょう。


変更前

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


変更後

$('.toggle h2').on('click touchstart',function(){
if($(window).width() <= 767){ 
	$(this).siblings('dl').not(':animated').slideToggle(300);
	 $(this).find('span').toggleClass('close');//findはthis要素の子孫要素の中限定で指定
  };
		 return false;
});


また、

.resize( )

ブラウザのウインドウをリサイズした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたリサイズ時の処理を実行します。セレクタにはwindowsを指定しなければなりません(documentやhtmlでは機能しません)。



完成データ
<!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">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
</head>
<body>
<div id="container">
<header id="globalHeader">
<div class="inner">
<h1>株式会社ネットスマート</h1>
</div>
<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">
<ul class="bxslider">
  <li><img src="img/img_keyvisual_01_sp.jpg" class="switch"></li>
  <li><img src="img/img_keyvisual_02_sp.jpg" class="switch"></li>
  <li><img src="img/img_keyvisual_03_sp.jpg" class="switch"></li>
</ul>
</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="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><a href="#">セミナー<span class="plus-icon close"></span></a></h2>
<dl class="informationLink se"><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-->
</div><!--/columnWrapper-->


<section class="information toggle">
<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><!--/content-->

<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>
</div><!--/container-->
</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対応*/
}
a {
  color: #222;
}

#container {
    overflow-x:hidden;
    /*overflow: hidden;  overflow-xがダメな場合はこっち*/
    position:relative;
}
/*  レイアウト
---------------------------------------------------------- */
/*  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: 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: 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: 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;
}

.information 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);
}

/*レスポンシブデザイン用の追加記述*/
div.indexBoxes .captionBox{
  display: none;
}
div.indexBoxes h2 {
  font-size: 16px;
  font-weight: bold;
}
@media screen and (min-width:768px){

/*タブレットレイアウト*/
#globalHeader {
  border-bottom:nome;
  padding: 10px 0;
  overflow: visible;
}
.inner {
  width:768px;
  margin:0 auto;
}
#globalHeader h1 {
  width: 235px;
  height: 55px;
  float: none;
}

/*ナビゲーション部分*/
#globalHeader nav {
  background: url(../img/bg_nav_header.png) left top repeat-x;
  float: none;
  margin: 0;
  padding: 0;
}
#globalHeader nav p#menuToggle {
  display: none;
}

ul#menu {
  overflow: hidden;
  background: none;
  border: none;
  box-shadow: none;
  display: block;
  margin: 10px auto;
  width: 768px;
  height:44px;
  padding: 0;
  position: static; /*スマホ部分で使っているpositionのリセット*/
  transition:none;
}
ul#menu li {
  background: left top no-repeat;
  background-size: 100%;
  border: none;
  float: left;
  width: 25%;
}
ul#menu li a {
  border: none;
  display: block;
  height: 44px;
  padding: 0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
ul#menu li.service {
  background-image: url(../img/nav_header_service.png);
}
ul#menu li.proven {
  background-image: url(../img/nav_header_proven.png);
}
ul#menu li.corporate {
  background-image: url(../img/nav_header_corporate.png);
}
ul#menu li.recruit {
  background-image: url(../img/nav_header_recruit.png);
}
ul#menu li a:hover {
  background: #fff;
  opacity: 0.2;
}

/*content部分*/
#content {
  margin: 10px auto 0;
  width: 768px;
}
.alert {
  margin-top: 18px;
  padding: 10px;
}
/*タブパネル*/
#pickup ul.tab {
  display: none;
}
/*タブレット・PC時のみ表示させたいもの*/
#pickup h3,
#pickup div.tabContents,
div.indexBoxes div.captionBox {
  display: block;
}
#pickup {
  margin-top: 18px;
  padding: 0 18px 0;
  overflow: hidden;
}
#pickup h2 {
  font-size: 18px;
  padding: 10px 0;
}
#pickup div.tabContents {
  float: left;
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
}
#pickup div.round {
  border-radius: 10px;
}
#pickup div.tabContents p.text {
  margin: 10px 10px;
  line-height: 1.6;
}

/*indexBoxエリアのスタイル*/
.columnWrapper {
  overflow: hidden;
}
div.indexBoxes {
  float: left;
  margin-top: 20px;
  width: 68%;
}
div.indexBoxes ul {
  border: none;
  overflow: hidden;
}
div.indexBoxes ul li {
  float: left;
  margin-bottom: 12px;
  width: calc(50% - 20px);
  margin-right: 20px;
  border-top: none;
  background: none;
}
div.indexBoxes ul li a {
  padding: 0;
}
div.indexBoxes li h2 {
  border: 1px solid #CCC;
  box-sizing: border-box;
  border-radius: 5px;
  background-image: linear-gradient(to bottom, #ffffff, #efefef);
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-hegiht: 1;
  padding: 12px 10px;
  margin-bottom: 20px;
}
div.indexBoxes ul li a {
  background-image: none;
}
div.indexBoxes ul li img {
  float: left;
  border: 1px solid #ccc;
  padding: 3px;
  margin-right: 10px;
}
div.indexBoxes ul li p {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.4;
}

/*アコーディオン部分*/
section.seminar {
  float: right;
  width: 32%;
  margin-top: 20px;
  display:block;
}
 
section.information {
  border: none;
  margin-top: 18px;
  margin-bottom:30px;
  display:block;
}

section.seminar h2,
section.information h2 {
  border: 1px solid #ccc;
  border-radius: 5px;
}

dl.informationLink dt {
  padding: 0 10px;
  width: auto;
  line-height: 1.8;
}

dl.informationLink dd {
  background: none;
  border-top: none;
  border-bottom: 1px solid #ccc;
  line-height: 1.8;
}

dl.informationLink dd a {
  padding: 12px 10px;
}
 
section.information dl.informationLink dt {
  width: 8em;
}

section.information dl.informationLink dd a {
  padding-left: 10em;
}

.toggle h2 {
  cursor: default;
}

.information dl {
  display: block;
}

/*  Footer
---------------------------------------------------------- */
#globalFooter nav ul {
  width: 100%;
  margin: 0 auto;
}
#globalFooter nav ul li {
  border: none;
  box-sizing: border-box;
  float: left;
  text-align: center;
  width: auto;
  width:25%;
}
#globalFooter nav ul li a {
  display: block;
  padding: 20px 0;
  font-size:14px;
}
#globalFooter nav ul li:nth-child(odd) {
  border: none;
  clear:none;
}
#globalFooter nav ul li:nth-child(even) {
  border-right: none;
  margin-left: 0;
}

.plus-icon  {
  display:none;
}
}
@media screen and (min-width:960px){
.inner {
  width:960px;
}
ul#menu {
    width: 960px;
    height:55px;
}
ul#menu li a {
  height: 55px;
}
#content {
  width: 960px;
}
}

javascript

// JavaScript Document

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


  // ヘッダーメニュー
  $("#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;
});*/
	

$('.toggle h2').on('click touchstart',function(){
if($(window).innerWidth() <= 767){ //仮
	$(this).siblings('dl').not(':animated').slideToggle(300);
	 $(this).find('span').toggleClass('close');//findはthis要素の子孫要素の中限定で指定
  };
 return false;
});

$(window).resize(function(){
	  $('dl.informationLink').hide();//スマホの時
if($(window).innerWidth() > 767){ 
      $('dl.informationLink').show();//タブレット以上の時
		$('.information span').removeClass('close');//PCから戻る時に邪魔な.closeを削除するため
    } else {
       $('dl.informationLink').hide();//タブレット以上の時
      $('dl.se').show();
    }
});

});