賢威7に予め用意されている装飾用CSSは賢威6までのものとは異なります。

 

2016年12月9日追加分

賢威公式サイトで公開された賢威7用CSSで、ここに記載していなかったものがあったので追記しました。

WordPress版 賢威7 スタイルガイド公開について

 

 

文字装飾

文字色

文字色を水色に変更することができます。

<p class="aqua">文字色を水色に変更することができます。</p>

 

文字色を赤色に変更することができます。

<p class="red">文字色を赤色に変更することができます。</p>

 

文字色をオレンジ色に変更することができます。

<p class="orange">文字色をオレンジ色に変更することができます。</p>

 

文字色をピンク色に変更することができます。

<p class="pink">文字色をピンク色に変更することができます。</p>

 

文字色を紫色に変更することができます。

<p class="purple">文字色を紫色に変更することができます。</p>

 

文字色を緑色に変更することができます。

<p class="green">文字色を緑色に変更することができます。</p>

 

文字色を青色に変更することができます。

<p class="blue">文字色を青色に変更することができます。</p>

 

文字色を黄色に変更することができます。

<p class="yellow">文字色を黄色に変更することができます。</p>

 

文字色をオリーブ色に変更することができます。

<p class="olive">文字色をオリーブ色に変更することができます。</p>

 

文字色をライム色に変更することができます。

<p class="lime">文字色をライム色に変更することができます。</p>

 

文字色を黒色に変更することができます。

<p class="black">文字色を黒色に変更することができます。</p>

 

文字色を灰色に変更することができます。

<p class="gray">文字色を灰色に変更することができます。</p>

 

文字背景色装飾

オレンジ色の背景色

<span class="box-orange">オレンジ色の背景色</span>

ピンク色の背景色

<span class="box-pink">ピンク色の背景色</span>

黄色の背景色

<span class="box-pink">ライム色の背景色</span>

ライム色の背景色

<span class="box-lime">ライム色の背景色</span>

灰色の背景色

<span class="box-gray">灰色の背景色</span>

 

記述リスト(dl dt dd)　その1

記述リストのデザインその1
要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1
要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1
要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。

 

<dl class="dl-style01">
<dt>記述リストのデザインその1</dt>
<dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。</dd>
<dt>記述リストのデザインその1</dt>
<dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。</dd>
<dt>記述リストのデザインその1</dt>
<dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。</dd>
</dl>

 

記述リスト(dl dt dd) その2

記述リストのデザインその2
要素が縦に並びます。
記述リストのデザインその2
要素が縦に並びます。
記述リストのデザインその2
要素が縦に並びます。
<dl class="dl-style02">
<dt>記述リストのデザインその2</dt>
<dd>要素が縦に並びます。</dd>
<dt>記述リストのデザインその2</dt>
<dd>要素が縦に並びます。</dd>
<dt>記述リストのデザインその2</dt>
<dd>要素が縦に並びます。</dd>
</dl>

 

透過ボックス

サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。

<div class="transparent-panel-wrap">
	<div class="transparent-panel">
		<p>サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。</p>
	</div>
</div>

 

テーブルレイアウト

標準テーブル

  項目名 項目名
項目名が入ります 項目内容 項目内容
項目名が入ります 項目内容 項目内容
項目名が入ります 項目内容 項目内容 

<div class="table-scroll">
<table style="width: 500px;">
<thead>
<tr class="even">
<th></th>
<th>項目名</th>
<th>項目名</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr class="even">
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr class="odd">
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tbody>
</table><!--標準のテーブル-->
</div>

 

比較テーブル

  項目内容 項目内容 項目内容
項目名が入ります 項目内容 項目内容 項目内容
項目名が入ります 項目内容 項目内容 項目内容
項目名が入ります 項目内容 項目内容 項目内容
項目名が入ります 項目内容 項目内容 項目内容 
<table class="table-comparison">
<thead>
<tr class="even">

<th class="w25"></th>
<th class="w25">項目内容</th>
<th class="highlight w25"><span class="f12em">項目内容</span></th>
<th class="w25">項目内容</th>

</tr>
</thead>
<tfoot>
<tr class="odd">

<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>

</tr>
</tfoot>
<tbody>
<tr class="even">

<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>

</tr>
<tr class="odd">

<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>

</tr>
<tr class="even">

<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
</tbody>

</table>

 

チェックリスト

小さいチェックリスト

  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。

 

<ul class="check-list">
	<li class="even">チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
	<li class="odd">チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
	<li class="even">チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
	<li class="odd">チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
	<li class="even">チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
</ul>

 

大きいチェックリスト

  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。
<ul class="check-list-l">
	<li class="odd">チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
	<li class="even">チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
	<li class="odd">チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
	<li class="even">チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
	<li class="odd">チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
</ul>

 

ランキング

王冠ランキングリスト

  1. 項目名などが入ります

    猫1

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  2. 項目名などが入ります

    猫2

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  3. 項目名などが入ります

    猫3

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  4. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  5. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  6. 項目名などが入ります

  7. 項目名などが入ります

  8. 項目名などが入ります

  9. 項目名などが入ります

  10. 項目名などが入ります

<ol class="ranking-list ranking-list01">
<li class="rank01 even">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="/images/sample03.jpg" alt="猫1" height="200" width="200"></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank02 odd">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="/images/sample04.jpg" alt="猫2" height="200" width="200"></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank03 even">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="/images/sample05.jpg" alt="猫3" height="200" width="200"></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank04 odd">
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank05 even">
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank06 odd">
<p class="rank-title">項目名などが入ります</p>
</li>
<li class="rank07 even">
<p class="rank-title">項目名などが入ります</p>
</li>
<li class="rank08 odd">
<p class="rank-title">項目名などが入ります</p>
</li>
<li class="rank09 even">
<p class="rank-title">項目名などが入ります</p>
</li>
<li class="rank10 odd">
<p class="rank-title">項目名などが入ります</p>
</li>
</ol>

 

 

メダルランキングリスト

  1. 項目名などが入ります

    猫1

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  2. 項目名などが入ります

    猫2

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  3. 項目名などが入ります

    猫3

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  4. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  5. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  6. 項目名などが入ります

  7. 項目名などが入ります

  8. 項目名などが入ります

  9. 項目名などが入ります

  10. 項目名などが入ります

<ol class="ranking-list ranking-list02">
<li class="rank01 even">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="/images/sample03.jpg" alt="猫1" height="200" width="200"></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank02 odd">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="/images/sample04.jpg" alt="猫2" height="200" width="200"></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank03 even">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="/images/sample05.jpg" alt="猫3" height="200" width="200"></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank04 odd">
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank05 even">
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank06 odd">
<p class="rank-title">項目名などが入ります</p>
</li>
<li class="rank07 even">
<p class="rank-title">項目名などが入ります</p>
</li>
<li class="rank08 odd">
<p class="rank-title">項目名などが入ります</p>
</li>
<li class="rank09 even">
<p class="rank-title">項目名などが入ります</p>
</li>
<li class="rank10 odd">
<p class="rank-title">項目名などが入ります</p>
</li>
</ol>

 

シンプルなランキングリスト

  1. 項目名などが入ります

    猫1

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  2. 項目名などが入ります

    猫2

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  3. 項目名などが入ります

    猫3

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  4. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  5. 項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  6. 項目名などが入ります

  7. 項目名などが入ります

  8. 項目名などが入ります

  9. 項目名などが入ります

  10. 項目名などが入ります

<ol class="ranking-list ranking-list03">
<li class="rank01 even">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="/images/sample03.jpg" alt="猫1" height="200" width="200"></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank02 odd">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="/images/sample04.jpg" alt="猫2" height="200" width="200"></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank03 even">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="/images/sample05.jpg" alt="猫3" height="200" width="200"></div>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank04 odd">
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank05 even">
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank06 odd">
<p class="rank-title">項目名などが入ります</p>
</li>
<li class="rank07 even">
<p class="rank-title">項目名などが入ります</p>
</li>
<li class="rank08 odd">
<p class="rank-title">項目名などが入ります</p>
</li>
<li class="rank09 even">
<p class="rank-title">項目名などが入ります</p>
</li>
<li class="rank10 odd">
<p class="rank-title">項目名などが入ります</p>
</li>
</ol>

 

画像＋ランキング番号のリスト

  1. 猫1

    項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  2. 猫2

    項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  3. 猫3

    項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

<ol class="ranking-list ranking-list03">
<li class="rank01 on-image even">
<div class="rank-thumb"><img src="/images/sample03.jpg" alt="猫1" height="200" width="200"></div>
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank02 on-image odd">
<div class="rank-thumb"><img src="/images/sample04.jpg" alt="猫2" height="200" width="200"></div>
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>

<li class="rank03 on-image even">
<div class="rank-thumb"><img src="/images/sample05.jpg" alt="猫3" height="200" width="200"></div>
<h4 class="rank-title">項目名などが入ります</h4>
<p class="rank-desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</p>
</li>
</ol>

 

情報比較エリア

商品掲載例（王冠）

  1. 商品名が入ります（メーカー名）

    商品1

    価格 5.0
    使用感 3.5
    効果 4.0
    価格：
    2,000円（税込）
    容量：
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  2. 商品名が入ります（メーカー名）

    商品2

    価格 5.0
    使用感 3.5
    効果 4.0
    価格：
    2,000円（税込）
    容量：
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  3. 商品名が入ります（メーカー名）

    商品3

    価格 5.0
    使用感 3.5
    効果 4.0
    価格：
    2,000円（税込）
    容量：
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

<ol class="ranking-list comparative-list01">
<li class="rank01 odd">
<h4 class="rank-title">商品名が入ります（メーカー名）</h4>
<div class="rank-thumb">
<img src="/images/sample19.jpg" alt="商品1" height="248" width="330">
<table class="review-table">
<tbody><tr class="odd">
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr class="even">
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr class="odd">
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</tbody></table>
</div>
<div class="item-data">
<dl>
	<dt>価格：</dt>
	<dd><span class="red f12em">2,000円</span><small>（税込）</small></dd>
</dl>
<dl>
	<dt>容量：</dt>
	<dd>100ml</dd>
</dl>
</div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</div>
</li>

<li class="rank02 even">
<h4 class="rank-title">商品名が入ります（メーカー名）</h4>
<div class="rank-thumb">
<img src="/images/sample20.jpg" alt="商品2" height="248" width="330">
<table class="review-table">
<tbody><tr class="even">
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr class="odd">
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr class="even">
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</tbody></table>
</div>
<div class="item-data">
<dl>
	<dt>価格：</dt>
	<dd><span class="red f12em">2,000円</span><small>（税込）</small></dd>
</dl>
<dl>
	<dt>容量：</dt>
	<dd>100ml</dd>
</dl>
</div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</div>
</li>

<li class="rank03 odd">
<h4 class="rank-title">商品名が入ります（メーカー名）</h4>
<div class="rank-thumb">
<img src="/images/sample21.jpg" alt="商品3" height="248" width="330">
<table class="review-table">
<tbody><tr class="odd">
<th class="w30">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr class="even">
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr class="odd">
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</tbody></table>
</div>
<div class="item-data">
<dl>
	<dt>価格：</dt>
	<dd><span class="red f12em">2,000円</span><small>（税込）</small></dd>
</dl>
<dl>
	<dt>容量：</dt>
	<dd>100ml</dd>
</dl>
</div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</div>
</li>
</ol>

 

商品掲載例（画像にアイコンを重ねる場合）

  1. 商品1

    項目名などが入ります

    価格 5.0
    使用感 3.5
    効果 4.0
    価格：
    2,000円（税込）
    容量：
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  2. 商品2

    項目名などが入ります

    価格 5.0
    使用感 3.5
    効果 4.0
    価格：
    2,000円（税込）
    容量：
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  3. 商品3

    項目名などが入ります

    価格 5.0
    使用感 3.5
    効果 4.0
    価格：
    2,000円（税込）
    容量：
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

<ol class="ranking-list comparative-list02">

<li class="rank01 on-image even">
<div class="rank-thumb"><img src="/images/sample19.jpg" alt="商品1" height="248" width="330"></div>
<h4 class="rank-title">項目名などが入ります</h4>
<table class="review-table">
<tbody><tr class="even">
<th class="w40">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr class="odd">
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr class="even">
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</tbody></table>
<div class="item-data">
<dl>
	<dt>価格：</dt>
	<dd><span class="red f12em">2,000円</span><small>（税込）</small></dd>
</dl>
<dl>
	<dt>容量：</dt>
	<dd>100ml</dd>
</dl>
</div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p>
</div>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</li>

<li class="rank02 on-image odd">
<div class="rank-thumb"><img src="/images/sample20.jpg" alt="商品2" height="248" width="330"></div>
<h4 class="rank-title">項目名などが入ります</h4>
<table class="review-table">
<tbody><tr class="odd">
<th class="w40">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr class="even">
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr class="odd">
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</tbody></table>
<div class="item-data">
<dl>
	<dt>価格：</dt>
	<dd><span class="red f12em">2,000円</span><small>（税込）</small></dd>
</dl>
<dl>
	<dt>容量：</dt>
	<dd>100ml</dd>
</dl>
</div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p>
</div>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</li>

<li class="rank03 on-image even">
<div class="rank-thumb"><img src="/images/sample21.jpg" alt="商品3" height="248" width="330"></div>
<h4 class="rank-title">項目名などが入ります</h4>
<table class="review-table">
<tbody><tr class="even">
<th class="w40">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr class="odd">
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr class="even">
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</tbody></table>
<div class="item-data">
<dl>
	<dt>価格：</dt>
	<dd><span class="red f12em">2,000円</span><small>（税込）</small></dd>
</dl>
<dl>
	<dt>容量：</dt>
	<dd>100ml</dd>
</dl>
</div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p>
</div>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</li>

</ol>

 

 

アイコン

小さいアイコン

ポイント

注意

NEW

初心者

別ウインドウ

矢印上

矢印右

矢印下

矢印左

ダウンロード

PDF

ZIP

メール

ショッピングカート

虫眼鏡

ホーム

フォルダ

時計

カレンダー

ビル

マップ

 

<div class="col2-wrap">
	<div class="col">
<p class="icon-point">ポイント</p>
<p class="icon-caution">注意</p>
<p class="icon-new">NEW</p>
<p class="icon-wakaba">初心者</p>
<p class="icon-blank">別ウインドウ</p>
<p class="icon-arrow-t">矢印上</p>
<p class="icon-arrow-r">矢印右</p>
<p class="icon-arrow-b">矢印下</p>
<p class="icon-arrow-l">矢印左</p>
<p class="icon-dl">ダウンロード</p>
<p class="icon-pdf">PDF</p>
	</div>
	<div class="col">
<p class="icon-zip">ZIP</p>
<p class="icon-mail">メール</p>
<p class="icon-cart">ショッピングカート</p>
<p class="icon-search">虫眼鏡</p>
<p class="icon-home">ホーム</p>
<p class="icon-folder">フォルダ</p>
<p class="icon-time">時計</p>
<p class="icon-calendar">カレンダー</p>
<p class="icon-building">ビル</p>
<p class="icon-map">マップ</p>
	</div>
</div>

 

大きいアイコン

ポイント

注意

NEW

初心者

別ウインドウ

矢印上

矢印右

矢印下

矢印左

ダウンロード

PDF

ZIP

メール

ショッピングカート

虫眼鏡

ホーム

フォルダ

時計

カレンダー

ビル

マップ

 

<div class="col2-wrap">
	<div class="col">
<p class="icon-point-l">ポイント</p>
<p class="icon-caution-l">注意</p>
<p class="icon-new-l">NEW</p>
<p class="icon-wakaba-l">初心者</p>
<p class="icon-blank-l">別ウインドウ</p>
<p class="icon-arrow-t-l">矢印上</p>
<p class="icon-arrow-r-l">矢印右</p>
<p class="icon-arrow-b-l">矢印下</p>
<p class="icon-arrow-l-l">矢印左</p>
<p class="icon-dl-l">ダウンロード</p>
<p class="icon-pdf-l">PDF</p>
	</div>
	<div class="col">
<p class="icon-zip-l">ZIP</p>
<p class="icon-mail-l">メール</p>
<p class="icon-cart-l">ショッピングカート</p>
<p class="icon-search-l">虫眼鏡</p>
<p class="icon-home-l">ホーム</p>
<p class="icon-folder-l">フォルダ</p>
<p class="icon-time-l">時計</p>
<p class="icon-calendar-l">カレンダー</p>
<p class="icon-building-l">ビル</p>
<p class="icon-map-l">マップ</p>
	</div>
</div>

 

カラム段組み（横並び）

4カラム

テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
<div class="col4-wrap">
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
</div>
<div class="col4-wrap">
<div class="col col_2of4">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
</div>

 

3カラム

テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
<div class="col3-wrap">
<div class="col">
	テキストが入ります。
</div>
<div class="col">
	テキストが入ります。
</div>
<div class="col">
	テキストが入ります。
</div>
</div>
<div class="col3-wrap">

<div class="col col_2of3">
	テキストが入ります。
</div>
<div class="col">
	テキストが入ります。
</div>
</div>

 

2カラム

テキストが入ります。
テキストが入ります。

 

<div class="col2-wrap">
<div class="col">
	テキストが入ります。
</div>
<div class="col">
	テキストが入ります。
</div>
</div>

 

 

画像とテキストの組み合わせ

画像の上にテキストを配置

お客様4

テキスト

お客様5

テキスト

お客様6

テキスト

<div class="col-wrap col3-wrap col-onimage">

<div class="col m20-b border">
<a href="#">
<img class="w100" src="/images/cast04-l.jpg" alt="お客様4" height="176" width="242">
</a>
<p class="text-onimage"><a href="#">テキスト</a></p>
</div>

<div class="col m20-b border">
<a href="#">
<img class="w100" src="/images/cast05-l.jpg" alt="お客様5" height="176" width="242">
</a>
<p class="text-onimage"><a href="#">テキスト</a></p>
</div>

<div class="col m20-b border">
<a href="#">
<img class="w100" src="/images/cast06-l.jpg" alt="お客様6" height="176" width="242">
</a>
<p class="text-onimage"><a href="#">テキスト</a></p>
</div>

</div>

背景画像の上にテキストを配置

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

<div class="col-wrap col3-wrap col-onimage02">

<div class="col m20-b border" style="background-image: url(/images/cast04-l.jpg);">
<a href="./customer/">
<p class="text-onimage">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</a>
</div>

<div class="col m20-b border" style="background-image: url(/images/cast05-l.jpg);">
<a href="./customer/">
<p class="text-onimage">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</a>
</div>

<div class="col m20-b border" style="background-image: url(/images/cast06-l.jpg);">
<a href="./customer/">
<p class="text-onimage">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</a>
</div>

</div>

 

 

Q&A

ここには質問文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには質問文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。
<dl class="qa-list">
<dt>ここには質問文が入ります。</dt>
<dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br>
ここには回答文が入ります。<br>
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd>

<dt>ここには質問文が入ります。</dt>
<dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br>
ここには回答文が入ります。<br>
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd>
</dl>

 

 

フローチャート図

  1. 手続きの流れに関する文章が入ります

    流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。

  2. 手続きの流れに関する文章が入ります

    流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。

  3. 手続きの流れに関する文章が入ります

<ol class="flow-chart">
	<li class="odd">
		<div class="process-box rc12">
		<p class="f12em b m0-b">手続きの流れに関する文章が入ります</p>
		<p class="m0-b">流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。</p>
		</div>
	</li>
	<li class="even">
		<div class="process-box rc12">
		<p class="f12em b m0-b">手続きの流れに関する文章が入ります</p>
		<p class="m0-b">流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。</p>
		</div>
	</li>
	<li class="odd">
		<div class="process-box rc12 end">
		<p class="f12em b m0-b">手続きの流れに関する文章が入ります</p>
		</div>
	</li>
</ol>

 

画像の装飾

猫4
ノーマル
猫4
影付き
猫4
影付き2
猫4
囲み線（1px）
猫4
角丸
猫4
円
猫4
写真風
<div class="col2-wrap al-c">
	<div class="col">
		<figure>
			<img src="/images/sample06.jpg" alt="猫4" height="300" width="300">
			<figcaption class="al-c">ノーマル</figcaption>
		</figure>
	</div>
	<div class="col" style="border:0;">
		<figure>
			<img class="shadow" src="/images/sample06.jpg" alt="猫4" height="300" width="300">
			<figcaption class="al-c">影付き</figcaption>
		</figure>
	</div>
</div>

<div class="col2-wrap al-c">
	<div class="col" style="border:0;">
		<figure>
			<img class="shadow02" src="/images/sample06.jpg" alt="猫4" height="300" width="300">
			<figcaption class="al-c">影付き2</figcaption>
		</figure>
	</div>
	<div class="col">
		<figure>
			<img class="outline" src="/images/sample06.jpg" alt="猫4" height="300" width="300">
			<figcaption class="al-c">囲み線（1px）</figcaption>
		</figure>
	</div>
</div>

<div class="col2-wrap al-c">
	<div class="col" style="border:0;">
		<figure>
			<img class="rc12" src="/images/sample06.jpg" alt="猫4" height="300" width="300">
			<figcaption class="al-c">角丸</figcaption>
		</figure> 
	</div>
	<div class="col">
		<figure>
			<img class="circle" src="/images/sample06.jpg" alt="猫4" height="300" width="300">
			<figcaption class="al-c">円</figcaption>
		</figure>
	</div>
</div>

<div class="col2-wrap al-c">
	<div class="col" style="border:0;">
		<figure>
			<img class="frame" src="/images/sample06.jpg" alt="猫4" height="300" width="300">
			<figcaption class="al-c">写真風</figcaption>
		</figure>
	</div>
</div>

 

 

登場人物紹介

登場人物Ａ
登場人物Ａ
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
登場人物Ｂ
登場人物Ｂ
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
登場人物Ｃ
登場人物Ｃ
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。

 

<div class="cast-box">

<dl class="cast">
<dt class="cast-name">登場人物Ａ</dt>
<dd class="cast-headshot"><img src="/images/cast01.jpg" alt="登場人物Ａ" height="100" width="100"></dd>
<dd class="cast-profile">
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
</dd>
</dl>

<dl class="cast">
<dt class="cast-name">登場人物Ｂ</dt>
<dd class="cast-headshot"><img src="/images/cast02.jpg" alt="登場人物Ｂ" height="100" width="100"></dd>
<dd class="cast-profile">
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
</dd>
</dl>

<dl class="cast">
<dt class="cast-name">登場人物Ｃ</dt>
<dd class="cast-headshot"><img src="/images/cast03.jpg" alt="登場人物Ｃ" height="100" width="100"></dd>
<dd class="cast-profile">
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
</dd>
</dl>

</div>

 

 

次回予告

次回のキャッチコピーが入ります。

次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。
次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。

次回、サイトタイトル
「次回のタイトルが入ります」

 

<div class="info-box">
<p class="trailer-text">次回のキャッチコピーが入ります。</p>
<p>次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。<br>
次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。</p>
<p class="trailer-text-l">次回、サイトタイトル<br>
「次回のタイトルが入ります」</p>
</div>

 

 

動画埋め込み

Youtube

<iframe src="https://www.youtube.com/embed/-ujaHz-RwNs" allowfullscreen="" height="315" frameborder="0" width="420"></iframe>

 

 

コンバージョンボタン

送信内容を確認する
送信内容を確認する
送信内容を確認する
送信内容を確認する
<div class="al-c m20">
<a href="#" class="btn btn-green"><span>送信内容を確認する</span></a>
</div>

<div class="al-c m20">
<a href="#" class="btn btn-blue"><span>送信内容を確認する</span></a>
</div>

<div class="al-c m20">
<a href="#" class="btn btn-orange"><span>送信内容を確認する</span></a>
</div>

<div class="al-c m20">
<a href="#" class="btn btn-red"><span>送信内容を確認する</span></a>
</div>

 

 

最新ネットビジネス速報をいち早くお届け！

有益な情報を最新で配信しています。

メルマガ登録