EITCH DESIGN エイチ デザイン / ライブラリを導入する前に

menu

ライブラリを導入する前に

CommonファイルやCDNの読み込みなど、ライブラリを使用する前提設計

ライブラリには記述していないCSSのノーマライズやJSのグローバル変数などを公開しています。
ライブラリを利用する際は下記の [HTML,CDN,CSS,jQuery] の構成を組み込んでください。

このページの記述ではなく既存のものを使用したい場合は適宜書き換えてご利用ください。

  • CDN

    copy
    
    

    jQueryとアイコンフォントのCDNです。

    アイコンフォントはGoogle Fontsのマテリアルデザイン用のアイコンを使用しています。
    ※ ライブラリはコピペで使用できますが、詳しい使い方を知りたい方は下記リンクを参照してください。

  • HTML

    copy
    <body>
      
    </body>

    [body]の直下に[root]のwrapperを設置して、その中にDOMを構成しています。

    DOM全体に状況を伝えるような時(メニューオープンなど)に[root]にclassを付与したり、一時的に保持したい値を[root]の[data]属性に付与したりする。

    [root]に該当するwrapper要素がすでにある場合は、[root]を対象とする箇所を適宜書き換えてください。

    モーダルなどの[position: fixed;]要素は[root]の外に設置する。

  • CSS

    copy
    a,article,aside,audio,blockquote,body,caption,dd,div,dl,dt,figcaption,figure,footer,form,button,h1,h2,h3,h4,h5,h6,header,html,iframe,label,li,mark,menu,nav,ol,output,p,pre,ruby,section,span,table,tbody,td,tfoot,th,thead,time,tr,ul,video{margin:0;padding:0;font:inherit;border:0;vertical-align:baseline}ol,ul{list-style:none}a{text-decoration:none}i{font-style:normal}img{border:none;vertical-align:top}table{border-collapse:collapse;border-spacing:0}button{background:none;display:block;cursor:pointer;}
    
    :root {
      --txt-primary:    rgba(0,0,0,0.87);
      --txt-secondary:  rgba(0,0,0,0.60);
      --txt-disabled:   rgba(0,0,0,0.28);
    
      --bg-paper: #fff;
      --bg-disabled: rgba(0,0,0,0.12);
      --bg-overlay:  rgba(0,0,0,0.50);
    
      --hover:   rgba(0,0,0,0.04);
      --divider: rgba(0,0,0,0.12);
      --outline: rgba(0,0,0,0.23);
      --input:   rgba(0,0,0,0.42);
    
      --link-color: #2962ff;
    
      --info-main: #2196F3;
      --info-bg:   #E9F4FE;
    
      --error-main: #F44336;
      --error-bg:   #fae8e7;
      
      --warning-main: #FF9800;
      --warning-bg:   #FDF0E6;
      
      --success-main: #4CAF50;
      --success-bg:   #EDF7ED;
    
      --margin-parts:   0 auto 24px;
      --margin-item:    0 auto 32px;
      --margin-section: 0 auto 64px;
    }
    
    .ico-mui {
      font-family: 'Material Icons';
      font-weight: normal;
      font-style: normal;
      font-size: 1.5rem;
      display: inline-block;
      line-height: 1;
      text-transform: none;
      letter-spacing: normal;
      word-wrap: normal;
      white-space: nowrap;
      direction: ltr;
      vertical-align: middle;
    
      /* Support for all WebKit browsers. */
      -webkit-font-smoothing: antialiased;
      /* Support for Safari and Chrome. */
      text-rendering: optimizeLegibility;
    
      /* Support for Firefox. */
      -moz-osx-font-smoothing: grayscale;
    
      /* Support for IE. */
      font-feature-settings: 'liga';
    }

    ノーマライズとrootとアイコン用のCSSです。

    一行目は基本的なノーマライズ用の記述で、[form]に関連するタグを抜いてありますが、基本的なものと変わらないと思うので既存のノーマライズがあればそちらでも問題ないはずです。

    [:root]がルート用のCSSで、テキスト・背景・ボーダーの基本色とインフォメーション系の色を入れています。
    必要があれば適宜変更して使用してください。
    ※ルートCSSは後から追加したものなので、現状全てのlibraryに取り入れられていません。

    [.ico-mui]の列は上記CDNで読み込んでいるMUIのアイコン表示で使用しています。

    library-normalize-min.cssのダウンロードはこちらから。
    ※記述はミニマライズしてあります。

    ダウンロード
  • jQuery

    copy
    var $win = $(window);
    var $bd = $('body');
    var $rt = $('#root');

    ライブラリ内で使用しているグローバル変数です。
    グローバル変数が嫌な方や既存の変数名を使用したい場合は該当箇所を変更してご利用ください。