ものつくり大学 INSTITUTE OF TECHNOLOGISTS

メニュー

下階層用htmlテンプレート

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>

8.下に余白のある場合はsectionを使います。
<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>

  1. 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
  2. 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
  3. 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
<ol>
<li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li>
<li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li>
<li>本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</li>
</ol>

【ボタンコーディングの注意】
ボタンサイズはdiv「columns」にいくつdiv「column」が入っているかで決まります。
<!--もとのブロック-->
<div class="columns"></div>
<!--column2つはいっているので半分サイズ-->
<div class="columns">
<div class="column">ここにボタンを入れる</div>
<div class="column">こちらに入れると右側になる</div>
</div>
<!--column3つはいっているので1/3サイズ-->
<div class="columns">
<div class="column">ここに入れると左</div>
<div class="column">ここに入れると中央</div>
<div class="column">ここに入れると右</div>
</div>
各columnの中に<a class=”button”>~タグを入れるとその枠内におさまります。
開閉ボタン(半分サイズ)
  • 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
  • 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
  1. 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
  2. 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
<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
  • 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
  • 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
  1. 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
  2. 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。

ボタンフルサイズ
<a href="#" class="button is-link">ボタンフルサイズ</a>

開閉ボタンフルサイズ
  • 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
  • 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
  1. 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
  2. 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。
<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>

お問い合わせ・資料請求

TOP