*サンプルページ – 投稿編集用

2016年10月8日

（１）cssライブラリ

本文

リード文：lead

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

 HTMLコード<p class="lead">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

背景付引用：bq_bk

引用見出し
引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。

 HTMLコード<blockquote class="bq_bk"><strong>引用見出し</strong>
引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。引用が入ります。</blockquote>

テーブル

水平スクロールテーブル：res-h

テーブル見出し	テーブル見出し	テーブル見出し
テーブルのデータ	テーブルのデータ	テーブルのデータ
テーブルのデータ	テーブルのデータ	テーブルのデータ

 HTMLコード<table class="res-h">
  <tbody>
  <tr>
    <th>テーブル見出し</th>
    <th>テーブル見出し</th>
    <th>テーブル見出し</th>
  </tr>
  <tr>
    <td>テーブルのデータ</td>
    <td>テーブルのデータ</td>
    <td>テーブルのデータ</td>
  </tr>
  <tr>
    <td>テーブルのデータ</td>
    <td>テーブルのデータ</td>
    <td>テーブルのデータ</td>
  </tr>
  </tbody>
</table>

お問い合わせリンクスタイル：contact

◯◯◯◯◯に関することはお気軽にお問い合わせください！

000-000-0000
営業時間月～金 9:00～18:00

お問い合わせ・資料請求

メールは24時間受け付けております。

 HTMLコード<div class="contact">
<div class="contact_sb">
<p class="lead">◯◯◯◯◯に関することはお気軽にお問い合わせください！</p>
<p class="tel"><a href="#"><i class="fa fa-phone" aria-hidden="true"></i> 000-000-0000
<small>営業時間 月～金 9:00～18:00</small></a></p>
<p class="mail"><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i> お問い合わせ・資料請求</a></p>
<p class="ex">メールは24時間受け付けております。</p>
</div>
</div>

（２）コンポーネント

画像＋文章

画像＋文章（ノーマル/画像左）：imgtxt_l

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

 HTMLコード<div class="imgtxt_l">
<div class="ttl"><a href="http://laplusbox8.com/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://laplusbox8.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

画像＋文章（ノーマル/画像右）：imgtxt_r

 HTMLコード<div class="imgtxt_r">
<div class="ttl"><a href="http://laplusbox8.com/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://laplusbox8.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

画像＋文章（フルワイズ）

画像＋文章（フルワイズ/画像左）：imgtxt_full_l

 HTMLコード<div class="imgtxt_full_l">
<div class="ttl"><a href="http://laplusbox8.com/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://laplusbox8.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

画像＋文章（フルワイズ/画像右）：imgtxt_full_r

 HTMLコード<div class="imgtxt_full_r">
<div class="ttl"><a href="http://laplusbox8.com/wp-content/uploads/noimage-mid.png"><img class="alignnone size-full wp-image-725" src="http://laplusbox8.com/wp-content/uploads/noimage-mid.png" alt="" width="300" height="200" /></a></div>
<div class="txt">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
</div>

価格カード：price_card

価格カード（１個）

商品名A – AAAA11111

23,000円