考え、感じる、Web制作。

Web制作の学習や情報についての記事が中心です。

スマートフォン専用サイト制作 応用 第2回

スマートフォン用サイト

スマートフォン専用サイト制作 応用編 続き

前回に引き続き、jQuerryの記述を追加していく。

flexslider

トップの画像(キービジュアル)は3枚用意し、flexsliderというjQueryで切り替えてい
く。まずファイルを取得し、headに.jsを指定する。

<script src="./shared/js/jquery-1.8.2.min.js"></script>
<script src="shared/js/jquery.flexslider.js"></script>
<script src="./shared/js/script.js"></script>
flexslider用のhtml

htmlに#flexsliderのdivを追記し、liで画像を3つ指定する。

    <div id="slide">
    <div class="flexslider">
    <ul class="slides">
     <li><img src="./shared/images/img_keyvisual_01.jpg" alt="よりスマートなインターネットライフを。"></li>
     <li><img src="./shared/images/img_keyvisual_02.jpg" alt="よりスマートなインターネットライフを。"></li>
     <li><img src="./shared/images/img_keyvisual_03.jpg" alt="よりスマートなインターネットライフを。"></li>
     </ul>
      </div><!--/.flexslider-->
    </div><!--/#slide-->
script記述

headにflexslider用のscriptを記述する。animationの値をfadeなどに書き換えれば、画
像切り替えエフェクトが変更できる。

<script>
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
  });
});
</script>

検索バーとメニューを追加

サイト内検索機能とドロップダウンメニューを追加する。

  <header id="globalHeader">
    <h1><img src="./shared/images/logo.png" alt="株式会社ネットスマート" width="118"></h1>
       <div class="search">
<div class="search">
      <p id="searchToggle"><img src="./shared/images/icon_search.png" alt="検索" width="20"></p>
      <div class="form">
        <form>
          <span><input type="search" name="q" placeholder="サイト内検索"></span>
          <span><button>検索</button></span>
        </form>
      </div>
    </div>
    
    <nav class="menu">
      <p id="menuToggle"><span>メニュー</span></p>
      <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>
  </header>

ドロップダウンメニュー、検索バーのcss

ドロップダウンメニューのcssを記述する。

android用の対策css

androidに対するプルーフで、タップした箇所は全レイヤーにアップアクションが反映されてしまう。この記述でそれを回避し、最上位のレイヤーだけがタップアクションの範疇となる。

body.removeHighlight{
  -webkit-tao-highlight-color:rgba(0,0,0,0);
}
ドロップダウンメニュー、検索バーのcss続き

上記のandroid対策用cssに続き、下記を記述する。

#globalHeader {
  padding-bottom: 0;
}
#globalHeader nav,
#globalHeader div.search {
  float: right;
  margin: 0 0 0 5px;
}
#globalHeader nav ul,
#globalHeader div.search div.form {
  display: none;
}

#globalHeader nav p#menuToggle,
#globalHeader div.search p#searchToggle,
#globalHeader div.search div.form button {
  background: #2b2b2b;
  background: linear-gradient(to bottom, #eeedf2 1%, #717171 4%, #2b2b2b 84%);
  border: 1px solid #444;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-weight: bold;
  padding: 7px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 1), 1px 1px 1px rgba(0, 0, 0, 1);
}
#globalHeader nav {
  padding-bottom: 10px;
}
#globalHeader nav p#menuToggle {
  line-height: 23px;
  padding: 5px 10px;
  width: 100px;
}

#globalHeader nav p#menuToggle span {
  background-image: url(../images/icon_arrow_down_white.png), url(../images/bg_line.png);
  background-position: 100% 50%, 75px 50%;
  background-repeat: no-repeat, repeat-y;
  background-size: auto auto, 2px auto;
  display: block;
  padding-left: 9px;
}

#globalHeader nav.open {
  display: block;
  background: url(../images/bg_dropdown.png) no-repeat 90% 100%;
  background-size: 12px;
}

#globalHeader nav.open ul {
  background: #333;
  border-bottom: 1px solid #000;
  box-shadow:0 3px 5px 0px rgba(0, 0, 0, 0.4);
  display: block;
  left: 0;
  position: absolute;
  top: 55px;
  width: 100%;
  z-index: 99;
}

#globalHeader nav.open ul li {
  border-top: 1px solid #000;
}

#globalHeader nav.open ul li a {
  border-top: 1px solid #666;
  color: #fff;
  display: block;
  padding: 10px;
}

#globalHeader nav.open ul li:first-child,
#globalHeader nav.open ul li:first-child a {
  border-top: none;
}

#globalHeader div.search {
  padding-bottom: 10px;
}

#globalHeader div.search.open {
  background: url(../images/bg_dropdown.png) no-repeat 50% 100%;
  background-size: 12px;
}

#globalHeader div.search.open div.form {
  display: block;
}

#globalHeader div.search p#searchToggle {
  font-size: 1px;
  line-height: 0;
}

#globalHeader div.search p#searchToggle img {
  vertical-align: top;
}


#globalHeader div.search div.form {
  background: #333;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.3);
  box-shadow:0 3px 3px 0px rgba(0, 0, 0, 0.3);
  left: 0;
  padding: 10px;
  position: absolute;
  top: 55px;
  width: 100%;
  z-index: 99;
}

#globalHeader div.search form {
  display: table;
  width: 100%;
}

#globalHeader div.search form span {
  display: table-cell;
}

#globalHeader div.search form span:last-child {
  padding-left: 10px;
  width: 60px;
}

#globalHeader div.search form input[type="search"] {
 -webkit-appearance: textfield;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-size: 14px;
  padding: 7px 5px;
  width: 100%;
}

#globalHeader div.search form button {
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 14px;
  padding-left: 0;
  padding-right: 0;
  width: 60px;
}

@media screen and (-webkit-min-device-pixel-ratio:2){
  #globalHeader nav p.menu span {
    background-image: url(../images/icon_arrow_down_white_2x.png), url(../images/bg_line.png);
    background-size: 10px 6px, 1px auto;
  }
}

タブパネル

サービスピックアップ部をタブパネル機能を追加する。

      <div class="tabContents current" id="cms">
        <div class="round">
          <p><a href="#"><img src="./shared/images/img_pickup_cms.jpg" width="190" alt="CMS"></a></p>
        </div>
        <p class="text">低価格&amp;高機能なCMS導入。<br>充実の管理画面でサイト運用を効率的に。</p>
      </div>
      <div class="tabContents" id="seo">
        <div class="round">
          <p><a href="#"><img src="./shared/images/img_pickup_seo.jpg" width="190" alt="SEO"></a></p>
        </div>
        <p class="text">検索ワードを短期間で上位表示。<br>スマートフォンサイトにも対応します。</p>
      </div>
      <div class="tabContents" id="social">
        <div class="round">
          <p><a href="#"><img src="./shared/images/img_pickup_social.jpg" width="190" alt="ソーシャル"></a></p>
        </div>
        <p class="text">Facebookページ作成からソーシャルメディアマーケティングまで幅広く支援致します。</p>
      </div>
    </section>

タブパネルのcssについては、前回記述済のため割愛。

アコーディオンパネル

セミナー、お知らせ部にアコーディオンパネル機能を追加する。スマートフォンサイト
の狭い画面を有効活用するため、重要な機能である。

アコーディオンパネルのhtml

classにtoggleを書き加え、アコーディオンパネル機能を付与する。classにcloseを記
述することで、ページ読み込み時に閉じた状態で表示される。

    <section class="seminar toggle close">
      <h2><span>セミナー</span></h2>
      <ul class="informationLink">
        <li><a href="#"><span class="date">2013年4月1日</span>テキストテキストテキストテキストテキスト</a></li>
        <li><a href="#"><span class="date">2013年4月1日</span>テキストテキストテキストテキストテキスト</a></li>
        <li><a href="#"><span class="date">2013年4月1日</span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></li>
        <li><a href="#"><span class="date">2013年4月1日</span>テキストテキストテキストテキストテキスト</a></li>
        <li><a href="#"><span class="date">2013年4月1日</span>テキストテキストテキストテキストテキスト</a></li>
      </ul>
    </section> 
    <section class="information toggle close">
      <h2><span>お知らせ</span></h2>
      <ul class="informationLink">
        <li><a href="#"><span class="date">2013年3月18日</span>採用情報を更新しました</a></li>
        <li><a href="#"><span class="date">2013年3月11日</span>実績紹介を更新しました</a></li>
        <li><a href="#"><span class="date">2013年3月1日</span>サービスが紹介されました</a></li>
        <li><a href="#"><span class="date">2013年2月25日</span>社内ブログを開設しました</a></li>
      </ul>
    </section>
アコーディオンパネルのcss
.toggle h2 span {
  background-image: url(../images/icon_minus_white.png) !important; 
}
.toggle.close h2 span {
  background-image: url(../images/icon_plus_white.png) !important;
}
.toggle.close ul {
  display: none;

script.jsの記述

上記の検索バー、ドロップダウンメニュー、タブ、アコーディオンパネルを反映させる
jsを、script.jsに記述する。

$(function(){
  // 検索、メニュー
  $('#searchToggle, #menuToggle').click(function(){
    $(this).parent().toggleClass('open').siblings('.open').removeClass('open');
    $('body').addClass('removeHighlight');
  });
  $('body').click(function(e){
    if( !$(e.target).parents().hasClass('open') ){
      $('.search, .menu').removeClass('open');
      $('body').removeClass('removeHighlight');
    }
  });

  // タブ
  $('#pickup').find('.tab a').click(function(){
    $(this).parent().addClass('current').siblings('.current').removeClass('current');
    var tabTarget = $(this).attr('href');
    $( tabTarget ).addClass('current').siblings('.current').removeClass('current');
    return false;
  });
		
  // アコーディオン
  $('.toggle').find('h2').click(function(){
    $(this).siblings('ul').slideToggle(200, function(){
      $(this).parent().toggleClass('close');
    });
  });


  // 検索バーを隠す
  $(window).load(function(){
    setTimeout(function(){
      window.scrollBy (0,1);
    },100);
  });
});