商品一覧ページ指定

Loading

スポンサードリンク

商品一覧ページ指定

商品画像の見せ方に関する指定です。楽天に代表されるテーブル構造ではなくリストタグとCSS指定で構築します。

サンプルは縦型と画面いっぱいに掲載するパターンの二つを説明します。尚、画像だけを表示するのであれば<ul>タグでCSSのfloat指定だけで十分ですが、ここでは金額やちょっとした説明、カート用のボタン設置を考慮します。

縦型配置サンプル

サンプルページ

<dt>を左へ<dd>を右へ配置。<dd>の中に<p>で段落を作っています。<p>部分に価格、商品名、カートへのリンクなどを入力。<dd>を繰り返しても良い。(下記サンプル：画面いっぱいに配置するサンプル)

商品の点数分<!--商品情報-->から<!--ここまで-->をコピペして使います。

<!-- コンテンツ ここから -->
<h2>商品カテゴリー1 [商品掲載サンプル]</h2>

<dl class="dl-list-01">
<!--商品情報-->
<dt><a href="#"><img src="image.jpg" alt="" width="" height="" /></a></dt>
<dd>
<p>簡単な説明</p>
<p>サンプル：サンプル：サンプル：サンプル：サンプル。</p>
<p>サンプル：サンプル：サンプル：サンプル：サンプル。</p>
</dd>
<!--ここまで-->

<!--商品情報-->
<dt><a href="#"><img src="image.jpg" alt="" width="" height="" /></a></dt>
<dd>
<p>簡単な説明</p>
<p>サンプル：サンプル：サンプル：サンプル：サンプル。</p>
<p>サンプル：サンプル：サンプル：サンプル：サンプル。</p>
</dd>
<!--ここまで-->
/* ---------------------------------------- 各商品ページの指定 */

/* -- 商品カテゴリー -- */

#contents .dl-list-01 {
  width: 570px;
  margin: 1em 0;
}

#contents .dl-list-01 dt {
  width: 200px; /* 幅調節 */
  height: 300px; /* 高さ調節 */
  float: left;
  clear: left;
}

#contents .dl-list-01 dd {
  width: 370px; /* 幅調節 */
  height: 300px; /* 高さ調節 */
  float: left;
}

画面いっぱいに配置するサンプル

サンプルページ

<ul>リストをfloatにより回り込ませています。<li>要素内に<dl>リストを配置し、その中に商品詳細情報を記述しています。<dd>部分に価格、商品名、カートへのリンクなどを入力。<dd>の中に<p>で段落を作っても良い。(上記サンプル：縦型配置サンプル)

商品の点数分<!--商品情報-->から<!--ここまで-->をコピペして使います。

<!-- コンテンツ ここから -->
<h2>商品カテゴリ1の商品詳細分類1 [商品掲載サンプル]</h2>
<ul class="ul-list-02">
<!-- 商品情報 -->
<li>
<dl>
<dt><a href="#"><img src="image.jpg" alt="" width="" height="" /></a></dt>
<dd>商品名</dd>
<dd>価格：&yen;200,000</dd>
<dd><a href="#">商品詳細ページ</a></dd>
<dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd>
</dl>
</li>
<!-- // 商品情報 -->

<!-- 商品情報 -->
<li>
<dl>
<dt><a href="#"><img src="image.jpg" alt="" width="" height="" /></a></dt>
<dd>商品名</dd>
<dd>価格：&yen;200,000</dd>
<dd><a href="#">商品詳細ページ</a></dd>
<dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd>
</dl>
</li>
<!-- // 商品情報 -->

<!-- 商品情報 -->
<li>
<dl>
<dt><a href="#"><img src="image.jpg" alt="" width="" height="" /></a></dt>
<dd>商品名</dd>
<dd>価格：&yen;200,000</dd>
<dd><a href="#">商品詳細ページ</a></dd>
<dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd>
</dl>
</li>
<!-- // 商品情報 -->
</ul>
/* -- 商品詳細分類 商品一覧 -- */

#contents .ul-list-02 {
  list-style-type: none;
  width: 570px;
  margin: 1em 0;
}

#contents .ul-list-02 li {
  float: left;
  width: 185px; /* 幅調節 */
  margin-bottom: 4em;
}

#contents .ul-list-02 dl { height: 300px; } /* 高さ調節 */

#contents .ul-list-02 dt { margin-bottom: 1em; }

#contents .ul-list-02 dd { margin-bottom: 0.5em; }
楽天に出店する前に
飲食店向けホームページ作成サービス
簡単にお店のホームページを更新「グーペ」
ネットショップ制作

低価格で作るオリジナルロゴ【アーティーロゴ】

あなたのホームページを売れるネットショップにする

低価格ショッピングカート

登録商品数が無制限（ディスク容量内）のショッピングカートです！

ホームページ・ビルダー(R)対応！ レンタルカートe-shopsカート2

レンタルショッピングカートXcart月額1,050円からの格安、高品質なショッピングカートが登場！

低価格で本格的なオンラインショップを構築。CGIの知識は一切不要の高機能レンタルショッピングカート。

無在庫商品仕入れシステム。月額0円でネットショップを開店できます

大手の利用実績が認める高機能ネットショップ「ワイズカート」

スポンサードリンク