システムコンボ
システムコンボを使用する場合は使用する箇所にclass「systemcombo」の指定が必要となります。
MARGIN【margin-●-▲-▲】
class「systemcombo」の子要素には、class「margin-アルファベット(適用タイプ/p/t/s)-数字(縦)-数字(横)」でマージンの設定が可能です

【例】PC/縦が10px横が0px TABLET/縦が5px横が0px SMARTPHON/縦が2px横が0pxの場合
<div class="margin-p-10-0 margin-t-5-0 margin-s-2-0">
margin-p- margin-t- margin-s-
PADDING【padding-●-▲-▲】
class「systemcombo」の子要素には、class「padding-アルファベット(適用タイプ/p/t/s)-数字(縦)-数字(横)」でパディングの設定が可能です

【例】PC/縦が10px横が0px TABLET/縦が5px横が0px SMARTPHON/縦が2px横が0pxの場合
<div class="padding-p-10-0 padding-t-5-0 padding-s-2-0">
padding-p- padding-t- padding-s-
システムモーダル
モーダルを出すボタンにclass「modalbtn」を付けることでモーダルウインドウを出すことができます。
モーダルの内容の設定はクラスを付けたボタンの次に<div class="modalwrap"></div>を設置して、その子要素に<div class="modalcontents"><div class="modalouter"><div class="modalinner"></div></div></div>を設置し、その中に記入してください。
システムアラート
アラートを出すボタンにclass「alertbtn」を付けることでアラートを出すことができます。
アラートのオプションの設定はクラスを付けたボタンの次に<div class="alertcontents"></div>を設置して、その子要素に下記のオプションを追加してください。
SETTING
アラートのタイプ
<div class="alerttype"></div>に記入してください
"success" "warning" "error" "info" "question"の5種類のアイコンがあります※アイコン無しの場合は記入無しでアイコン無しになります。
アラートのタイトル
<div class="alerttitle"></div>に記入してください
アラートのタイトルを設定できます。
アラートの説明文
<div class="alerttext"></div>に記入してください
タイトルの下に表示される文章を設定できます。
アラートのフッター
<div class="alertfooter"></div>に記入してください
アラートのフッター部分に表示するボタンなどをそのまま記入してください。
アラートのメインボタンの色
<div class="alertconfirmbtncolor"></div>に記入してください
アラートのメインボタンの色を変更する場合は記入してください。
アラートのメインボタンの文字
<div class="alertconfirmbtntext"></div>に記入してください
アラートのメインボタンの文字を変更する場合は記入してください。
アラートのキャンセルボタン
<div class="alertcancelbtn"></div>に記入してください
アラートのキャンセルボタンを表示する場合はtrueを記入してください。
アラートのアニメーション
<div class="alertanimation"></div>に記入してください
アラートのアニメーションをOFFにする場合はfalseを記入してください。
アラートのアニメーションの変更
<div class="alertcustomclass"></div>に記入してください
アラートのアニメーションを変更する場合は記入してください
アラートのタイマー
<div class="alerttimer"></div>に記入してください
アラートを自動で閉じる場合は時間を記入してください。
NORMAL ALERT[title]

タイトルのみのアラートです。
<div class="alerttitle">タイトルのみです</div>

NORMAL ALERT[title/text]

タイトルと説明文のアラートです。
<div class="alerttitle">タイトル</div>
<div class="alerttext">説明文をここに記入します</div>

NORMAL ALERT[title/text/footer]

タイトルと説明文にフッターを追加したアラートです。
<div class="alerttitle">タイトル</div>
<div class="alerttext">説明文をここに記入します</div>
<div class="alertfooter"><a href="○○○" class="systembtn">ボタン</a></div>

NORMAL ALERT[title/text/confirmButtonColor]

アラートのメインボタンの色を変更します。
<div class="alerttitle">ボタンの色を変えたアラート</div>
<div class="alerttext">下のボタンの色を赤く変更しています</div>
<div class="alertconfirmbtncolor">#F00</div>

NORMAL ALERT[title/text/confirmButtonText]

アラートのメインボタンの文字を変更します。
<div class="alerttitle">ボタンの文字を変えたアラート</div>
<div class="alerttext">下のボタンの文字をGOODに変更しています。</div>
<div class="alertconfirmbtntext">GOOD</div>

NO BUTTON ALERT[title/text/showConfirmButton]

アラートのボタンを非表示にします。
<div class="alerttitle">ボタン無しのアラート</div>
<div class="alerttext">下のボタンが消えます</div>
<div class="alertconfirmbtn">false</div>

CANCEL BUTTON ALERT[title/text/showCancelButton]

アラートにキャンセルボタンを追加表示させます。
<div class="alerttitle">キャンセルボタンのあるアラート</div>
<div class="alerttext">下のボタンにキャンセルボタンが追加されます</div>
<div class="alertcancelbtn">true</div>

TIMER ALERT[title/text/showConfirmButton/timer]

セットした時間で自動的にアラートが閉じます。
<div class="alerttitle">タイマーアラート</div>
<div class="alerttext">1.5秒後にこの表示は消えます。</div>
<div class="alertconfirmbtn">false</div>
<div class="alerttimer">1500</div>

SUCCESS ALERT[title/text/showConfirmButton/timer/type]

アイコンを表示するタイプのアラートです。
<div class="alerttitle">SUCCESS ALERT</div>
<div class="alerttext">タイトル上にアイコンが表示されます。</div>
<div class="alerttype">success</div>
<div class="alertconfirmbtn">false</div>
<div class="alerttimer">3000</div>

WARNING ALERT[title/text/showConfirmButton/timer/type]

アイコンを表示するタイプのアラートです。
<div class="alerttitle">WARNING ALERT</div>
<div class="alerttext">タイトル上にアイコンが表示されます。</div>
<div class="alerttype">warning</div>
<div class="alertconfirmbtn">false</div>
<div class="alerttimer">3000</div>

ERROR ALERT[title/text/showConfirmButton/timer/type]

アイコンを表示するタイプのアラートです。
<div class="alerttitle">ERROR ALERT</div>
<div class="alerttext">タイトル上にアイコンが表示されます。</div>
<div class="alerttype">error</div>
<div class="alertconfirmbtn">false</div>
<div class="alerttimer">3000</div>

INFO ALERT[title/text/showConfirmButton/timer/type]

アイコンを表示するタイプのアラートです。
<div class="alerttitle">INFO ALERT</div>
<div class="alerttext">タイトル上にアイコンが表示されます。</div>
<div class="alerttype">info</div>
<div class="alertconfirmbtn">false</div>
<div class="alerttimer">3000</div>

QUESTION ALERT[title/text/showConfirmButton/timer/type]

アイコンを表示するタイプのアラートです。
<div class="alerttitle">QUESTION ALERT</div>
<div class="alerttext">タイトル上にアイコンが表示されます。</div>
<div class="alerttype">question</div>
<div class="alertconfirmbtn">false</div>
<div class="alerttimer">3000</div>

NO ANIMATION ALERT[title/text/animation]

アラートのアニメーションをオフにしたアラートです。
<div class="alerttitle">NO ANIMATION</div>
<div class="alerttext">アラートのアニメーションをOFFにしています。</div>
<div class="alertanimation">false</div>

CUSTOM ANIMATION ALERT[title/text/animation/customClass]

アラートのアニメーションを変更することができます。
アニメーションをオフにして参考サイトにあるクラスを記入してください。

NORMAL ALERT

タイトルのみ

システム用のグリッドパーツ
グリッドタイプのブロック
TYPE/GR-01
グリッドタイプのブロック、グリッドアイテムの親要素にclass「grid」を指定し、カラム数をclass「col-数字(1から12)」で指定してください

【例】12分割した場合
<div class="grid col-12">

また、PC、タブレット、スマートフォンでカラム数を変える事もでき、class「col-アルファベット(p/t/s)-数字(1から12)」で指定してください

【例】12分割した場合
<div class="grid col-12">

グリッドアイテムにPCの場合p-カラム数、タブレットの場合はt-カラム数、スマートフォンの場合はs-カラム数でグリッドアイテムの幅を指定します
記入がない場合は全て1の扱いになります。

【例】グリッドを12分割して、2つのグリッドアイテムを使用した場合、PC/4カラム、8カラム TABLET/5カラム、7カラム SMARTPHON/12カラム、12カラム
<div class="p-4 t-5 s-12">Aブロック</div><div class="p-8 t-7 s-12">Bブロック</div>
Aブロック
Bブロック
フォーム用の各種パーツ
各種フォームタグやテーブルブロックなど
FOAM PARTS/TEXT
文字を表示するためのパーツ
<p>、<dl>、<div>にclass「systemtitle」で指定してください
pの場合
PCやタブレットの場合input系と同じ高さに設定されているので、改行しない場合に使用します

タイトルをここに表示します

divの場合
表示する文字が複数行の場合に使用します
タイトルをここに表示しますタイトルをここに表示しますタイトルをここに表示します
dlの場合
dtが通常、ddが少し小さく薄く表示されるので、補足説明などを使用する場合に使用します
タイトルをここに表示します
補足説明などをここに表示します
FOAM PARTS/INPUT[text|date|time|password|number|email]
各種入力するためのパーツ
<input type="○○○" id="○○○" name="○○○" placeholder="ここに入力">
<input type="○○○" id="○○○" name="○○○" class="systemline" placeholder="ここに入力">

<input type="text" id="" name="" placeholder="ここに入力">

<input type="text" id="" name="" class="systemline" placeholder="ここに入力">

<input type="email" id="" name="" placeholder="ここに入力">

<input type="email" id="" name="" class="systemline" placeholder="ここに入力">

<input type="date" id="" name="" placeholder="ここに入力">

<input type="date" id="" name="" class="systemline" placeholder="ここに入力">

<input type="time" id="" name="" placeholder="ここに入力">

<input type="time" id="" name="" class="systemline" placeholder="ここに入力">

<input type="password" id="" name="" placeholder="ここに入力">

<input type="password" id="" name="" class="systemline" placeholder="ここに入力">

<input type="number" id="" name="" placeholder="ここに入力">

<input type="number" id="" name="" class="systemline" placeholder="ここに入力">
FOAM PARTS/FILE
各種ファイルデータをアップロードするためのパーツ
<div class="filewrap"><label class="filelabel"><input type="file" id="○○○"><p>ファイルを選択</p></label><input type="text" id="filename" placeholder="選択されていません"></div>

file

<div class="filewrap"><label class="filelabel"><input type="file" id=""><p>ファイルを選択</p></label><input type="text" id="filename" placeholder="選択されていません"></div>
FOAM PARTS/TEXTAREA
文字を入力するためのパーツ
<textarea id="○○○" name="○○○" placeholder="ここに入力"></textarea>

<textarea id="" name="name" placeholder="ここに入力"></textarea>

<textarea id="" name="name" class="systemline" placeholder="ここに入力"></textarea>
FOAM PARTS/SELECT
文字を入力するためのパーツ
<div class="selectwrap"><select id="○○○" name="○○○"></select></div>

<div class="selectwrap"> <select id="" name="name"> <option value="">サンプル</option> </select> </div>

<div class="selectwrap systemline"> <select id="" name="name"> <option value="">サンプル</option> </select> </div>
FOAM PARTS/RADIO
<input type="radio" id="○○○" name="○○○" value="○○○"><label for="○○○"><p>○○○</p></label>

radio

<input id="radio01" name="name" value="" type="radio"><label for="radio01"><p>サンプル</p></label>
FOAM PARTS/CHECKBOX
<input type="checkbox" id="○○○" name="○○○" value="○○○"><label for="○○○"><p>○○○</p></label>

checkbox

<input type="checkbox" id="checkbox01" name="name" value=""><label for="checkbox01"><p>サンプル</p></label>
FOAM PARTS/BUTTON
各種ボタンです
リンクタグ
<a class="systembtn" href="">ボタン</a>
ボタン
インプットタグ
<input class="systembtn" type="button" value="ボタン">
ボタンタグ
<button class="systembtn">ボタン</button>
アイコン/リンクタグ
<button class="systembtn">icon</button>
アイコン/ボタンタグ
<button class="systembtn">icon</button>