店舗：商品紹介

各商品のページを作成

各商品を単体で紹介するページを作成します。このページはトップページや商品の一覧など複数のリンク元から呼び出されることを想定しています。

まずは、１つ目のあんこぼたもちのページです。
「p3.html」をコピーして「w001.html」にします。

コンテンツ部の修正

mainmenu（ID）のメインコンテンツ部分を単体商品専用にレイアウトを作り直します。
menutitle（クラス）の<div>タグを１つに減らし、内側のテーブルも１つにして作り直します。

<div id="mainmenu">
	<div class="menutitle">あんこぼたもち</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<th>写真</th>
			<td><img src="img/001.png" width="100" height="100"></td>
		</tr>
		<tr>
			<th>説明文</th>
			<td>当店自慢の一品です。<br>北海道産の大納言小豆を使い、ベテランの職人が自家製あんこから作っています。甘みはやや控えめです。</td>
		</tr>
		<tr>
			<th>単価</th>
			<td>180円</td>
		</tr>
		<tr>
			<th>原材料</th>
			<td>大納言小豆、餅米、氷砂糖、和三盆糖</td>
		</tr>
		<tr>
			<th>提供時期</th>
			<td>通年</td>
		</tr>
		<tr>
			<th>備考</th>
			<td>大納言小豆は食物繊維もたっぷりはいっています。</td>
		</tr>
	</table>
</div>

CSSの追加

テーブルの右側に文章が入ると、左側の列が小さくなって改行されてしまいます。この改行が見栄えを悪くするためCSSを追加しましょう。
これで途中の改行がなくなります。<th>タグに属性nowrapを書くのと同じです。

th {
	white-space: nowrap;
}

２品目のコンテンツ

２つ目の商品として、きなこぼたもちのページを作成します。
「w001.html」をコピーして「w002.html」とします。
写真、説明文、単価などテーブル内を手直します。

実例

<div id="mainmenu">
	<div class="menutitle">きなこぼたもち</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<th>写真</th>
			<td><img src="img/002.png" width="100" height="100"></td>
		</tr>
		<tr>
			<th>説明文</th>
			<td>あんこぼたもちと一二を争う定番。<br>北海道産の大納言小豆を使った自家製あんこを餅の中に包み込み、外にきな粉をまぶしてあります。きな粉も自家製です。</td>
		</tr>
		<tr>
			<th>単価</th>
			<td>180円</td>
		</tr>
		<tr>
			<th>原材料</th>
			<td>大納言小豆、餅米、氷砂糖、和三盆糖、大豆</td>
		</tr>
		<tr>
			<th>提供時期</th>
			<td>通年</td>
		</tr>
		<tr>
			<th>備考</th>
			<td>大豆から作られるきな粉には、イソフラボンや大豆タンパク、食物繊維にミネラルも豊富に含まれています。</td>
		</tr>
	</table>
</div>

３品目のコンテンツ

３つ目の商品として、どら焼きのページを作成します。
「w001.html」をコピーして「w003.html」とします。
写真、説明文、単価などテーブル内を手直します。

実例

<div id="mainmenu">
	<div class="menutitle">どら焼き</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<th>写真</th>
			<td><img src="img/003.png" width="100" height="100"></td>
		</tr>
		<tr>
			<th>説明文</th>
			<td>皮まで甘い特製どら焼きです。<br>自家製の粒あんと柔らかくてふわふわの皮がマッチング。<br>季節によって栗やくるみの入ったどら焼きが登場することもあります。</td>
		</tr>
		<tr>
			<th>単価</th>
			<td>150円</td>
		</tr>
		<tr>
			<th>原材料</th>
			<td>（餡）大納言小豆、氷砂糖、和三盆糖<br>（皮）小麦粉、卵、蜂蜜、上白糖、重曹</td>
		</tr>
		<tr>
			<th>提供時期</th>
			<td>通年</td>
		</tr>
		<tr>
			<th>備考</th>
			<td>蜂蜜の入った皮の香りも楽しんでみてください。</td>
		</tr>
	</table>
</div>

データベースの利用

本来であれば商品の数だけこれら商品ページを作成することになります。
また、データベースを利用し、CGIなどのプログラムで加工したデータを表示する方法もあります。ネット通販のように多品種を扱う場合にはほとんど活用されています。
仕様の条件としては、サーバがCGIの利用を許可されていること、CGIを自家製に設定できる技術があること、データベースを運用する手段があることなど、HTMLだけに比較すると設備や技術の要件が高くなります。その代わり、一つのパターンを作ることで全ての商品を紹介できるように各ページを自動的に作ってしまいます。

データベースの利点はホームページだけでなく、普段の商品管理とも関係しています。商品のデータや在庫管理に利用し、それらのデータをホームページ用に活用することになります。場合によってはそれらを直接リンクさせることもあります。通販で在庫数が見えるのはそういうことなのです。

戻る