実店舗MENU

【見出し(h1〜h5)】

Hedding見出し1(h1)

ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。

<h1><span>Hedding<span class="translation">見出し1(h1)</span></span></h1>

見出し2(h2)

ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。

<h2>見出し2(h2)</h2>

見出し3(h3)

ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。

<h3>見出し3(h3)</h3>

見出し4(h4)

ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。

<h4>見出し4(h4)</h4>
見出し5(h5)

ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。ここに本文がはいります。

<h5>見出し5(h5)</h5>

【リスト(ul > li)】

  • リスト(li)
    リスト(li)
  • リスト(li)
  • リスト(li)
  • リスト(li)
<ul class="list">
  <li>リスト(li)</li>
  <li>リスト(li)</li>
  <li>リスト(li)</li>
  <li>リスト(li)</li>
</ul>
<ul class="link">
<li><a href="#">リスト(li)</a></li>
<li><a href="#">リスト(li)</a></li>
<li><a href="#">リスト(li)</a></li>
<li><a href="#">リスト(li)</a></li>
</ul>

【定義リスト(dl > dt,dd)】

dtが入ります。
ddが入ります。ddが入ります。ddが入ります。ddが入ります。ddが入ります。ddが入ります。ddが入ります。
dtが入ります。
ddが入ります。ddが入ります。ddが入ります。ddが入ります。ddが入ります。ddが入ります。ddが入ります。
<dl>
  <dt>dtが入ります。</dt>
  <dd>ddが入ります。ddが入ります。ddが入ります。ddが入ります。</dd>
  <dt>dtが入ります。</dt>
  <dd>ddが入ります。ddが入ります。ddが入ります。ddが入ります。</dd>
</dl>
dtが入ります。
ddが入ります。ddが入ります。ddが入ります。ddが入ります。ddが入ります。ddが入ります。ddが入ります。
dtが入ります。
ddが入ります。ddが入ります。ddが入ります。ddが入ります。ddが入ります。ddが入ります。ddが入ります。

<dl class="horizontal">
  <dt>dtが入ります。</dt>
  <dd>ddが入ります。ddが入ります。ddが入ります。ddが入ります。</dd>
  <dt>dtが入ります。</dt>
  <dd>ddが入ります。ddが入ります。ddが入ります。ddが入ります。</dd>
  </dl>
<br class="clear">

【ボタン型リンク(a)】

リンクテキスト

<p><a class="link-btn">リンクテキスト</a></p>

リンクテキスト

<p><a class="link-btn-em">リンクテキスト</a></p>

【テーブル - 表(table > tr > th,td)】

th td
th td
th td
<table width="100%">
  <tr>
    <th>th</th>
    <td>td</td>
  </tr>
  <tr>
    <th>th</th>
    <td>td</td>
  </tr>
  <tr>
    <th>th</th>
    <td>td</td>
  </tr>
</table>

要素の上部にマージン追加

マージン上部 なし

<p class="mt-0">マージン上部 なし</p>

マージン上部 10px

<p class="mt-10">マージン上部 10px</p>

マージン上部 20px

<p class="mt-20">マージン上部 20px</p>

マージン上部 30px

<p class="mt-30">マージン上部 30px</p>

マージン上部 40px

<p class="mt-40">マージン上部 40px</p>

マージン上部 50px

<p class="mt-50">マージン上部 50px</p>

【Notice用ボックス】

ご購入前に確認ください。

  • ※ここに注意事項が入ります。ここに注意事項が入ります。ここに注意事項が入ります。
  • ※ここに注意事項が入ります。ここに注意事項が入ります。ここに注意事項が入ります。
  • ※ここに注意事項が入ります。ここに注意事項が入ります。ここに注意事項が入ります。
  • ※ここに注意事項が入ります。ここに注意事項が入ります。ここに注意事項が入ります。

<div class="notice">
  <div class="inner">
    <h2>ご購入前に確認ください。</h2>
    <ul class="rice">
      <li>※ここに注意事項が入ります。ここに注意事項が入ります。</li>
      <li>※ここに注意事項が入ります。ここに注意事項が入ります。</li>
      <li>※ここに注意事項が入ります。ここに注意事項が入ります。</li>
    <li>※ここに注意事項が入ります。ここに注意事項が入ります。</li>
    </ul>
    <ul class="icon-link">
      <li><a class="link-btn">ガラス製品について</a></li>
    </ul>
    <br class="clear">
  </div>
</div>

【ブランド紹介用ボックス】

ブランド名が入ります。

ここに説明文がはいります。ここに説明文がはいります。ここに説明文がはいります。ここに説明文がはいります。ここに説明文がはいります。ここに説明文がはいります。ここに説明文がはいります。ここに説明文がはいります。ここに説明文がはいります。


<div class="brand">
  <div class="left"><img src="/site_data/cabinet/test/img_brand.jpg"></div>
  <div class="right">
    <h3>ブランド名が入ります。</h3>
    <p>ここに説明文がはいります。ここに説明文がはいります。ここに説明文がはいります。</p>
    <ul class="link inline">
      <li><a href="#">詳細はこちら</a></li>
      <li><a href="#">商品一覧はこちら</a></li>
    </ul>
  </div>
  <br class="clear">
</div>

【ブランド・カテゴリ紹介】

ブランド・カテゴリの説明文がはいります。ブランド・カテゴリの説明文がはいります。ブランド・カテゴリの説明文がはいります。ブランド・カテゴリの説明文がはいります。ブランド・カテゴリの説明文がはいります。ブランド・カテゴリの説明文がはいります。ブランド・カテゴリの説明文がはいります。ブランド・カテゴリの説明文がはいります。

ブランド名
<div class="category-profile">
		<div class="inner">
		  <h2 class="logo"><img src="/site_date/cabinet/test/brandlogo.png" alt="ブランド名"></h2>
		  <p>ブランド・カテゴリの説明文がはいります。ブランド・カテゴリの説明文がはいります。ブランド・カテゴリの説明文がはいります。ブランド・カテゴリの説明文がはいります。ブランド・カテゴリの説明文がはいります。ブランド・カテゴリの説明文がはいります。ブランド・カテゴリの説明文がはいります。ブランド・カテゴリの説明文がはいります。</p>
		</div>
		<img class="bg-img" src="/site_date/cabinet/test/bg_brand.jpg" alt="ブランド名">
</div>

【照明取り付け】

取り付けについて

右図の配線器具がついていれば、本体の取り付け・取り外しが電気工事なしで簡単に行えます。

配線器具

ペンダントコード長さ加工価格

引掛シーリングキャップ上端から、器具下端までが全長となります。加工は全長をご指示くださいませ。

全長

全長

全長 カット(短縮) 4m以下
通常の引掛シーリング [A] 通常の引掛シーリング [A] 0,000- 0,000-
ダクトプラグに変更の場合 [B] ダクトプラグに変更の場合 [B] 0,000- 0,000-
<div class="attachment">
    <h3>取り付けについて</h3>
    <div class="equipment">
        <div class="float-l">
            <p>説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
        </div>
        <div class="float-r">
            <p><img src="/画像URL" alt="配線器具"></p>
        </div>
    </div>

    <div class="price">
        <div class="float-l">
            <h4>ペンダントコード長さ加工価格</h4>
            <p>説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
        </div>
        <div class="float-l tow-rows">
            <p><img src="/画像URL" alt="全長"></p>
        </div>
        <div class="float-l tow-rows">
            <p><img src="/画像URL" alt="全長"></p>
        </div>
    </div>
    <table>
        <tr>
            <th>全長</th>
            <th>カット(短縮)</th>
            <th>4m以下</th>
        </tr>
        <tr>
            <td><span class="img"><img src=""></span>通常の引掛シーリング [A]</td>
            <td><a href="#">0,000-</a></td>
            <td><a href="#">0,000-</a></td>
        </tr>
        <tr>
            <td><span class="img"><img src=""></span>ダクトプラグに変更の場合 [B]</td>
            <td><a href="#">0,000-</a></td>
            <td><a href="#">0,000-</a></td>
        </tr>
    </table>
</div>

【幅1030pxレイアウト用 詳細写真】

                <div class="layout-frame-3col">
                    <div class="layout-unit col-4-l">
                        <p><img src="/site_date/cabinet/test/img_deteil.jpg" alt=""></p>
                    </div>
                    <div class="layout-unit col-4-l">
                        <p><img src="/site_date/cabinet/test/img_deteil.jpg" alt=""></p>
                    </div>
                    <div class="layout-unit col-4-l">
                        <p><img src="/site_date/cabinet/test/img_deteil.jpg" alt=""></p>
                    </div>
                </div>
                

カテゴリーページ 画像スライダー

  • ヴィンテージ
  • ヴィンテージ
  • ヴィンテージ
  • ヴィンテージ
  • ヴィンテージ
<div class="slider-main">
		<ul class="bx-slider-content">
				<li><img src="/common/img/img_vintage_001.jpg" alt="ヴィンテージ"></li>
				<li><img src="/common/img/img_vintage_002.jpg" alt="ヴィンテージ"></li>
				<li><img src="/common/img/img_vintage_003.jpg" alt="ヴィンテージ"></li>
				<li><img src="/common/img/img_vintage_004.jpg" alt="ヴィンテージ"></li>
				<li><img src="/common/img/img_vintage_005.jpg" alt="ヴィンテージ"></li>
		</ul>
</div>

画像スライダー(1030px)


<div class="slide-imege">
<div class="slider-main wide">
		<ul class="bx-slider-wide">
				<li><img src="http://www.connect-d.com/images/items/vd151219-80_1.jpg" alt=""></li>
				<li><img src="http://www.connect-d.com/images/items/vd151219-80_2.jpg" alt=""></li>
				<li><img src="http://www.connect-d.com/images/items/vd151219-80_3.jpg" alt=""></li>
				<li><img src="http://www.connect-d.com/images/items/vd151219-80_4.jpg" alt=""></li>
				<li><img src="http://www.connect-d.com/images/items/vd151219-80_5.jpg" alt=""></li>
				<li><img src="http://www.connect-d.com/images/items/vd151219-80_6.jpg" alt=""></li>
				<li><img src="http://www.connect-d.com/images/items/vd151219-80_7.jpg" alt=""></li>
				<li><img src="http://www.connect-d.com/images/items/vd151219-80_8.jpg" alt=""></li>
				<li><img src="http://www.connect-d.com/images/items/vd151219-80_9.jpg" alt=""></li>
				<li><img src="http://www.connect-d.com/images/items/vd151219-80_10.jpg" alt=""></li>
		</ul>
</div>

<div class="thumbnail">
		<ul class="bx-pager">
				<li><a data-slide-index="0" href=""><img src="http://www.connect-d.com/images/items/vd151219-80_1.jpg" alt="" /></a></li>
				<li><a data-slide-index="1" href=""><img src="http://www.connect-d.com/images/items/vd151219-80_2.jpg" alt="" /></a></li>
				<li><a data-slide-index="2" href=""><img src="http://www.connect-d.com/images/items/vd151219-80_3.jpg" alt="" /></a></li>
				<li><a data-slide-index="3" href=""><img src="http://www.connect-d.com/images/items/vd151219-80_4.jpg" alt="" /></a></li>
				<li><a data-slide-index="4" href=""><img src="http://www.connect-d.com/images/items/vd151219-80_5.jpg" alt="" /></a></li>
				<li><a data-slide-index="5" href=""><img src="http://www.connect-d.com/images/items/vd151219-80_6.jpg" alt="" /></a></li>
				<li><a data-slide-index="6" href=""><img src="http://www.connect-d.com/images/items/vd151219-80_7.jpg" alt="" /></a></li>
				<li><a data-slide-index="7" href=""><img src="http://www.connect-d.com/images/items/vd151219-80_8.jpg" alt="" /></a></li>
				<li><a data-slide-index="8" href=""><img src="http://www.connect-d.com/images/items/vd151219-80_9.jpg" alt="" /></a></li>
				<li><a data-slide-index="9" href=""><img src="http://www.connect-d.com/images/items/vd151219-80_10.jpg" alt="" /></a></li>
				<br class="clear">
		</ul>
</div>
</div>

子カテゴリーリスト

<div class="sub-category-list">
		<ul>
				<li><a href="#"><img src="/common/img/icon_vintage_001.png" alt="チェア"><span>チェア</span></a></li>
				<li><a href="#"><img src="/common/img/icon_vintage_002.png" alt="ソファ"><span>ソファ</span></a></li>
				<li><a href="#"><img src="/common/img/icon_vintage_003.png" alt="シェルフ"><span>シェルフ</span></a></li>
				<li><a href="#"><img src="/common/img/icon_vintage_004.png" alt="チェスト"><span>チェスト</span></a></li>
				<li><a href="#"><img src="/common/img/icon_vintage_005.png" alt="サイドボード"><span>サイドボード</span></a></li>
				<li><a href="#"><img src="/common/img/icon_vintage_006.png" alt="ビューロー"><span>ビューロー</span></a></li>
				<li><a href="#"><img src="/common/img/icon_vintage_007.png" alt="キャビネット"><span>キャビネット</span></a></li>
				<li><a href="#"><img src="/common/img/icon_vintage_008.png" alt="テーブル"><span>テーブル</span></a></li>
				<li><a href="#"><img src="/common/img/icon_vintage_009.png" alt="ダイニングテーブル"><span>ダイニングテーブル</span></a></li>
				<li><a href="#"><img src="/common/img/icon_vintage_010.png" alt="デスク"><span>デスク</span></a></li>
				<li><a href="#"><img src="/common/img/icon_vintage_011.png" alt="ワゴン"><span>ワゴン</span></a></li>
				<li><a href="#"><img src="/common/img/icon_vintage_012.png" alt="ミラー"><span>ミラー</span></a></li>
				<li><a href="#"><img src="/common/img/icon_vintage_013.png" alt="その他"><span>その他</span></a></li>
				<li><a href="#"><img src="/common/img/icon_vintage_014.png" alt="テーブルウェア"><span>テーブルウェア</span></a></li>
				<li><a href="#"><img src="/common/img/icon_vintage_015.png" alt="陶板"><span>陶板</span></a></li>
		</ul>
</div>

テキスト装飾

注意文などの赤文字テキスト

<p class="attention">注意文などの赤文字テキスト</p>
  • チェア
  • アームチェア
  • イージーチェア
  • ソファ
  • シェルフ
  • チェスト
  • サイドボード
  • ビューロー
  • キャビネット
  • テーブル
  • ダイニングテーブル
  • デスク
  • ソーイング
  • ミラー
  • その他