webtips

たまにタブメニューを実装させるのですが、毎回何か簡単で扱いやすいのないかなと思ってました。

html

<!-- ▼ tab menu -->
<ul id="tab_menu">
  <li class="active">TAB1</li>
  <li>TAB2</li>
  <li>TAB3</li>
</ul>
<!-- ▲ tab menu -->

<!-- ▼ tab content -->
<div id="tab_con">
  <div class="active">TAB1 CONTENT</div>
  <div>TAB2 CONTENT</div>
  <div>TAB3 CONTENT</div>
</div>
<!-- ▲ tab content>

CSS

/* tab menu
----------------------------------- */
#tab_menu {
 list-style: none;
}

#tab_menu li {
 display: inline-block;
 padding-top: 5px;
 padding-bottom: 5px;
 padding-left: 25px;
 padding-right: 25px;
 background: #EEEEEE;
}
#tab_menu li.active {
 background: #CCCCCC;
 color: #FFFFFF;
}

#tab_menu li:hover {
 cursor: pointer;
 transition: 1.0s;
}


/* tab content
----------------------------------- */
#tab_con {
 padding: 25px;
 background-color: #CCCCCC;
}
#tab_con div {
 display: none;
}
#tab_con div.active {
 display: block;
}

jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script>

<script>
$(function(){
  $('#tab_menu li').on('click', function(){
    if($(this).not('active')){
      // タブメニュー
      $(this).addClass('active').siblings('li').removeClass('active');
      // タブの中身
      var index = $('#tab_menu li').index(this);
      $('#tab_con div').eq(index).addClass('active').siblings('div').removeClass('active');
    }
  });
});
</script>

色々なパターンはあると思いますが、とりあえずは下記を使ってます。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

場合によっては、色々と指定しないといけない場面に遭遇するかもですね。。

viewportの指定

device-width

初期値は980px。viewportの横幅の指定です。
指定出来る値は200px〜10000px,device-width。

device-height

初期値は「横幅とのアスペスト比から計算される値」。
指定できる値は200px〜10000px,device-height。

initial-scale

初期のズーム倍率
device-width を指定した場合は、初期のズーム倍率が 1 になる。（initial-scale で変更することも可能）
ていうか、initial-scale=1とした時点で，width=device-widthであると暗黙的に決定される．その逆も同様

minimum-scale

最小倍率
minimum-scaleとinitial-scaleを組み合わせると縮小ができなくなります。
最小縮小比率の設定。
デフォルトは 0.25 で指定可能範囲は0より大きく、10までの値。

maximum-scale

最大倍率
最小拡大比率の設定。
デフォルトは 1.6 で指定可能範囲は0より大きく、10までの値。

user-scalable

ズームの操作
ユーザーがズームできるかどうかの設定。
初期値はyes。数字指定も可能。yes=1,no=0。

target-densitydpi=device-dpi

Androidに向けて、Webサイトがどの画面密度に合わせて設計されているかを指定する属性