賢威7に予め用意されている装飾用CSSは賢威6までのものとは異なります。
2016年12月9日追加分
賢威公式サイトで公開された賢威7用CSSで、ここに記載していなかったものがあったので追記しました。
文字装飾
文字色
文字色を水色に変更することができます。
|
1 |
<p class="aqua">文字色を水色に変更することができます。</p> |
文字色を赤色に変更することができます。
|
1 |
<p class="red">文字色を赤色に変更することができます。</p> |
文字色をオレンジ色に変更することができます。
|
1 |
<p class="orange">文字色をオレンジ色に変更することができます。</p> |
文字色をピンク色に変更することができます。
|
1 |
<p class="pink">文字色をピンク色に変更することができます。</p> |
文字色を紫色に変更することができます。
|
1 |
<p class="purple">文字色を紫色に変更することができます。</p> |
文字色を緑色に変更することができます。
|
1 |
<p class="green">文字色を緑色に変更することができます。</p> |
文字色を青色に変更することができます。
|
1 |
<p class="blue">文字色を青色に変更することができます。</p> |
文字色を黄色に変更することができます。
|
1 |
<p class="yellow">文字色を黄色に変更することができます。</p> |
文字色をオリーブ色に変更することができます。
|
1 |
<p class="olive">文字色をオリーブ色に変更することができます。</p> |
文字色をライム色に変更することができます。
|
1 |
<p class="lime">文字色をライム色に変更することができます。</p> |
文字色を黒色に変更することができます。
|
1 |
<p class="black">文字色を黒色に変更することができます。</p> |
文字色を灰色に変更することができます。
|
1 |
<p class="gray">文字色を灰色に変更することができます。</p> |
文字背景色装飾
オレンジ色の背景色
|
1 |
<span class="box-orange">オレンジ色の背景色</span> |
ピンク色の背景色
|
1 |
<span class="box-pink">ピンク色の背景色</span> |
黄色の背景色
|
1 |
<span class="box-pink">ライム色の背景色</span> |
ライム色の背景色
|
1 |
<span class="box-lime">ライム色の背景色</span> |
灰色の背景色
|
1 |
<span class="box-gray">灰色の背景色</span> |
記述リスト(dl dt dd) その1
- 記述リストのデザインその1
- 要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。 - 記述リストのデザインその1
- 要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。 - 記述リストのデザインその1
- 要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<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
- 要素が縦に並びます。
|
1 2 3 4 5 6 7 8 |
<dl class="dl-style02"> <dt>記述リストのデザインその2</dt> <dd>要素が縦に並びます。</dd> <dt>記述リストのデザインその2</dt> <dd>要素が縦に並びます。</dd> <dt>記述リストのデザインその2</dt> <dd>要素が縦に並びます。</dd> </dl> |
透過ボックス
サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。
|
1 2 3 4 5 |
<div class="transparent-panel-wrap"> <div class="transparent-panel"> <p>サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。</p> </div> </div> |
テーブルレイアウト
標準テーブル
| 項目名 | 項目名 | |
|---|---|---|
| 項目名が入ります | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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> |
比較テーブル
| 項目内容 | 項目内容 | 項目内容 | |
|---|---|---|---|
| 項目名が入ります | 項目内容 | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 | 項目内容 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<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> |
チェックリスト
小さいチェックリスト
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
|
1 2 3 4 5 6 7 |
<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> |
大きいチェックリスト
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
|
1 2 3 4 5 6 7 |
<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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
情報比較エリア
商品掲載例（王冠）
-
商品名が入ります（メーカー名）
価格 5.0 使用感 3.5 効果 4.0 - 価格：
- 2,000円（税込）
- 容量：
- 100ml
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
-
商品名が入ります（メーカー名）
価格 5.0 使用感 3.5 効果 4.0 - 価格：
- 2,000円（税込）
- 容量：
- 100ml
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
-
商品名が入ります（メーカー名）
価格 5.0 使用感 3.5 効果 4.0 - 価格：
- 2,000円（税込）
- 容量：
- 100ml
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<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> |
商品掲載例（画像にアイコンを重ねる場合）
-
項目名などが入ります
価格 5.0 使用感 3.5 効果 4.0 - 価格：
- 2,000円（税込）
- 容量：
- 100ml
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
管理人のレビュー
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
-
項目名などが入ります
価格 5.0 使用感 3.5 効果 4.0 - 価格：
- 2,000円（税込）
- 容量：
- 100ml
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
管理人のレビュー
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
-
項目名などが入ります
価格 5.0 使用感 3.5 効果 4.0 - 価格：
- 2,000円（税込）
- 容量：
- 100ml
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
管理人のレビュー
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<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
初心者
別ウインドウ
矢印上
矢印右
矢印下
矢印左
ダウンロード
ZIP
メール
ショッピングカート
虫眼鏡
ホーム
フォルダ
時計
カレンダー
ビル
マップ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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
初心者
別ウインドウ
矢印上
矢印右
矢印下
矢印左
ダウンロード
ZIP
メール
ショッピングカート
虫眼鏡
ホーム
フォルダ
時計
カレンダー
ビル
マップ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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カラム
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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カラム
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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カラム
テキストが入ります。
テキストが入ります。
|
1 2 3 4 5 6 7 8 |
<div class="col2-wrap"> <div class="col"> テキストが入ります。 </div> <div class="col"> テキストが入ります。 </div> </div> |
画像とテキストの組み合わせ
画像の上にテキストを配置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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> |
背景画像の上にテキストを配置
テキストが入りますテキストが入りますテキストが入りますテキストが入ります
テキストが入りますテキストが入りますテキストが入りますテキストが入ります
テキストが入りますテキストが入りますテキストが入りますテキストが入ります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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
- ここには質問文が入ります。
- ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。 - ここには質問文が入ります。
- ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。
|
1 2 3 4 5 6 7 8 9 10 11 |
<dl class="qa-list"> <dt>ここには質問文が入ります。</dt> <dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br> ここには回答文が入ります。<br> ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd> <dt>ここには質問文が入ります。</dt> <dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br> ここには回答文が入ります。<br> ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd> </dl> |
フローチャート図
-
手続きの流れに関する文章が入ります
流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。
-
手続きの流れに関する文章が入ります
流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。
-
手続きの流れに関する文章が入ります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
画像の装飾
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<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> |
登場人物紹介
- 登場人物Ａ
- ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
- 登場人物Ｂ
- ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
- 登場人物Ｃ
- ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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> |
次回予告
次回のキャッチコピーが入ります。
次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。
次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。
次回、サイトタイトル
「次回のタイトルが入ります」
|
1 2 3 4 5 6 7 |
<div class="info-box"> <p class="trailer-text">次回のキャッチコピーが入ります。</p> <p>次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。<br> 次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。</p> <p class="trailer-text-l">次回、サイトタイトル<br> 「次回のタイトルが入ります」</p> </div> |
動画埋め込み
Youtube
|
1 |
<iframe src="https://www.youtube.com/embed/-ujaHz-RwNs" allowfullscreen="" height="315" frameborder="0" width="420"></iframe> |
コンバージョンボタン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
最新ネットビジネス速報をいち早くお届け！
有益な情報を最新で配信しています。
| メルマガ登録 |
