私が使っている賢威８のコードサンプル集

CTA関連

コメントボックス

<div class="commentary-box">
<div class="commentary-box_inner">

<h3 class="commentary-box_title title_no-style p100-r"><span>ボーンが教える</span><br>
説得ではなく「納得」してもらう<br>文章の組み立て</h3>
<div class="talker-thumb"><img alt="ボーン片桐" src="./images/sample/cast-bourne.png"></div>
<p class="m0-b">何かを主張するときには、それを聞く相手が「自分事」となるような要素を見つけるようにしろ。<br>
主張を支える具体的な言葉が読み手の「自分事」になれば、読み手はその言葉が作り上げる主張を「自分事」と感じ始める。<br>
そうなればやがて、相手はあなたの主張に「納得」するだろう。<br><br>
「納得」は「説得」とは異なる。<br>
説得とは相手を説き伏せることを指すが、納得とは、相手が自分の意志で他人の意見を理解することだ。<br><br>
ビジネスにおいて大切なのは「人を動かす」こと。<br>
人を動かすためには、相手を説得しようとするのではなく、相手に自分で納得してもらうことが大切なのだ。</p>

</div>
</div>

商品ボックス

<div class="item-box">
<div class="item-box_thumb">
	<a href="#"><img src="./images/sample/sample-book.jpg" alt="商品3" width="241" height="342"></a>
</div>
<h3 class="item-box_title title_no-style">書籍「沈黙のWebライティング —Webマーケッター ボーンの激闘—」</h3>
<div class="item-data">
<dl>
	<dt>価格：</dt>
	<dd><span class="red f12em">2,160円</span><small>（税込）</small></dd>
</dl>
</div>
<div class="item-box_desc">
<p class="f08em m0-b">謎のWebマーケッター「ボーン・片桐」の活躍を「ハードボイルドに」描いたストーリーから楽しくWebライディングを学べる実用入門書。<br><br>
マンガコンテンツを通じてWebで「成果を上げる」ための文章の書き方、SEOに強いライティングのノウハウの基礎を学んだあとは、各章の終わりにある実践的・専門的な解説を読めばより深い知識を身に付けることができます。<br><br>
ブロガーやライターだけでなくすべてのWeb担当者にもオススメできるライティング本です。</p>
</div>
<div class="btn-detail">
	<a href="#" class="btn dir-arw_r btn_gray"><span class="icon_arrow_s_right"></span>Amazonで詳細を見る</a>
</div>
</div>

商品ボックス２

<section class="item-box02">
<div class="item-box_inner">
	<h3 class="item-box_title title_no-style">料金プラン・ご購入</h3>
	<div class="item-box_thumb">
		<img src="./images/sample/sample-service.png" alt="商品3" width="393" height="335">
	</div>
	<div class="item-data">
		<div class="item-data_sec al-c">
			初期費用 <span class="f20em red b">5,400</span>円（税込）<br>
			<span class="f20em">+</span><br>
			月額費用 <span class="f20em red b">1,980</span>円（税込）<br>
		</div>
		<div class="al-c">
			<p class="b m0-b f20rem">支払い方法</p>
			<div>PayPalを用いたクレジットカード決済</div>
		</div>
		<div class="btn-detail">
			<a href="#" class="btn dir-arw_r btn_orange"><span class="icon_arrow_s_right"></span>ご購入はこちらから</a>
		</div>
	</div>
</div>
</section>

商品ボックス３

<section class="item-box03">
<div class="item-box_inner">
	<h3 class="item-box_title title_no-style">賢威7 WordPress版</h3>
	<div class="item-box03_col_wrap">
		<div class="item-box03_col item-box03_thumb">
			<img src="./images/sample/package-keni7.png" alt="商品3" width="309" height="328">
		</div>
		<div class="item-box03_col item-box03_cont">
		<p>賢威のWordPressテンプレートでは、特別なプラグインを入れなくても、SEOでよく使う設定を初期設定で組み込んでいます。<br>
		これが、賢威のWordPressがSEOに強い理由のひとつです。</p>
			<table class="tl-f">
				<tbody>
					<tr>
						<th>バリエーション</th>
						<th>カラム数</th>
						<th>言語</th>
					</tr>
					<tr>
						<td>25種類</td>
						<td>3パターン</td>
						<td>HTML5</td>
					</tr>
					<tr>
						<th>サーバ環境</th>
						<th>WPのバージョン</th>
						<th>-</th>
					</tr>
					<tr>
						<td>PHP 5.6以上<br>MySQL 5.5 以上</td>
						<td>WordPress 4.8 以上</td>
						<td></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="btn-detail_wrap">
		<div class="btn-detail_col btn-detail_left w40 p10-r"><a href="#" class="btn btn_gray m0 w100">詳細</a></div>
		<div class="btn-detail_col btn-detail_right w60"><a href="#" class="btn dir-arw_r btn_orange m0 w100"><span class="icon_arrow_s_right"></span>ご購入はこちら</a></div>
	</div>
</div>
</section>

お問合せボタン

<div class="contact-box">
<div class="contact-box_inner">
	<h3 class="contact-box-title title_no-style">お問い合わせはこちらから</h3>
	<div class="contact-box_in">
		<div class="contact-box-item contact-box_tel">
			075-7X8-7X8
			<span>（受付時間 平日9:00～18:00）</span>
		</div>

		<div class="contact-box-item contact-box_mail">
			<a href="#" class="btn dir-arw_r btn btn_style01"><span class="icon_arrow_s_right"></span><span class="icon_mail"></span>メールでのお問い合わせ</a>
		</div>
	</div>
</div>
</div>

基本的なスタイル

横並び

• リストが入ります。
• リストが入ります。

<ul class="inline">
<li>リストが入ります。</li>
<li>リストが入ります。</li>
</ul>

チェックリスト

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

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

1. テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
2. テキストが入ります。
3. テキストが入ります。
4. テキストが入ります。
5. テキストが入ります。
6. テキストが入ります。
7. テキストが入ります。
8. テキストが入ります。
9. テキストが入ります。
10. テキストが入ります。

<ol class="list_style02">
<li>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。</li>
<li>テキストが入ります。</li>
<li>テキストが入ります。</li>
<li>テキストが入ります。</li>
<li>テキストが入ります。</li>
<li>テキストが入ります。</li>
<li>テキストが入ります。</li>
<li>テキストが入ります。</li>
<li>テキストが入ります。</li>
</ol>

Q&Aリスト

ここには質問文が入ります。

ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。

ここには質問文が入ります。

ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。

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

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

吹き出し

<div class="chat_l">
<div class="talker"><b><img class="circle" alt="登場人物A" src="./images/cast01.jpg"></b></div>
<div class="bubble_wrap">
<div class="chat_l">
<div class="talker"><b><img class="circle" alt="登場人物A" src="./images/cast01.jpg">笑顔の登場人物A</b></div>
<div class="bubble_wrap">
<div class="bubble">
<div class="bubble_in">
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div>
</div>
</div>
</div>

<div class="chat_r">
<div class="talker"><b><img class="circle" alt="登場人物B" src="./images/cast02.jpg">笑顔の登場人物B</b></div>
<div class="bubble_wrap">
<div class="bubble"><div class="bubble_in">
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div></div>
</div>
</div>

デザインパーツ

登場人物紹介

<div class="cast-box">
<div class="box_inner">
	
<dl class="cast">
<dt class="cast_name">登場人物Ａ</dt>
<dd class="cast_headshot"><a href="#"><img src="./images/cast03.jpg" width="160" height="160" alt="登場人物Ａ"></a></dd>
<dd class="cast_profile">
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
</dd>
</dl>

<dl class="cast">
<dt class="cast_name">登場人物Ｂ</dt>
<dd class="cast_headshot"><a href="#"><img src="./images/cast04.jpg" width="160" height="160" alt="登場人物Ｂ"></a></dd>
<dd class="cast_profile">
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
</dd>
</dl>

<dl class="cast">
<dt class="cast_name">登場人物Ｃ</dt>
<dd class="cast_headshot"><a href="#"><img src="./images/cast05.jpg" width="160" height="160" alt="登場人物Ｃ"></a></dd>
<dd class="cast_profile">
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
</dd>
</dl>

</div>
</div>

次回予告

<h2>次回予告</h2>
<div class="advance-billing-box box_style box_style05">
<h3 class="advance-billing-box_title title_no-style">次回のキャッチコピーが入ります！</h3>
<p>次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。<br>
次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります次回の内容のあらすじが入ります。</p>
<p class="advance-billing-box_next-title">「次回のタイトルが入ります」</p>
</div>

マルチカラムの設定

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

お客様の声

<div class="voice-box voice_styl03">

<dl class="voice">
<dt class="voice_title">
<span class="voice_name">Bさん</span>
<span class="voice_job">ご職業：ネットショップ制作</span>
<span class="voice_career">ご購入年：2013年</span>
</dt>
<dd class="voice_headshot"><a href="#"><img src="./images/cast04.jpg" width="75" height="75" alt="登場人物Ｂ"></a></dd>
<dd class="voice_cont">
<p>ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br>
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。</p>
</dd>
</dl>

</div>

ランキングリスト

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

   ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
2. 項目名などが入ります

   ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
3. 項目名などが入ります

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

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

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

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

   ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
6. 項目名などが入ります
7. 項目名などが入ります
8. 項目名などが入ります
9. 項目名などが入ります
10. 項目名などが入ります

<ol class="ranking-list">

<li class="ranking-list_item ranking-list_item_hasimage">
	<div class="rank_thumb"><img src="./images/sample001.jpg" alt="サンプル" width="200" height="200"></div>
	<h5 class="rank_title title_no-style">項目名などが入ります</h5>
	<div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div>
</li>

<li class="ranking-list_item ranking-list_item_hasimage">
	<div class="rank_thumb"><img src="./images/sample002.jpg" alt="サンプル" width="200" height="200"></div>
	<h5 class="rank_title title_no-style">項目名などが入ります</h5>
	<div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div>
</li>

<li class="ranking-list_item ranking-list_item_hasimage">
	<div class="rank_thumb"><img src="./images/sample003.jpg" alt="サンプル" width="200" height="200"></div>
	<h5 class="rank_title title_no-style">項目名などが入ります</h5>
	<div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div>
</li>

<li class="ranking-list_item">
	<h5 class="rank_title title_no-style">項目名などが入ります</h5>
	<div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div>
</li>

<li class="ranking-list_item">
	<h5 class="rank_title title_no-style">項目名などが入ります</h5>
	<div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div>
</li>

<li class="ranking-list_item">
	<div class="rank_title">項目名などが入ります</div>
</li>

<li class="ranking-list_item">
	<div class="rank_title">項目名などが入ります</div>
</li>

<li class="ranking-list_item">
	<div class="rank_title">項目名などが入ります</div>
</li>

<li class="ranking-list_item">
	<div class="rank_title">項目名などが入ります</div>
</li>

<li class="ranking-list_item">
	<div class="rank_title">項目名などが入ります</div>
</li>
</ol>

情報比較エリア

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

   価格：

   2,000円（税込）

   容量：

   100ml

   価格	5.0
   使用感	3.5
   効果	4.0

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

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

   管理人のレビュー

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

   商品詳細を見る

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

   価格：

   2,000円（税込）

   容量：

   100ml

   価格	5.0
   使用感	3.5
   効果	4.0

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

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

   管理人のレビュー

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

   商品詳細を見る

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

   価格：

   2,000円（税込）

   容量：

   100ml

   価格	5.0
   使用感	3.5
   効果	4.0

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

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

   管理人のレビュー

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

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

   商品詳細を見る

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

<li class="ranking-list_item ranking-list_item_hasimage">

<div class="rank_thumb">
<img src="./images/sample004.jpg" alt="サンプル" width="315" height="210">
</div>

<div class="item-data_outer">
<h3 class="rank_title title_no-style">商品名が入ります（メーカー名）</h3>
<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>
<table class="review-table">
<tr>
<th>価格</th>
<td><span class="review_star star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="review_star star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="review_star star40">4.0</span></td>
</tr>
</table>

</div>

<div class="rank_desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review_desc">
<h4 class="review_desc_title title_no-style">管理人のレビュー</h4>
<p class="m0-b">管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p>
</div>
<p class="btn-detail"><a class="btn dir-arw_r btn_style02" href="#"><span class="icon_arrow_s_right"></span> 商品詳細を見る</a></p>


</li>


<li class="ranking-list_item ranking-list_item_hasimage">
<div class="rank_thumb">
<img src="./images/sample005.jpg" alt="サンプル" width="315" height="210">
</div>

<div class="item-data_outer">
<h3 class="rank_title title_no-style">商品名が入ります（メーカー名）</h3>
<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>
<table class="review-table">
<tr>
<th>価格</th>
<td><span class="review_star star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="review_star star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="review_star star40">4.0</span></td>
</tr>
</table>
</div>

<div class="rank_desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review_desc">
<h5 class="review_desc_title title_no-style">管理人のレビュー</h5>
<p class="m0-b">管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p>
</div>
<p class="btn-detail"><a class="btn dir-arw_r btn_style02" href="#"><span class="icon_arrow_s_right"></span> 商品詳細を見る</a></p>

</li>


<li class="ranking-list_item ranking-list_item_hasimage">
<div class="rank_thumb">
<img src="./images/sample006.jpg" alt="サンプル" width="315" height="210">
</div>

<div class="item-data_outer">
<h3 class="rank_title title_no-style">商品名が入ります（メーカー名）</h3>

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

<table class="review-table">
<tr>
<th>価格</th>
<td><span class="review_star star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="review_star star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="review_star star40">4.0</span></td>
</tr>
</table>

</div>

<div class="rank_desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review_desc">
<h5 class="review_desc_title title_no-style">管理人のレビュー</h5>
<p>管理人のレビューが入ります。管理人のレビューが入ります。</p>
<p class="m0-b">管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p>
</div>
<p class="btn-detail"><a class="btn dir-arw_r btn_style02" href="#"><span class="icon_arrow_s_right"></span> 商品詳細を見る</a></p>


</li>
</ol><!--ranking-list-->

レビューの星

0.0 0.5 1.0 1.5 2.0 2.5 3.0 3.5 4.0 4.5 5.0 5.5

<span class="review_star star00">0.0</span>
<span class="review_star star05">0.5</span>
<span class="review_star star10">1.0</span>
<span class="review_star star15">1.5</span>
<span class="review_star star20">2.0</span>
<span class="review_star star25">2.5</span>
<span class="review_star star30">3.0</span>
<span class="review_star star35">3.5</span>
<span class="review_star star40">4.0</span>
<span class="review_star star45">4.5</span>
<span class="review_star star50">5.0</span>
<span class="review_star star55">5.5</span>

テーブル関連

<div class="table-scroll">
<table style="width: 500px;">
<thead>
<tr>
<th></th>
<th>項目名</th>
<th>項目名</th>
</tr>
</thead>
<tbody>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tbody>
</table><!--標準のテーブル-->
</div><!--はみ出した分横にスクロールするスタイル-->