1.H1が入ります。H1が入ります。
<h1 class="is-red">H1が入ります。H1が入ります。</h1>
2.H2が入ります。H2が入ります。
<h2 class="is-red">H2が入ります。H2が入ります。</h2>
3.H3が入ります。H3が入ります。
<h3 class="is-red">H3が入ります。H3が入ります。</h3>
4.H4が入ります。H4が入ります。
<h4 class="is-red">H4が入ります。H4が入ります。</h4>
5.H2が入ります。H2が入ります。
<h2 class="is-head">H2が入ります。H2が入ります。</h2>
6.H3が入ります。H3が入ります。
<h3 class="is-border-dotted">H3が入ります。H3が入ります。</h3>
7.H4が入ります。H4が入ります。
<h4 class="is-border-gray">H4が入ります。H4が入ります。</h4>
<section>下に余白のある場合はsectionを使います。</section>
9.H2が入ります。H2が入ります。
<h2 class="is-border">H2が入ります。H2が入ります。</h2>
10.H3が入ります。H3が入ります。
<h3 class="is-border">H3が入ります。H3が入ります。</h3>
11.H4が入ります。H4が入ります。
<h4 class="is-border">H4が入ります。H4が入ります。</h3>
5.H2が入ります。H2が入ります。
6.H3が入ります。H3が入ります。
4.H4が入ります。H4が入ります。
本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。
<p>本文入る。</p>
注意書入る。注意書入る。注意書入る。注意書入る。注意書入る。注意書入る。注意書入る。注意書入る。注意書入る。注意書入る。注意書入る。注意書入る。
<p class="attention">注意書入る。</p>
<div class="columns"> <div class="column"><figure><img src="/assets/images/dummy.jpg" alt=""></figure><span>キャプション入る</span></div> <div class="column"><figure><img src="/assets/images/dummy.jpg" alt=""></figure><span>キャプション入る</span></div> <div class="column"><figure><img src="/assets/images/dummy.jpg" alt=""></figure><span>キャプション入る</span></div> <div class="column"><figure><img src="/assets/images/dummy.jpg" alt=""></figure><span>キャプション入る</span></div> </div>
<div class="columns"> <div class="column"><figure><img src="/assets/images/dummy.jpg" alt=""></figure><span>キャプション入る</span></div> <div class="column"><figure><img src="/assets/images/dummy.jpg" alt=""></figure><span>キャプション入る</span></div> <div class="column"><figure><img src="/assets/images/dummy.jpg" alt=""></figure><span>キャプション入る</span></div> </div>
<div class="columns"> <div class="column"><figure><img src="/assets/images/dummy.jpg" alt=""></figure><span>キャプション入る</span></div> <div class="column"><figure><img src="/assets/images/dummy.jpg" alt=""></figure><span>キャプション入る</span></div> </div>
<div class="columns"> <div class="column"><figure><img src="/assets/images/dummy.jpg" alt=""></figure><span>キャプション入る</span></div> </div>
本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。
<div class="columns is-mobile"> <div class="column"><figure><img src="/assets/images/dummy.jpg" alt=""></figure></div> <div class="column-textleft"><p>本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。本文入る。</p></div> </div>
- Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。
- Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。
- Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。
- Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。
<dl class="QA"> <dt>Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。</dt> <dd>Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。</dd> </dl> <dl class="QA"> <dt>Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。Qが入る。</dt> <dd>Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。Aが入る。</dd> </dl>
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
<ul> <li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li> <li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li> <li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li> </ul>
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
<ol> <li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li> <li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li> <li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li> </ol>
【ボタンコーディングの注意】
ボタンサイズはdiv「columns」にいくつdiv「column」が入っているかで決まります。
ボタンサイズはdiv「columns」にいくつdiv「column」が入っているかで決まります。
<!--もとのブロック--> <div class="columns"></div>↓
<!--column２つはいっているので半分サイズ--> <div class="columns"> <div class="column">ここにボタンを入れる</div> <div class="column">こちらに入れると右側になる</div> </div>↓
<!--column３つはいっているので1/3サイズ--> <div class="columns"> <div class="column">ここに入れると左</div> <div class="column">ここに入れると中央</div> <div class="column">ここに入れると右</div> </div>各columnの中に＜a class=”button”＞～タグを入れるとその枠内におさまります。
開閉ボタン（半分サイズ）
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
<div class="columns"> <div class="column"> <a href="#" class="button is-link">ボタンリンク（半分サイズ）</a> </div> <div class="column"> <a href="javascript:void(0)" class="button is-open">開閉ボタン（半分サイズ）</a> <div class="is-open-body"> <ul> <li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li> <li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li> </ul> <ol> <li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li> <li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li> </ol> </div> </div> </div>
<div class="columns"> <div class="column"> <a href="#" class="button is-anchor">アンカーリンク（半分サイズ）</a> </div> <div class="column"> </div> </div>
開閉ボタン1/3
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
ボタンフルサイズ
<a href="#" class="button is-link">ボタンフルサイズ</a>
開閉ボタンフルサイズ
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
- 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
<a href="javascript:void(0)" class="button is-open">開閉ボタンフルサイズ</a> <div class="is-open-body"> <ul> <li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li> <li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li> </ul> <ol> <li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li> <li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li> </ol> </div>
アンカーフルサイズ
<a href="#" class="button is-anchor">アンカーフルサイズ</a>
| 見出し | テキストが入ります。 | テキストが入ります。 |
|---|---|---|
| 見出し | テキストが入ります。 | テキストが入ります。 |
| 見出し | テキストが入ります。 | テキストが入ります。 |
<table> <tr> <th>見出し</th><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <tr> <th>見出し</th><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <tr> <th>見出し</th><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <caption>キャプション入る。キャプション入る。キャプション入る。</caption> </table>
| 見出し | 見出し | 見出し |
|---|---|---|
| テキストが入ります。 | テキストが入ります。 | テキストが入ります。 |
| テキストが入ります。 | テキストが入ります。 | テキストが入ります。 |
| テキストが入ります。 | テキストが入ります。 | テキストが入ります。 |
<table> <tr> <th>見出し</th><th>見出し</th><th>見出し</th> </tr> <tr> <td>テキストが入ります。</td><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <tr> <td>テキストが入ります。</td><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <tr> <td>テキストが入ります。</td><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <caption>キャプション入る。キャプション入る。キャプション入る。</caption> </table>
| 見出し | ||
|---|---|---|
| テキストが入ります。 | テキストが入ります。 | テキストが入ります。 |
| テキストが入ります。 | テキストが入ります。 | テキストが入ります。 |
| テキストが入ります。 | テキストが入ります。 | テキストが入ります。 |
<table> <tr> <th colspan="3">見出し</th> </tr> <tr> <td>テキストが入ります。</td><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <tr> <td>テキストが入ります。</td><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <tr> <td>テキストが入ります。</td><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <caption>キャプション入る。キャプション入る。キャプション入る。</caption> </table>
| 見出し | 見出し | |
|---|---|---|
| 見出し | テキストが入ります。 | テキストが入ります。 |
| 見出し | テキストが入ります。 | テキストが入ります。 |
<table> <tr> <th></th><th>見出し</th><th>見出し</th> </tr> <tr> <th class="lv2">見出し</th><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <tr> <th class="lv2">見出し</th><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <caption>キャプション入る。キャプション入る。キャプション入る。</caption> </table>
tableタグにクラス名is-stripeをつけると
偶数行が水色になります。
<table class="is-stripe">ただしth見出しには適用されません。
| テキストが入ります。 | テキストが入ります。 | テキストが入ります。 |
| テキストが入ります。 | テキストが入ります。 | テキストが入ります。 |
| テキストが入ります。 | テキストが入ります。 | テキストが入ります。 |
| テキストが入ります。 | テキストが入ります。 | テキストが入ります。 |
<table class="is-stripe"> <tr> <td>テキストが入ります。</td><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <tr> <td>テキストが入ります。</td><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <tr> <td>テキストが入ります。</td><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <tr> <td>テキストが入ります。</td><td>テキストが入ります。</td><td>テキストが入ります。</td> </tr> <caption>キャプション入る。キャプション入る。キャプション入る。</caption> </table>
dlタグにクラス名flowをつけるとフロー形式になります。
<dl class="flow">さらにクラス名lastを追加した場合、矢印が消えますので、最後の項目にはlastをつけてください。
<dl class="flow last">
- 本文入る。本文入る。本文入る。本文入る。
- 本文入る。本文入る。本文入る。本文入る。
- 本文入る。本文入る。本文入る。本文入る。
- 本文入る。本文入る。本文入る。本文入る。
- 本文入る。本文入る。本文入る。本文入る。
- 本文入る。本文入る。本文入る。本文入る。
<dl class="flow"> <dt>本文入る。本文入る。本文入る。本文入る。</dt> <dd>本文入る。本文入る。本文入る。本文入る。</dd> </dl> <dl class="flow"> <dt>本文入る。本文入る。本文入る。本文入る。</dt> <dd>本文入る。本文入る。本文入る。本文入る。</dd> </dl> <dl class="flow last"> <dt>本文入る。本文入る。本文入る。本文入る。</dt> <dd>本文入る。本文入る。本文入る。本文入る。</dd> </dl>
-
048-564-3200(代表)【受付時間】月～金曜日 9：00～17：30
〒361-0038
埼玉県行田市前谷333番地
アクセス
- 資料請求
お問い合わせページ
