デザイン要素サンプル

見出し２

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

<h2>見出し２</h2>

見出し３

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

<h3>見出し３</h3>

見出し４

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

<h4>見出し４</h4>

見出し５

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

<h5>見出し５</h5>

見出し６

これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。これは見出しなどの装飾のサンプルです。

<h6>見出し６</h6>

• リストです。
• リストです。

<ul>
	<li>リストです。</li>
	<li>リストです。</li>
</ul>

1. 番号リストです。
2. 番号リストです。

<ol>
	<li>番号リストです。</li>
	<li>番号リストです。</li>
</ol>

通常のテーブル

モバイル時に縦積みになるテーブル

table class=”mobile-block” を指定すると、画面が狭い場合に縦積みのテーブルになります。
ただし、thead無しの横２列までの表での有効です。横のセルが多かったりすると意味がわからなくなります。

<table class="mobile-block">
<tbody>
<tr>
<th>th テーブル項目</th>
<td>td テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容</td>
</tr>
<tr>
<th>th テーブル項目</th>
<td>td テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容</td>
</tr>
</tbody>
</table>

<div class="sectionFrame sectionBox">

div要素に class="sectionFrame" を指定すると、このような枠が装飾されます。

</div>

<div class="sectionBox">

class="sectionBox" を指定すると、指定した要素の下に少し広めの余白が設定されます。

</div>

dt 定義リスト

dl 定義リスト内容

<dl>
<dt>dt 定義リスト</dt>
<dd>dl 定義リスト内容</dd>
</dl>

質問1

回答回答回答回答回答回答

質問2

回答回答回答回答回答回答

<dl class="qaItem">
<dt>質問1</dt>
<dd>回答回答回答回答回答回答</dd>
</dl>
<dl class="qaItem">
<dt>質問2</dt>
<dd>回答回答回答回答回答回答</dd>
</dl>

<div class="sectionBox">
<div class="flowBox">
<dl>
<dt>お問い合わせ</dt>
<dd>まずはお気軽のお問い合わせください。</dd>
</dl>
</div>
<div class="flowBox">
<dl>
<dt>納品・ご入金</dt>
<dd>納品いたしましたらご入金よろしくお願いいたします。</dd>
</dl>
</div>
</div>

ボタン小
ボタン
ボタン大

<a class="btn btnS" href="#">ボタン小</a>
<a class="btn" href="#">ボタン</a>
<a class="btn btnL" href="#">ボタン大</a>