テンプレート

見出し

h3テキストh3テキストh3テキストh3テキスト

h4テキストh4テキストh4テキストh4テキスト

h5テキストh5テキストh5テキストh5テキスト

<h3>h3テキストh3テキストh3テキストh3テキスト</h3>
<h4>h4テキストh4テキストh4テキストh4テキスト</h4>
<h4>h5テキストh5テキストh5テキストh5テキスト</h4>

テキスト

ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

<p>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</p>

太字テキスト。bold 強調テキストです。 注意喚起テキストです。

<p><strong>太字テキスト。bold</strong> <span class="u-emphasis">強調テキストです。</span> <span class="u-caution">注意喚起テキストです。</span></p>

背景付きボックス・枠線付きボックス

見出し無し

ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

<div class="p-box">
  <div class="p-box__inner">
    <p>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</p>
  </div>
</div>

ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

<div class="p-box p-box--blue">
  <div class="p-box__inner">
    <p>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</p>
  </div>
</div>

ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

<div class="p-box p-box--border">
  <div class="p-box__inner">
    <p>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</p>
  </div>
</div>

見出し付き

見出しテキストです。見出しテキストです。

ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

<div class="p-box">
  <dl class="p-box__inner">
    <dt class="p-box__head">見出しテキストです。見出しテキストです。</dt>
    <dd class="p-box__body">
      <p>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</p>
    </dd>
  </dl>
</div>
見出しテキストです。見出しテキストです。

ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

<div class="p-box p-box--blue">
  <dl class="p-box__inner">
    <dt class="p-box__head">見出しテキストです。見出しテキストです。</dt>
    <dd class="p-box__body">
      <p>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</p>
    </dd>
  </dl>
</div>
見出しテキストです。見出しテキストです。

ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。

<div class="p-box p-box--border">
  <dl class="p-box__inner">
    <dt class="p-box__head">見出しテキストです。見出しテキストです。</dt>
    <dd class="p-box__body">
      <p>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</p>
    </dd>
  </dl>
</div>

リスト

  • ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
  • ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
  • ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
<ul>
  <li>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</li>
  <li>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</li>
  <li>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</li>
</ul>
  1. ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
  2. ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
  3. ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
<ol>
  <li>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</li>
  <li>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</li>
  <li>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</li>
</ol>
  • ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
  • ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
  • ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
  • ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
  • ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
  • ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。
<ul class="p-columnList">
  <li>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</li>
  <li>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</li>
  <li>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</li>
  <li>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</li>
  <li>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</li>
  <li>ここにテキストが入ります。これはダミーテキストです。ここにテキストが入ります。これはダミーテキストです。</li>
</ul>

ボタン

ボタン小

<p class="p-btn">
  <a class="p-btn__btn" href="#">
    <span class="p-btn__btn__body">ボタン小</span>
  </a>
</p>

ボタン大

<p class="p-btn">
  <a class="p-btn__btn p-btn__btn--large" href="#">
    <span class="p-btn__btn__body">ボタン小</span>
  </a>
</p>

Bootstrap

Grid system

Grid system

© 2019 佐賀県産業スマート化センター