【コーダー】個人的な覚え書きまとめ

いつも検索するのが手間になったので覚え書きを作成

# リセットcssどうする

## [ress.css](https://github.com/filipelinhares/ress) が良さそう
http://coliss.com/articles/build-websites/operation/css/modern-css-reset-ress.html
#ress.cssの良いところ
1. すべての要素に、「padding」と「margin」をリセット。
2. 実際に使ってみた感じ特にストレスは感じない


# meta要素まとめ
```
  <meta charset="utf-8">
  <meta name="description" content="記事の概要">
  <meta name="keywords" content="keywords,keywords,keywords">
  <meta property="og:title" content="ソーシャル関連/ページのタイトル">
  <meta property="og:url" content="ソーシャル関連/URL">
  <meta property="og:type" content="ソーシャル関連/ページの種類">
	▲ページの種類は「article（記事ページ）」、「website（ウェブサイト/トップページ）」
  <meta property="og:image" content="ソーシャル関連/%%OGPバナーのURL%%">
  <meta property="og:site_name" content="ソーシャル関連/サイト名">
  <meta property="og:description" content="ソーシャル関連/記事の概要">
  <meta name="twitter:title" content="twitterカード/ページのタイトル">
  <meta name="twitter:card" content="表示したいTwitterカードの種類/summary_large_image">
  <meta name="twitter:site" content="そのWebサイトのTwitterアカウント/@twitterアカウント名">
  <meta name="twitter:image:src" content="%%OGPバナーのURL%%">
  <meta name="twitter:domain" content="そのWebサイトのドメインを指定">
  <meta name="viewport" content="width=device-width">
	▲特にspの時に必要
  <link rel="shortcut icon" href="ファビコンファイルの指定">
  <link rel="stylesheet" href="/xxx.css"/>
  <script src="/jquery-3.1.1.min.js"></script>
```
ついでにcss／jsも追記
:writing_hand:参考サイト 
[HTML5のテンプレート/コリス](http://coliss.com/articles/build-websites/operation/work/generic-html5-template-by-sixrevisions.html) 
[Twitterカード_1](https://hyper-text.org/archives/2013/06/twitter_cards_7_card_types.shtml) 
[Twitterカード_2](http://www.xxlabs.net/2016/03/twitter.html) 

#PC/SP振り分け
## pcに記述
```
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://fitsplus.co.jp/recruit/sp/">
<script type="text/javascript">
    if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
        location.href = './sp/';
    }
</script>
```
## spに記述
```
  <script type="text/javascript">
    if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    }else{
        location.href = '../';
    }
  </script>
```
:writing_hand:参考サイト
[JavaScriptによる振り分け](http://html5-css3.jp/smartphone/pc-iphone-android-php-javascript-htaccess.html) 

# 難しかった依頼の覚書
## iOSの場合と、Androidの場合でリンク先を変えたい時と、closeボタンをタップしたら１日間非表示にしたい時
### js
[jquery.cookie.js](https://github.com/carhartl/jquery-cookie) をDL

```
<script type="text/javascript">
▼iOSの場合と、Androidの場合でリンク先を変えたい時
$(function(){
    if (navigator.userAgent.indexOf('iPhone') > 0){
        $('#js-message').attr('href', 'iPhoneでタップしたときの遷移先URL')
    }else if(navigator.userAgent.indexOf('Android') > 0){
        $('#js-message').attr('href', 'Androidでタップしたときの遷移先URL')
    }
});
▼X（画像）をタップした場合、訴求枠を１日間非表示
$(function(){
  if($.cookie("open-panel")){
    $(".js-app-bg").hide();
  } else {
    $(".js-app-bg").show();
  }
  $(".js-app-area_btn-close").click(function() {
    if($.cookie("open-panel")){
      $(".js-app-bg").show();
      $.removeCookie("open-panel" , { path: "/" });
    } else {
      $(".js-app-bg").hide();
      $.cookie("open-panel" , "open" , { expires: 1,  path: "/" });
    }
  return false;
  });
});
</script>
```
### HTML
```
<div class="js-app-bg">
 <div class="app-area js-app-area">
  <p class="app-area_icon_close t-cell js-app-area_btn-close"><img src="/icon_close.png" alt="close" width="11"></p>
   <a class="app-area_link" id="js-message" href="#" target="_blank">
    <p class="app-area_icon_app t-cell">
     <img src="/icon_app.png" alt="content-img" width="39">
    </p>
    <p class="app-area_text t-cell">
     訴求文言
    </p>
    <div class="app-area_cv t-cell">
     <p class="app-area_cv_bg">
      <span>ダウンロード</span>
     </p>
    </div>
   </a>
  </div>
</div>
```

### css

```
.js-app-bg {
  display: none;
}
.app-area {
    width: 100%;
    display: table;
    padding: 7px 10px;
    background-color: #d6d1d0;
}
.app-area_text {
    font-size: 13px;
    color: #37282E;
}
.t-cell {
    display: table-cell;
    vertical-align: middle;
}
.app-area_link {
  width: 100%;
    display: inherit;
}
.app-area_icon_app {
  padding: 0 10px;
}
.app-area_cv_bg {
  padding: 7px 0;
    text-align: center;
    border:solid 1px #37282e;
    border-radius: 20px;
}
.app-area_cv span {
    font-size: 12px;
    color: #37282E;
    font-weight: bold;
}
```

# その他

```
opacity: 0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
```

```
text-shadow: 1px 2px 2px rgba(0,0,0,.35);
box-shadow: 2px 2px #cbcbcb;
```

▼下だけ影

```
box-shadow: 0px 3px 3px -3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 3px 3px -3px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 3px 3px -3px rgba(0,0,0,0.6);
```

▼Sublime Textで困った時
画像サイズが勝手に小さくなった
`Ctrl+U`

▼mediaquery

```
/* iPHone4,iPhone5,iPhone5sのみ */
@media screen and (min-width: 320px) and (max-width: 374px){
}
/* iPhone6のみ */
@media screen and (min-width: 375px) and (max-width: 413px){
}
/* iPhone6 Plus ~ ちょっと大きいスマホまで */
@media screen and (min-width: 414px) and (max-width: 500px){
}
```

▼Bootstrapより

```
.col-md-1 {
    width: 8.33333%;
  }

  .col-md-2 {
    width: 16.66667%;
  }

  .col-md-3 {
    width: 25%;
  }

  .col-md-4 {
    width: 33.33333%;
  }

  .col-md-5 {
    width: 41.66667%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-7 {
    width: 58.33333%;
  }

  .col-md-8 {
    width: 66.66667%;
  }

  .col-md-9 {
    width: 75%;
  }

  .col-md-10 {
    width: 83.33333%;
  }

  .col-md-11 {
    width: 91.66667%;
  }

  .col-md-12 {
    width: 100%;
  }
```

▼スクロールバー

```
.scroll-box::-webkit-scrollbar{height:5px;}/*バーの太さ*/
.scroll-box::-webkit-scrollbar-track{background:#dddddd;}/*バーの背景色*/
.scroll-box::-webkit-scrollbar-thumb{background:#2cc2e4;}/*バーの色*/
```