見出し

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>

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

<ul class="p-linkList">
  <li><a href="#">ここにテキストが入ります。これはダミーテキストです。</a></li>
  <li><a href="#">ここにテキストが入ります。これはダミーテキストです。</a></li>
  <li><a href="#">ここにテキストが入ります。これはダミーテキストです。</a></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