商品一覧ページ指定｜ネットショップの作り方

現在地: Home » ネットショップの作り方 » ネットショップ作成 » 商品一覧ページ指定

ネットショップ作成

商品一覧ページ指定

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

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

縦型配置サンプル

サンプルページ

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

商品の点数分からをコピペして使います。

<!--コンテンツここから-->
<h2>商品</h2>
<div class="item-category-1">
<dl>
<!--商品情報-->
<dt><a href="#" title="*****"><img src="#" alt="商品名" /></a></dt>
<dd>
<p>*****</p>
<p>*****</p>
<p>*****</p>
</dd>
<!--ここまで-->
<!--商品情報-->
<dt><a href="#" title="*****"><img src="#" alt="商品名" /></a></dt>
<dd>
<p>*****</p>
<p>*****</p>
<p>*****</p>
</dd>
<!--ここまで-->
<!--商品情報-->
<dt><a href="#" title="*****"><img src="#" alt="商品名" /></a></dt>
<dd>
<p>*****</p>
<p>*****</p>
<p>*****</p>
</dd>
<!--ここまで-->
</dl>
<p class="pagetop"><a href="#header" title="このページの先頭へ">▲Top</a></p>
</div>
<!-- item-category-1 end -->
<!--コンテンツここまで-->

.item-category-1 dl {
  width: 100%;
  margin: 1em 0 2em;
  padding: 0;
}

.item-category-1 dt {
  width: 200px; /*-----画像に合わせて変更----*/
  height:300px; /*-----どちらかといえば dd に合わせる----*/
  float: left;
  clear: left;
}

.item-category-1 dd {
  width: 400px; /*-----dtのwidthに合わせて変更----*/
  height: 300px; /*-----適当に----*/
  float: right;
  overflow: auto; /*-----テキストが多くなった場合の対処----*/
}

.item-category-1 dt img,
.item-category-1 dt img a { border: 0; }

▲Top

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

サンプルページ

<dl>タグ自体をfloatにより回り込ませています。<dd>部分に価格、商品名、カートへのリンクなどを入力。<dd>の中に<p>で段落を作っても良い。(上記サンプル：縦型配置サンプル)

商品の点数分からをコピペして使います。

<!--コンテンツここから-->
<h2>商品</h2>
<div class="item-category-2">
<!--商品情報-->
<dl>
<dt><a href="#" title="*****"><img src="#" alt="商品の名前" /></a></dt>
<dd>*****</dd>
<dd>*****</dd>
<dd>*****</dd>
<dd>*****</dd>
</dl>
<!--ここまで-->
<!--商品情報-->
<dl>
<dt><a href="#" title="*****"><img src="#" alt="商品の名前" /></a></dt>
<dd>*****</dd>
<dd>*****</dd>
<dd>*****</dd>
<dd>*****</dd>
</dl>
<!--ここまで-->
<!--商品情報-->
<dl>
<dt><a href="#" title="*****"><img src="#" alt="商品の名前" /></a></dt>
<dd>*****</dd>
<dd>*****</dd>
<dd>*****</dd>
<dd>*****</dd>
</dl>
<!--ここまで-->
<p class="pagetop"><a href="#header" title="このページの先頭へ">▲Top</a></p>
</div>
<!-- item-category-2 end -->
<!--コンテンツここまで-->

.item-category-2 dl {
  float: left;
  width: 180px; /*-----画像に合わせて変更----*/
  height: 360px; /*----全体の表示を見て変更----*/
  overflow: auto;
  margin: 0 10px 0 0; /*-----余白----*/
  padding: 0;
}

.item-category-2 dt {
  width: 180px; /*-----dlの幅----*/
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #cccccc;
}

.item-category-2 dd {
  width: 180px; /*-----dlの幅----*/
  margin: 0;
  padding: 0.5em 0;
}

.item-category-2 dt img,
.item-category-2 dd img { border: 0; }

.item-category-2 dt img a,
.item-category-2 dd img a { text-decoration: none; }

Next；個別商品ページ指定

▲Top