• -> Bootstrap
• -> Material Design for Bootstrap

css note

  
  //HTML命名規則（html5より前）
  id、class名
  半角英数、-（ハイフン）、_（アンダースコア）
  大文字、小文字は区別される
  先頭は英字からはじめる。数字から始めてはだめ

  //ハイフン記法
  #nja-ok {

  //スネーク記法
  #nja_ok {

  //キャメル記法
  #njaOk {

  //現在
  HTML5では id の属性値に使える文字に制限は無い。
  先頭が英字じゃなくても平気だし、記号も全角文字も絵文字もなんでも使える。
  javascriptでもOKみたい
  

//デフォルトはスマホ優先：：将来画面サイズを考えんときに変わるかも
0px 〜 414px
@media (min-width: 415px) {/*415px 〜 959px*/}
@media (min-width: 960px) {/*960px 〜*/}

/* タテ長の場合 スマホやタブレット*/
@media screen and (orientation: portrait) {
}
/* 横長の場合 主にPC利用を想定！*/
@media screen and (orientation: landscape) {
}

//実用的ではなさそう、jsonは失敗する？

//スマホで拡大・縮小できない指定

//Google推奨の指定

will-change属性

ブラウザは事前にアニメーションの準備を行い、その要素がアニメーションを行うのに最適な状態にします。ただし、will-changeを多用すると逆にパフォーマンスの低下を招きます。

//will-change属性
//position: fixed要素で重い動作を軽くするらしい・・・
.target { transition: transform 1s, opacity 1s;
        will-change: transform, opacity; }

//ページ読み込み時のレイアウト崩れを修正する方法。
//bodyが読み込まれる前に、調整用のCSSをヘッダーに直書きする。

//または、要素に　style=""で、直書きする。
//外部ファイルだと読込処理があるので、遅延が起こるので崩れを回避できない。
//画像ファイルは極力,lazyにしておく。スクリプトをいれておくこと。
//でおけ。


//クリック・タッチを無効にする。
.notoch {
  pointer-events: none;
}
//直書き
 style="pointer-events: none;"

//注意点
・z-indexで指定した前面レイヤーに pointer-events: none;を指定すると逆に透けるので、後方の要素がクリックできてしまう。overlay要素には基本指定しない。
・キーイベントは無効にならない。tab移動、エンターキーは有効。
・IE10以下には効かない。
・右クリック・ドラッグも無効になる。

//有効化
	pointer-events: auto !important;

//無効化サイトで臨時で有効にするときは・・
*, div {
	pointer-events: auto !important;
}

//電話 国外対応
090-0000-0000

//PCでリンク無効
@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}

//同様のことをjavascriptで
var ua = navigator.userAgent.toLowerCase();
var isMobile = /iphone/.test(ua)||/android(.+)?mobile/.test(ua);

if (!isMobile) {
    $('a[href^="tel:"]').on('click', function(e) {
        e.preventDefault();
    });
}

// SMS
// iOSの場合
SMSで送信する
// Andoroidの場合
SMSで送信する

//flexbox
justify-content: flex-end; //rightは、効かない

flex-start
flex-end