MASTERSでつかうエレメント
1990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、うんたらかんたら。IEチェックこわい。
数字右寄せサンプル
| ○○○○ | 123点 |
|---|---|
| ○○○○ | 123,1230円 |
| ○○○○ | 123点 |
| ○○○○ | 123,1230円 |
| ○○○○ | 123点 |
| ○○○○ | 123,1230円 |
<table class="tblCommonA">
<tbody>
<tr>
<th>○○○○</th>
<td><span class="tbl_shortnum_label">123点</span></td>
</tr>
<tr>
<th>○○○○</th>
<td><span class="tbl_shortnum_label">123,1230円</span></td>
</tr>
<tr>
<th>○○○○</th>
<td><span class="tbl_shortnum_label">123点</span></td>
</tr>
<tr>
<th>○○○○</th>
<td><span class="tbl_shortnum_label">123,1230円</span></td>
</tr>
<tr>
<th>○○○○</th>
<td><span class="tbl_shortnum_label">123点</span></td>
</tr>
<tr>
<th>○○○○</th>
<td><span class="tbl_shortnum_label">123,1230円</span></td>
</tr>
</tbody>
</table>spanのclassにtbl_shortnum_labelをつけると全角8文字分の幅で右寄せになります。
pc-tbl_shortnum_labelをつけるとPCのみ全角8文字分の幅で右寄せに、sp-tbl_shortnum_labelをつけるとSP表示の時のみ全角8文字分の幅で右寄せになります。
サムネ付きパターン (サムネ大A)
 |
情報が入るエリア | |
|
フィン Fin 本革ビットローファー【低反発スポンジ入り】 （ブラウン）
￥16,416 (税込) |
<table class="tblCommonA">
<tbody>
<tr>
<td class="thumbL"><a class="fancybox" href="common/img/DUMMY/bnr_250x250.png"><img src="/common/img/DUMMY/bnr_250x250.png"></a></td>
<td>情報が入るエリア</td>
<td class="w10 text-center"><button type="button" class="btn btn-secondary btn-sm">button</button></td>
</tr>
<tr>
<td class="thumbL"><a class="fancybox" href="common/img/DUMMY/bnr_250x250.png"><img src="/common/img/DUMMY/bnr_250x250.png"></a></td>
<td>
<h4>フィン Fin 本革ビットローファー【低反発スポンジ入り】 （ブラウン）</h4>
<p>
￥16,416 <small>(税込)</small> <br>
サイズ:S<br>
カラー:RED
</p>
</td>
<td class="w10 text-center"><button type="button" class="btn btn-secondary btn-sm">button</button></td>
</tr>
</tbody>
</table>サムネ付きパターン (サムネ大B)
|
情報が入るエリア | |
|
フィン Fin 本革ビットローファー【低反発スポンジ入り】 （ブラウン）
￥16,416 (税込) |
<table class="tblCommonB">
<tbody>
<tr>
<td class="thumbL"><a class="fancybox" href="common/img/DUMMY/bnr_250x250.png"><img src="/common/img/DUMMY/bnr_250x250.png"></a></td>
<td>情報が入るエリア</td>
<td class="w10 text-right"><button type="button" class="btn btn-secondary btn-sm">button</button></td>
</tr>
<tr>
<td class="thumbL"><a class="fancybox" href="common/img/DUMMY/bnr_250x250.png"><img src="/common/img/DUMMY/bnr_250x250.png"></a></td>
<td>
<h4>フィン Fin 本革ビットローファー【低反発スポンジ入り】 （ブラウン）</h4>
<p>
￥16,416 <small>(税込)</small> <br>
サイズ:S<br>
カラー:RED
</p>
</td>
<td class="w10 text-right"><button type="button" class="btn btn-secondary btn-sm">button</button></td>
</tr>
</tbody>
</table>サムネ画像の入る td または th にclass="thumbL" を指定してください。大きめのサムネ画像になります。
サムネ付きパターン (サムネ小A)
|
情報が入るエリア | |
|
フィン Fin 本革ビットローファー【低反発スポンジ入り】 （ブラウン） |
a<table class="tblCommonA">
<tbody>
<tr>
<td class="thumb"><a class="fancybox" href="common/img/DUMMY/bnr_250x250.png"><img src="/common/img/DUMMY/bnr_250x250.png"></a></td>
<td>情報が入るエリア</td>
<td class="w10 text-center"><button type="button" class="btn btn-secondary btn-sm">button</button></td>
</tr>
<tr>
<td class="thumb"><a class="fancybox" href="common/img/DUMMY/bnr_250x250.png"><img src="/common/img/DUMMY/bnr_250x250.png"></a></td>
<td>
フィン Fin 本革ビットローファー【低反発スポンジ入り】 （ブラウン）
</td>
<td class="w10 text-center"><button type="button" class="btn btn-secondary btn-sm">button</button></td>
</tr>
</tbody>
</table>サムネ付きパターン (サムネ小B)
|
情報が入るエリア | |
|
フィン Fin 本革ビットローファー【低反発スポンジ入り】 （ブラウン） |
<table class="tblCommonB">
<tbody>
<tr>
<td class="thumb"><a class="fancybox" href="common/img/DUMMY/bnr_250x250.png"><img src="/common/img/DUMMY/bnr_250x250.png"></a></td>
<td>情報が入るエリア</td>
<td class="w10 text-right"><button type="button" class="btn btn-secondary btn-sm">button</button></td>
</tr>
<tr>
<td class="thumb"><a class="fancybox" href="common/img/DUMMY/bnr_250x250.png"><img src="/common/img/DUMMY/bnr_250x250.png"></a></td>
<td>
フィン Fin 本革ビットローファー【低反発スポンジ入り】 （ブラウン）
</td>
<td class="w10 text-right"><button type="button" class="btn btn-secondary btn-sm">button</button></td>
</tr>
</tbody>
</table>サムネ画像の入る td または th にclass="thumb" を指定してください
inputとボタンの並び
ボタンではない何かの時はbadgeと組み合わせる
親要素のinput-groupとその子要「input-group__addon」「input-group__control」を素組み合わせて使ってください。
<!--右にボタン -->
<div class="mt2 input-group">
<input type="text" class="input-group__control" name="">
<span class="input-group__addon"><button id="" type="button" class="btn btn-info">ボタン</button></span>
</div>
<!-- 左にボタン -->
<div class="mt2 input-group">
<span class="input-group__addon"><button id="" type="button" class="btn btn-warning">ボタン</button></span>
<input type="text" class="input-group__control" name="">
</div>
<!-- 両端にボタン -->
<div class="mt2 input-group">
<span class="input-group__addon"><button id="" type="button" class="btn btn-primary">ボタン</button></span>
<input type="text" class="input-group__control" name="">
<span class="input-group__addon"><button id="" type="button" class="btn btn-secondary">ボタン</button></span>
</div>
<!-- badgeとの組み合わせ -->
<div class="mt2 input-group">
<span class="input-group__addon"><p class="badge badge-dark">ボタンではない何かの時はbadgeと組み合わせる</p></span>
<input type="text" class="input-group__control" name="">
</div>通常の並び
<div class="mt4 text-center">
<button id="updateBtn" type="button" class="btn btn-warning pull-center">この内容で更新する</button>
<button id="deleteBtn" type="button" class="btn btn-danger">役割を削除する</button>
</div>削除ボタンがあるときの並び
親要素のpullと組み合わせて使ってください。
<div class="mt4 pull">
<button id="" type="button" class="btn btn-warning pull-left">左の場合</button>
<button id="" type="button" class="btn btn-danger pull-right">右の場合</button>
<button id="" type="button" class="btn btn-info">センター</button>
</div>右寄せだけの場合
右寄せだけの場合は親要素にpullは使わずtext-rightにしたほうが安定するかもしれません
<div class="text-right">
<button type="button" class="btn btn-primary">移動指示を一括登録する</button>
</div>table固定系追加
| 付与 | ロール名 | 優先度 |
|---|---|---|
| サプライヤ管理者 | ||
| 管理部 | ||
| 山田太郎 |
| ブランド 商品名 |
SKUコード JANコード ロコンドSKU |
上代 卸価格 |
受注数 | 発注数 入荷数 出荷数 |
振分在庫数 フリー在庫数 |
|---|---|---|---|---|---|
| aaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa |
js読み込み
<script src="common/libs/Theadfixed/jquery.smTheadfixed.js"></script><table class="tblCommonA fixed-header-block">
<thead>
<tr>
<th class="w2">付与</th>
<th>ロール名</th>
<th class="w5">優先度</th>
</tr>
</thead>
<tbody>
<tr>
<td class="w2 text-center"><input type="checkbox" class="" id="" name="" value="0" checked=""></td>
<td>サプライヤ管理者</td>
<td class="text-center w5"><button type="button" class="btn btn-outline-secondary btn-sm"><i class="fe fe-chevron-up"></i></button><button type="button" class="btn btn-outline-secondary btn-sm"><i class="fe fe-chevron-down"></i></button></td>
</tr>
<tr>
<td class="w2 text-center"><input type="checkbox" class="" id="" name="" value="0" checked=""></td>
<td>管理部</td>
<td class="text-center w5"><button type="button" class="btn btn-outline-secondary btn-sm"><i class="fe fe-chevron-up"></i></button><button type="button" class="btn btn-outline-secondary btn-sm"><i class="fe fe-chevron-down"></i></button></td>
</tr>
<tr>
<td class="w2 text-center"><input type="checkbox" class="" id="" name="" value="0" checked=""></td>
<td>山田太郎</td>
<td class="text-center w5"><button type="button" class="btn btn-outline-secondary btn-sm"><i class="fe fe-chevron-up"></i></button><button type="button" class="btn btn-outline-secondary btn-sm"><i class="fe fe-chevron-down"></i></button></td>
</tr>
</tbody>
</table>小さいtable
tblCommonCのtableは短いテーブル
| 付与 | ロール名 | 優先度 |
|---|---|---|
| サプライヤ管理者 | ||
| 管理部 | ||
| 山田太郎 |
class="shortpadding"をつけるとpaddng狭くなります。
tableにつけるとそのtable内のtd,thが全て狭くなり、td th個別につけると、そのclassがついたところだけ狭くなります。(下記はthにだけつけています)
tableにつけるとそのtable内のtd,thが全て狭くなり、td th個別につけると、そのclassがついたところだけ狭くなります。(下記はthにだけつけています)
| 付与 | ロール名 | 優先度 |
|---|---|---|
サプライヤ管理者 |
||
| 管理部 | ||
| 山田太郎 |
float系
右回りこみ
左回りこみ
<div class="clearfix">
<p class="float-right">右回りこみ</p>
<p class="float-left">左回りこみ</p>
</div>ツールチップ
ここにツールチップの内容が表示されますここにツールチップの内容が表示されますここにツールチップの内容が表示されます<i class="fe fe-help-circle js-tooltip"><span class="js-tooltip-contents">ここにツールチップの内容が表示されますここにツールチップの内容が表示されますここにツールチップの内容が表示されます</span></i>js-tooltipにホバーするとその中のjs-tooltip-contentsが表示される
UIKITも可能
https://getuikit.com/docs/tooltip
toggle汎用版
ここに内容が表示されます
<i class="fe fe-help-circle js-toggle"></i>
<div class="js-toggle-contents">ここに内容が表示されます</div> js-toggleをクリックするとクリックした直後にあるjs-toggle-contentsが表示される
UIKITも可能
https://getuikit.com/docs/toggleWhat's up?
その他使用例
アップロードの方法
ここに内容が表示されます。下記は例です。
〇〇をアップロードしてOKボタンをクリックしてね。
削除したら元に戻せないから注意が必要だよ！
〇〇をアップロードしてOKボタンをクリックしてね。
削除したら元に戻せないから注意が必要だよ！
<div class="boxGray">
<h3 class="js-toggle"><i class="fe fe-help-circle"></i>アップロードの方法<i class="fe fe-chevron-down"></i></h3>
<div class="js-toggle-contents">ここに内容が表示されます。下記は例です。<br>
〇〇をアップロードして<span class="badge badge-primary">OKボタン</span>をクリックしてね。<br>
<span class="badge badge-danger">削除</span>したら元に戻せないから注意が必要だよ！
</div>
</div>ローディング
<div class="boxGray">
<h3 class="js-toggle"><i class="fe fe-help-circle"></i>アップロードの方法<i class="fe fe-chevron-down"></i></h3>
<div class="js-toggle-contents">ここに内容が表示されます。下記は例です。<br>
〇〇をアップロードして<span class="badge badge-primary">OKボタン</span>をクリックしてね。<br>
<span class="badge badge-danger">削除</span>したら元に戻せないから注意が必要だよ！
</div>
</div>部分的なローダー
| テーブル見出し | |
|---|---|
| テーブル見出し | |
| テーブル見出し |
<div class="part-loader">
<table>
<tr>
<th>テーブル見出し</th>
<td>
<input type="text">
</td>
</tr>
<tr>
<th>テーブル見出し</th>
<td>
<input type="text">
</td>
</tr>
<tr>
<th>テーブル見出し</th>
<td>
<input type="text">
</td>
</tr>
</table>
</div>部分的にロード中の親要素に part-loader というclassをつけてください。
TABLEでフォーム組んでいく例
<form class="">
<table class="tblCommonA spModeVertical">
<tbody>
<tr>
<th>ショップ<sup class="red">※</sup></th>
<td>
<select title="ショップ" class="js-example-basic-single" id="shopId" name="shopId" tabindex="-1">
<option value="">全てのショップ</option>
<option value="3">
00000000:ロコンド
</option>
<option value="594">
ASV0650DC:ASVP WORK
</option>
<option value="323">
TEST001:ロコンドテスト
</option>
</select>
</td>
</tr>
<tr>
<th>商品コード</th>
<td>
<label class="">
<input class="" type="radio" name="searchCommodityCodeBySingle" value="true" checked="checked">
<span class="">完全一致</span> <span class="caution"> [13桁]</span>
</label>
<input type="text" id="commodityCode" name="commodityCode" maxlength="13" >
<hr>
<label class="">
<input class="" type="radio" name="searchCommodityCodeBySingle" value="false">
<span class="">前方一致</span> <span class="caution">[13桁]</span>
</label>
<input type="text" id="fromCommodityCode" name="fromCommodityCode" maxlength="13" disabled="" class=""> 〜
<input type="text" id="toCommodityCode" name="toCommodityCode" maxlength="13" disabled="" class="">
</td>
</tr>
<tr>
<th>SKUコード</th>
<td>
<input type="text" name="skuCodeListString" maxlength="169">
<span class="caution">※カンマ区切りで、10個まで指定可</span>
</td>
</tr>
<tr>
<th>販売価格</th>
<td>
<input type="text" class="number" name="fromUnitPrice" maxlength="8">
<span class="caution">[8桁]</span> 〜
<input type="text" class="number" name="toUnitPrice" maxlength="8">
<span class="caution">[8桁]</span>
</td>
</tr>
<tr>
<th>販売開始日時 </th>
<td>
<input type="text" name="fromSaleStartDatetimeString" maxlength="10" class="datepicker" id="dp1530780695565">
<select name="fromSaleStartDatetimeTime" class="">
<option value="">--</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
〜
<input type="text" name="toSaleStartDatetimeString" maxlength="10" class="datepicker" id="dp1530780695566">
<select name="toSaleStartDatetimeTime">
<option value="">--</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select><br>
<span class="caution">※日付は、「YYYYMMDD」か「YYYY/MM/DD」形式で入力してください</span>
</td>
</tr>
<tr>
<th>適用期間</th>
<td>
<label for="saleStatuses_0" class="">
<input type="checkbox" class="" id="saleStatuses_0" name="saleStatuses" value="0" checked="">
<span class="">予約期間</span>
</label>
<label for="saleStatuses_1" class="">
<input type="checkbox" class="" id="saleStatuses_1" name="saleStatuses" value="1">
<span class="">販売期間</span>
</label>
<label for="saleStatuses_2" class="">
<input type="checkbox" class="" id="saleStatuses_2" name="saleStatuses" value="2">
<span class="">期間外</span>
</label>
</td>
</tr>
<tr>
<th>在庫状況</th>
<td>
<select name="stockStatus">
<option value="">指定なし</option>
<option value="0">在庫なし</option>
<option value="1">在庫あり</option>
</select>
</td>
</tr>
<tr>
<th>商材タイプ</th>
<td>
<select name="commercialType">
<option value="">すべて</option>
<option value="0">LD</option>
<option value="1">LT</option>
<option value="2">LS</option>
<option value="3">LP</option>
</select>
</td>
</tr>
<tr>
<th>BOEM限定販売商品</th>
<td>
<label for="disableLocondo_1" class="">
<input type="checkbox" class="" name="disableLocondo" id="disableLocondo_1" value="1">
<span class="">BOEM限定販売</span>
</label>
</td>
</tr>
<tr>
<th>自由記入欄</th>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<th>画像アップロード</th>
<td>
<input type="file" name="topicsImage" id="topicsImage" accept="image/*">
</td>
</tr>
</tbody>
</table>
<div class="btn-list text-right">
<input type="hidden" id="pageSize" name="pageSize">
<input type="hidden" id="pageNumber" name="pageNumber">
<input type="hidden" name="maxPageNumber" id="maxPageNumber">
<input type="submit" value="検索する" onclick="" class="btn btn-primary">
</div>
</form>tableのclassにspModeVerticalをつけるとレスポンシブ時に1カラムになります。
情報量が多い表の場合はスクロールがでます。
| ブランド 商品名 |
SKUコード JANコード ロコンドSKU |
上代 卸価格 |
受注数 | 発注数 入荷数 出荷数 |
振分在庫数 フリー在庫数 |
|---|---|---|---|---|---|
| △△△△ □□□□□□ |
123456 4623643232332335 MO906BW11970131 |
10000 10,000 |
0 0 0 |
10 2 |
|
| △△△△ □□□□□□ |
123456 4623643232332335 MO906BW11970131 |
10000 10,000 |
0 0 0 |
10 2 |
|
| △△△△ □□□□□□ |
123456 4623643232332335 MO906BW11970131 |
10000 10,000 |
0 0 0 |
10 2 |
|
| △△△△ □□□□□□ |
123456 4623643232332335 MO906BW11970131 |
10000 10,000 |
0 0 0 |
10 2 |
<div class="scrollwrap">
<table class="tblCommonA">
<th>ブランド
<th>SKUコード<hr>
JANコード<hr>
ロコンドSKU
</th>
<th>上代<hr>
卸価格
</th>
<th>受注数
</th>
<th>発注数
出荷数
</th>
<th>振分在庫数
フリー在庫数
</th>
</tr>
</thead>
<tr>
△△△△<hr>□□□□□□</td>
123456<hr>
4623643232332335<hr>
MO906BW11970131
</td>
<td>
10000
<td>
<td>0<hr>
0<hr>
0
</td>
<td>
10
<tr>
<td>△△△△<hr>□□□□□□</td>
123456<hr>
4623643232332335<hr>
MO906BW11970131
</td>
<td>
10000<hr>
10,000
</td>
<td><input type="text" class="small-form"></td>
<td>0<hr>
0<hr>
0
</td>
<td>
10<hr>
2
</td>
</tr>
△△△△<hr>□□□□□□</td>
<td>123456
MO906BW11970131
</td>
<td>
10000<hr>
10,000
</td>
<td><input type="text" class="small-form"></td>
<td>0<hr>
0<hr>
0
</td>
<td>
10
2
</td>
</tr>
<tr>
<td>△△△△□□□□□□</td>
<td>123456<hr>
4623643232332335<hr>
MO906BW11970131
</td>
<td>
10000<hr>
10,000
</td>
<input type="text" class="small-form"></td>
<td>0<hr>
0
10<hr>
2
</td>
</tr>
</tbody>
</table>
</div>
情報量の多いtableを囲うdivのclassにscrollwrapをつけるとレスポンシブ時にスクロール表示されます。そのときはtableにspModeVerticalは不要です。
フォームエレメンツ
select
<select class="">
<option value="">全てのショップ</option>
<option>北海道</option>
<option>青森県</option>
<option>岩手県</option>
<option>宮城県</option>
<option>秋田県</option>
<option>山形県</option>
</select>
inputフォーム
<input type="text" name="" placeholder="">
Textarea
<textarea name="" rows="6" placeholder=""></textarea>
Radio
<label>
<input type="radio" name="example-radios" value="option1" checked="">
選択肢 1
</label>
<label class="">
<input type="radio" name="example-radios" value="option2">
選択肢 2
</label>
<label class="">
<input type="radio" name="example-radios" value="option3">
選択肢 3
</label>
Checkbox
<label>
<input type="checkbox" name="example-checkbox1" value="option1" checked="">
選択肢 1
</label>
<label>
<input type="checkbox" name="example-checkbox2" value="option2">
選択肢 2
</label>
<label>
<input type="checkbox" name="example-checkbox3" value="option3" disabled="">
選択肢 Disabled
</label>
<label>
<input type="checkbox" name="example-checkbox4" value="option4" checked="" disabled="">
選択肢 Disabled Checked
</label>
備考
input関連の入力欄を横幅いっぱいにしたい場合はinputにclass="block"を指定してください。
スマホのときだけ画像いっぱいにする場合はinputにclass="sp-block"を指定してください。
input関連の入力欄を短めにしたい場合はinputにclass="small-form"を指定してください。
見出し
見出し
見出し
<tbody>
<tr>
<th>見出し</th>
<td><input type="text" class="block"></td>
</tr>
<th>見出し</th>
<input type="text" class="sp-block"></td>
</tr>
<tr>
見出し</th>
<input type="text" class="small-form"></td>
</tr>
</tbody>
</table>
SELECT2
マルチ（JavaScriptオプション）
マルチ（HTML属性）
HTML
<select class="js-example-basic-single" style="width: 250px">
<option value="">全てのショップ</option>
<option>北海道</option>
<option>青森県</option>
<option>岩手県</option>
<option>宮城県</option>
<option>秋田県</option>
<option>山形県</option>
</select>
<h3>マルチ（JavaScriptオプション）</h3>
<select class="js-example-basic-multi" style="width: 250px">
<option>全て</option>
<option>北海道</option>
<option>青森県</option>
<option>岩手県</option>
<option>宮城県</option>
<option>秋田県</option>
<option>山形県</option>
<option>福島県</option>
<option>茨城県</option>
<option>栃木県</option>
<option>群馬県</option>
<option>埼玉県</option>
<option>千葉県</option>
<option>東京都</option>
</select>
<h3>マルチ（HTML属性）</h3>
<select class="js-example-basic-multi2" style="width: 250px" multiple>
<option>北海道</option>
<option>青森県</option>
<option>岩手県</option>
<option>宮城県</option>
<option>秋田県</option>
<option>山形県</option>
<option>福島県</option>
<option>茨城県</option>
<option>栃木県</option>
<option>群馬県</option>
<option>埼玉県</option>
<option>千葉県</option>
<option>東京都</option>
</select>
js
$('.js-example-basic-single').select2({width: 'resolve'});
$('.js-example-basic-multi').select2({
placeholder: "都道府県を選択",
multiple: true
});
$('.js-example-basic-multi2').select2({placeholder: "都道府県を選択"});
備考
multiにする場合はHTMLの属性で指定する方法の方が良さそう。JavaScriptオプションだと選んだ時の挙動がおかしい。
https://select2.org/
datepickerの使用例
Date:
HTML
<input type="text" class="datepicker">
js
$( '.datepicker' ).datepicker();
備考
jquery-uiのdatepickerを呼び出しています。
https://jqueryui.com/datepicker/
DataTableの使用例
Name
Position
Office
Age
Start date
Salary
Tiger Nixon
System Architect
Edinburgh
61
2011/04/25
$320,800
Garrett Winters
Accountant
Tokyo
63
2011/07/25
$170,750
Ashton Cox
Junior Technical Author
San Francisco
66
2009/01/12
$86,000
Cedric Kelly
Senior Javascript Developer
Edinburgh
22
2012/03/29
$433,060
Airi Satou
Accountant
Tokyo
33
2008/11/28
$162,700
Brielle Williamson
Integration Specialist
New York
61
2012/12/02
$372,000
Herrod Chandler
Sales Assistant
San Francisco
59
2012/08/06
$137,500
Rhona Davidson
Integration Specialist
Tokyo
55
2010/10/14
$327,900
Colleen Hurst
Javascript Developer
San Francisco
39
2009/09/15
$205,500
Sonya Frost
Software Engineer
Edinburgh
23
2008/12/13
$103,600
Jena Gaines
Office Manager
London
30
2008/12/19
$90,560
Quinn Flynn
Support Lead
Edinburgh
22
2013/03/03
$342,000
Charde Marshall
Regional Director
San Francisco
36
2008/10/16
$470,600
Haley Kennedy
Senior Marketing Designer
London
43
2012/12/18
$313,500
Tatyana Fitzpatrick
Regional Director
London
19
2010/03/17
$385,750
Michael Silva
Marketing Designer
London
66
2012/11/27
$198,500
Paul Byrd
Chief Financial Officer (CFO)
New York
64
2010/06/09
$725,000
Gloria Little
Systems Administrator
New York
59
2009/04/10
$237,500
Bradley Greer
Software Engineer
London
41
2012/10/13
$132,000
Dai Rios
Personnel Lead
Edinburgh
35
2012/09/26
$217,500
Jenette Caldwell
Development Lead
New York
30
2011/09/03
$345,000
Yuri Berry
Chief Marketing Officer (CMO)
New York
40
2009/06/25
$675,000
Caesar Vance
Pre-Sales Support
New York
21
2011/12/12
$106,450
Doris Wilder
Sales Assistant
Sidney
23
2010/09/20
$85,600
Angelica Ramos
Chief Executive Officer (CEO)
London
47
2009/10/09
$1,200,000
Gavin Joyce
Developer
Edinburgh
42
2010/12/22
$92,575
Jennifer Chang
Regional Director
Singapore
28
2010/11/14
$357,650
Name
Position
Office
Age
Start date
Salary
HTML
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
・・・
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
js
$('#example').DataTable({fixedHeader: true});
備考
default stylingのdatatablesを呼び出しています。
ExtensionsはFixedHeaderを有効にしています。
その他のExtensionsを使う場合は別途公式サイトからCSSを落とす必要があります。
https://datatables.net/
Modalの使用例
data属性で呼び出す（data-remodal-target="modal2"）呼び出す方にオプションをつければハッシュを残さないためブラウザバックの対象にならない。
Remodal
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
Remodal
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
HTML
<button type="button" class="btn btn-primary" data-remodal-target="modal">ボタンから呼び出す</button>
<p data-remodal-target="modal2">data属性で呼び出す（data-remodal-target="modal2"）呼び出す方にオプションをつければハッシュを残さないためブラウザバックの対象にならない。</p>
<div class="remodal" data-remodal-id="modal">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Remodal</h1>
<p>
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
</p>
<br>
<button data-remodal-action="cancel" class="btn btn-secondary">Cancel</button>
<button data-remodal-action="confirm" class="btn btn-primary">OK</button>
</div>
<div class="remodal" data-remodal-id="modal2" data-remodal-options="hashTracking: false">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Remodal</h1>
<p>
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
</p>
<br>
<button data-remodal-action="cancel" class="btn btn-secondary">Cancel</button>
<button data-remodal-action="confirm" class="btn btn-primary">OK</button>
</div>
備考
Bootstrapのモーダルだと他の処理への影響激しかったのでremodalというプラグインにしています。
http://vodkabears.github.io/remodal/#
ちなみにアンカーから呼び出すこともできます
Fancy Boxの使用例
HTML
<a class="fancybox" href="common/img/DUMMY/bnr_150x150.png"><img src="common/img/DUMMY/bnr_150x150.png" alt=""/></a>
js
$('.fancybox').fancybox();
備考
タブメニューの使用例
タブその1
タブその2
タブその3
タブその4
タブ内容1
タブ内容2
タブ内容3
タブ内容4
HTML
<div class="js-tab">
<div class="active">タブその1</div>
<div class="">タブその2</div>
<div class="">タブその3</div>
<div class="">タブその4</div>
</div>
<div class="js-tab_content active">
<p>タブ内容1</p>
</div>
<div class="js-tab_content">
<p>タブ内容2</p>
</div>
<div class="js-tab_content">
<p>タブ内容3</p>
</div>
<div class="js-tab_content">
<p>タブ内容4</p>
</div>
js
fn.tabMenu($('.js-tab > div'),$('.js-tab_content'));
備考
適当に作った自作のタブメニューです。
fn.tabMenu($('ぼたん要素'),$('コンテンツ要素'));
で動きます。
ボタン関連
通常のボタン
<a href="#" class="btn btn-primary" role="button">Link</a>
<button class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input" />
<input type="submit" class="btn btn-primary" value="Submit" />
<input type="reset" class="btn btn-primary" value="Reset" />
ボタンのバリエーション
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-link">Link</a>
disabled時のボタンのバリエーション
<a href="#" class="btn btn-primary disabled">Primary</a>
<a href="#" class="btn btn-secondary disabled">Secondary</a>
<a href="#" class="btn btn-success disabled">Success</a>
<a href="#" class="btn btn-info disabled">Info</a>
<a href="#" class="btn btn-warning disabled">Warning</a>
<a href="#" class="btn btn-danger disabled">Danger</a>
その他ボタンのバリエーション
<a href="#" class="btn btn-outline-primary">Primary</a>
<a href="#" class="btn btn-outline-secondary">Secondary</a>
<a href="#" class="btn btn-outline-success">Success</a>
<a href="#" class="btn btn-outline-info">Info</a>
<a href="#" class="btn btn-outline-warning">Warning</a>
<a href="#" class="btn btn-outline-danger">Danger</a>
btn-blockをつけると幅いっぱいのボタンになる例
<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-block">Block level button</button>
アイコン付きのボタン例
使えるアイコンは下記参照
https://feathericons.com/
<div class="btn-list">
<button type="button" class="btn btn-dark"><i class="fe fe-upload"></i>Upload</button>
<button type="button" class="btn btn-warning"><i class="fe fe-heart"></i>I like</button>
<button type="button" class="btn btn-success"><i class="fe fe-check"></i>I agree</button>
<button type="button" class="btn btn-outline-primary"><i class="fe fe-plus"></i>More</button>
<button type="button" class="btn btn-danger"><i class="fe fe-link"></i>Link</button>
<button type="button" class="btn btn-info"><i class="fe fe-message-circle"></i>Comment</button>
</div>
ボタン組み合わせ例
<div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a>
</div>
ボタン組み合わせ例（センター揃え）
<div class="btn-list text-center">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
</div>
ボタンサイズ小
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
文字組み関連
h1.空前の「メダカ」ブーム、価格高騰の背景に品種改良
メダカといえば、小川や田んぼのそこかしこで捕れ、買っても1匹十数円だったもの。ところが最近は、1匹1万円以上もする“高級メダカ”が登場するほどのブームになっているとか。なぜ、これほど人気が上がったのか？ 知られざるメダカの世界を紹介しよう。
h2.人気の品種は「楊貴妃」や「幹之」
ぼくがメダカを飼い始めた12年前は、正直、同僚にメダカを飼っているのを告白するのが恥ずかしいぐらい、飼っている人は少なかったんです。しかし、ここ3～4年で確実に飼育者数は増えています」
h3.メダカの品種
- ブラックスモールアイメダカ
- ブラックスモールアイヒカリメダカ
- 黄金メダカ
- 黄金ヒカリメダカ
h4.オススメめだか
おすすめメダカを紹介します。
h5.黄金ラメメダカ
人気色｢黄金｣にラメが入った黄金ラメメダカです！
h6.メダカは可愛い
ブラックダイヤのような珍しい品種や人気品種の卵をネットオークションで売って副業にしている人も増えているという
※女性セブン2018年7月19・26日号
何か目立たせたい補足事項などはclass="box"をつける
<h1 class="h1">h1.空前の「メダカ」ブーム、価格高騰の背景に品種改良と希少性</h1>
<p>メダカといえば、小川や田んぼのそこかしこで捕れ、買っても1匹十数円だったもの。ところが最近は、1匹1万円以上もする“高級メダカ”が登場するほどのブームになっているとか。なぜ、これほど人気が上がったのか？ 知られざるメダカの世界を紹介しよう。</p>
<h2 class="h2">h2.人気の品種は「楊貴妃」や「幹之」</h2>
<p>ぼくがメダカを飼い始めた12年前は、正直、同僚にメダカを飼っているのを告白するのが恥ずかしいぐらい、飼っている人は少なかったんです。しかし、ここ3～4年で確実に飼育者数は増えています」</p>
<h3 class="h3">h3.メダカの品種</h3>
<ul>
<li>ブラックスモールアイメダカ</li>
<li>ブラックスモールアイヒカリメダカ</li>
<li>黄金メダカ</li>
<li>黄金ヒカリメダカ</li>
</ul>
<h4 class="h4">h4.オススメめだか</h4>
<p>おすすめメダカを紹介します。</p>
<h5 class="h5">h5.黄金ラメメダカ</h5>
<p>人気色｢黄金｣にラメが入った<strong>黄金ラメメダカ</strong>です！</p>
<h6 class="h6">h6.メダカは可愛い</h6>
<p>ブラックダイヤのような珍しい品種や人気品種の卵をネットオークションで売って副業にしている人も増えているという</p>
<p class="text-right"><small>※女性セブン2018年7月19・26日号</small></p>
<div class="box">
何か目立たせたい補足事項などはclass="box"をつける
</div>
boxには下記バリエーションを用意しています。
これはclass="boxGray"
これはclass="boxYellow"
これはclass="boxPink"
これはclass="boxGreen"
テキストの寄せ
左寄せのテキスト
中央のテキスト
右寄せのテキスト
<p class="text-left">左寄せのテキスト</p>
<p class="text-center">中央のテキスト</p>
<p class="text-right">右寄せのテキスト</p>
グリッドシステム
4カラム
990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。
県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。
県緑化推進課は修理をどのように進めるかや、予算確保は見通しが立っていないと説明する。
滑り台は赤城山南麓の観光の目玉として89年8月に着工した。全長380メートルで、当時県は「日本一長い滑り台」とアピール。開始初年度には約19万人を動員した。近年も大型連休や夏休みには家族連れでにぎわい、多い日には1日で100人以上の利用があったという。
3カラム
990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。
県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。
県緑化推進課は修理をどのように進めるかや、予算確保は見通しが立っていないと説明する。
2カラム
990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。
県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。
<h3>4カラム</h3>
<div class="col-pc-4">
<div class="cols">990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。</div>
<div class="cols">県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。</div>
<div class="cols">県緑化推進課は修理をどのように進めるかや、予算確保は見通しが立っていないと説明する。</div>
<div class="cols">滑り台は赤城山南麓の観光の目玉として89年8月に着工した。全長380メートルで、当時県は「日本一長い滑り台」とアピール。開始初年度には約19万人を動員した。近年も大型連休や夏休みには家族連れでにぎわい、多い日には1日で100人以上の利用があったという。</div>
</div>
<h3>3カラム</h3>
<div class="col-pc-3">
<div class="cols">990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。</div>
<div class="cols">県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。</div>
<div class="cols">県緑化推進課は修理をどのように進めるかや、予算確保は見通しが立っていないと説明する。</div>
</div>
<h3>2カラム</h3>
<div class="col-pc-2">
<div class="cols">990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。</div>
<div class="cols">県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。</div>
</div>
4カラム×スマホ1カラム
990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。
県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。
県緑化推進課は修理をどのように進めるかや、予算確保は見通しが立っていないと説明する。
滑り台は赤城山南麓の観光の目玉として89年8月に着工した。全長380メートルで、当時県は「日本一長い滑り台」とアピール。開始初年度には約19万人を動員した。近年も大型連休や夏休みには家族連れでにぎわい、多い日には1日で100人以上の利用があったという。
<h3>4カラム スマホ1カラム</h3>
<div class="col-pc-4 col-sm-1">
<div class="cols">990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。</div>
<div class="cols">県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。</div>
<div class="cols">県緑化推進課は修理をどのように進めるかや、予算確保は見通しが立っていないと説明する。</div>
<div class="cols">滑り台は赤城山南麓の観光の目玉として89年8月に着工した。全長380メートルで、当時県は「日本一長い滑り台」とアピール。開始初年度には約19万人を動員した。近年も大型連休や夏休みには家族連れでにぎわい、多い日には1日で100人以上の利用があったという。</div>
</div>
4カラム×スマホ2カラム
990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。
県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。
県緑化推進課は修理をどのように進めるかや、予算確保は見通しが立っていないと説明する。
滑り台は赤城山南麓の観光の目玉として89年8月に着工した。全長380メートルで、当時県は「日本一長い滑り台」とアピール。開始初年度には約19万人を動員した。近年も大型連休や夏休みには家族連れでにぎわい、多い日には1日で100人以上の利用があったという。
<div class="col-pc-4 col-sm-2 jsHeightCol4">
<div class="cols">990年7月に完成し、「日本一長い滑り台」として話題になった前橋市富士見町の「SUBARUふれあいの森 赤城」の木製ローラー滑り台が昨年6月以降、休止したままになっている。老朽化が進み、利用者がけがをする危険があるとして設置者の群馬県が休止を決めて約1年。修理費用は多額になるとみられ、再開のめどは立っていない。豊かな自然の中で子どもが楽しめる遊具だけに、再開を望む声が上がっている。</div>
<div class="cols">県や、公園を管理する県森林組合連合会によると、滑り台のローラーや支えに使用される木材は年々、ゆがみやひび割れが進行した。修理しながら利用していたが、修復が必要な箇所が増え、県は昨年6月、休止に踏み切った。</div>
<div class="cols">県緑化推進課は修理をどのように進めるかや、予算確保は見通しが立っていないと説明する。</div>
<div class="cols">滑り台は赤城山南麓の観光の目玉として89年8月に着工した。全長380メートルで、当時県は「日本一長い滑り台」とアピール。開始初年度には約19万人を動員した。近年も大型連休や夏休みには家族連れでにぎわい、多い日には1日で100人以上の利用があったという。</div>
</div>
アラート
アラートはclass="contents"の外に記述してください。
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
閉じる付きアラート
<div class="alert alert-success">
<button type="button" class="close"></button>
アラートが出た時はこんな感じになるよ！
</div>
This is a primary alert—check it out!
This is a secondary alert—check it out!
This is a success alert—check it out!
This is a info alert—check it out!
This is a warning alert—check it out!
This is a danger alert—check it out!
アラートが出た時はこんな感じになるよ！
ステータス系
success
primary
secondary
info
warning
danger
light
dark
<span class="badge badge-success">success</span>
<span class="badge badge-primary">primary</span>
<span class="badge badge-secondary">secondary</span>
<span class="badge badge-info">info</span>
<span class="badge badge-warning">warning</span>
<span class="badge badge-danger">danger</span>
<span class="badge badge-light">light</span>
<span class="badge badge-dark">dark</span>
未発注 未発注
発注済 発注済
出荷準備中 出荷準備中
出荷済 出荷済
注文取消 注文取消
出荷取消 出荷取消