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

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

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

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

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

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

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

マテリアルアイコンガイド Google Fonts
HTML
```
<body>
  
  
</body>
```
[body]の直下に[param]のwrapperを設置して、その中にDOMを構成しています。
[param]はParameterの略。使用用途としてはそのまんまパラメータ付与。

[wrap]とか[container]などのidが一般的ですが、個人的にパラメータ付与用に使っているので[param]にしています。
DOM全体に状況を伝えるような時（メニューオープンなど）に[param]にclassを付与したり、一時的に保持したい値を[param]の[data]属性に付与したりする。

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

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

CSS

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;border:0;font-size:100%;font:inherit;vertical-align:baseline}i{font-style:normal}ol,ul{list-style:none}a{text-decoration:none}img{border:none;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{color:#322c28;background:#f6f7f8;line-height:1.5em}button{background:none;color:inherit;display:block;cursor:pointer}
.ico-mui{font-family:'Material Icons';font-weight:400;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';position:relative;bottom:-1px}.ico-mui::before{display:block;}

ノーマライズCSSです。
一行目は基本的なノーマライズ用の記述で、二行目の[.ico-mui]の列は上記CDNで読み込んでいるアイコン表示で使用しています。

ノーマライズは[form]に関連するタグを抜いてありますが、基本的なものと変わらないと思うので既存のノーマライズがあればそちらでも大丈夫です。

library-normalize-min.cssのダウンロードはこちらから。

ダウンロード

jQuery
```
var $win = $(window);
var $bd = $('body');
var $prm = $('#param');
```
ライブラリ内で使用しているグローバル変数です。
グローバル変数が嫌な方や既存の変数名を使用したい場合は該当箇所を変更してご利用ください。

TOP