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

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

リセットcssどうする

ress.css が良さそう

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も追記
参考サイト
HTML5のテンプレート/コリス
Twitterカード_1
Twitterカード_2

#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>

参考サイト
JavaScriptによる振り分け

難しかった依頼の覚書

iOSの場合と、Androidの場合でリンク先を変えたい時と、closeボタンをタップしたら１日間非表示にしたい時

js

jquery.cookie.js を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;}/*バーの色*/