manabuyasuda

// ==========================================================================
// Function remove-unit
// ==========================================================================

//
// 16pxや1remなど単位のある数値から単位だけを削除する@functionです。
// 単位のない数値を使用すると、値はそのまま返されます。
// TODO: 登録している単位と単位なしのいずれかに当てはまらない場合はエラーになります。
//
// e.g.

manabuyasuda

// -----------------------------------------------------------------
// Mixin icon
// -----------------------------------------------------------------

//
// ハンバーガーボタンをクリックすると×印のボタンに変化します。スクリプトで .is-クラスを付与してください。
//
// マークアップ例
// <button class="icon-burger">
//     <span>navigation</span>

manabuyasuda

//
// e.g.
//
// .main-navigation {
//     @include nav(fill);
//     > li {
//         @include nav__item(fill);
//         > a {
//             @include nav__link(fill, 12px);
//         }

manabuyasuda

<div class="o-central-box">
  <button type="button"><span>search</span></button>
</div>

manabuyasuda

// #Flexbox

// flexboxコンテナを指定します。
@mixin display-flex {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

// flexboxコンテナをインラインで指定します。

manabuyasuda

GitHub

用語集

• repository（リポジトリ）：ファイルや変更内容が保存される場所のことで、パソコン内にあるものをローカルリポジトリ、GitHubなどローカル以外のサーバ上にあるものをリモートリポジトリと呼ぶ
• 作業ディレクトリ：リモートリポジトリをclone（複製）したディレクトリ（ローカルリポジトリ）のことで、作業中のファイルが含まれる
• ステージングエリア：ローカルリポジトリのなかにあるコミットをする予定のファイルを仮置きしておく場所のこと
• Gitディレクトリ：ステージングエリアにあるファイルをコミット（登録）して、変更が確定したディレクトリ
• branch（ブランチ）：並行して作業を進めるためにmasterブランチからコミットの流れを分岐すること（最終的にmasterブランチにマージ（合体）される）

---

manabuyasuda

// @desc ブロック要素内の上部に影をつくります。
// e.g. scss
// .shadow {
//   @include shadow();
// }
//
// e.g. html
// <div class="shadow">
//   <img/>
// </div>

manabuyasuda

// 1.グローバルナビゲーション（マウスオーバーVer.）
// `.find()`で要素を取得（高速化）。
// 使用するclassを変数化して保守性と速度を上げる。
$(function(){
  var $nav = $('.global-nav').find('> li');
  var $navAll = $nav.find('ul');
  var state = 'is-active';

  $nav.hover(
    function() {

manabuyasuda

// タブリスト
// `.index(this)`でクリックされた`li`のインデックスを取得して変数に格納。
// `.eq()`でインデックスを渡す。
// `return false;`でアンカータグを無効化する。
$(function(){
  var $tabList = $('.tabList').find('li');
  var $tabBody = $('.tabBody').find('li');
  var state = 'is-active';

  $tabList.click(function() {

manabuyasuda

// トップに戻るボタン
// ブラウザによってルートが変わるため`$('html, body')`で2つ取得する。
// `$(window).scrollTop()`でクリック時点でのスクロール量を取得する。
// `duration: 1000`でアニメーションにかかる時間を示定する（この場合は1秒）。
$(function() {
  var $root = $('html, body');
  var $btn = $('#pageTop');

  $btn.click(function() {
    var scroll = $(window).scrollTop();