固定サンプルページ

見出し２

見出し３

見出し４

見出し５

見出し６

タイトルタイトルタイトルタイトル

タイトルタイトルタイトルタイトル

• テキストテキストテキストテキストテキストテキストテキストテキストテキスト。
• テキストテキストテキストテキストテキストテキストテキストテキストテキスト。

• テキストテキストテキストテキストテキストテキストテキストテキストテキスト。
• テキストテキストテキストテキストテキストテキストテキストテキストテキスト。

• テキストテキストテキストテキストテキストテキストテキストテキストテキスト。
• テキストテキストテキストテキストテキストテキストテキストテキストテキスト。

テキスト

テキストのfcOrangeはこの色です。

テキストのfcRedはこの色です。

テキストのfcYellowはこの色です。

テキストのfcBrownはこの色です。

テキストのfcBlueはこの色です。

テキストのfcDarkPinkRedはこの色です。

画像+テキスト

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

見出し４

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

回り込ませる場合

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

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

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

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

通常のテーブル

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

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>

sectionBox(margin-bottom:30px;)

<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>