デザインサンプル

リードテキスト

<p class=”leadTxt”>リードテキスト</p>

見出し２

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

<h2>見出し２</h2>

見出し３

<h3>見出し３</h3>

見出し４

<h4>見出し４</h4>

見出し５

<h5>見出し５</h5>

見出し６

<h6>見出し６</h6>

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

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

番号リストです。
番号リストです。

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

通常のテーブル

thead th	thead th
th テーブル項目	td テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容
th テーブル項目	td テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容

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

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

th テーブル項目	td テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容
th テーブル項目	td テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容テーブル内容

<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” を指定すると、このような枠が装飾されます。

<div class="sectionFrame sectionBox">

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

</div>

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

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

	月	火	水	木	金	土	日
午前	◯	◯	◯	◯	◯	◯	休
午後	◯	◯	休	休	◯	◯	休

MENU