くーたんママのお家サロンlベビーマッサージ(桜ちゃん)とアロマ教室(アロマ長崎LIBREA)

デザイン要素サンプル

  • HOME »
  • デザイン要素サンプル

見出し2

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

<h2>見出し2</h2>

見出し3

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

<h3>見出し3</h3>

見出し4

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

<h4>見出し4</h4>
見出し5

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

<h5>見出し5</h5>
見出し6

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

<h6>見出し6</h6>
  • リストです。
  • リストです。
<ul>
	<li>リストです。</li>
	<li>リストです。</li>
</ul>
  1. 番号リストです。
  2. 番号リストです。
<ol>
	<li>番号リストです。</li>
	<li>番号リストです。</li>
</ol>

通常のテーブル

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

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

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

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>

お気軽にお問い合わせください TEL 095-815-8652 営業時間11:00~17:00(定休日:不定休)

  • facebook

ご予約&イベントカレンダー

PAGETOP
Copyright © アロマ長崎-librea All Rights Reserved.
Powered by WordPress & BizVektor Theme by Vektor,Inc. technology.