店舗：商品紹介

ページの作成

商品の全体的なカタログを作成します。一覧で商品を並べて表示し、個別のページへのリンクを提供します。

「p1.html」をコピーして「p3.html」にします。
mainmenu（ID）部分については「index.html」からコピーしたものに入れ替えると良いでしょう。

ヘッダーの修正

ヘッダの一部を変更します。

<h1 id="header">●●●●商店：商品カタログ</h1>

コンテンツ部の修正

mainmenu（ID）のメインコンテンツは、index.htmlで使った定番商品のテーブルを季節限定にも使います。
定番商品の下３つは内容を同じにして、上の２つと定番商品の２つを作ります。

<div id="mainmenu">
	<div class="menutitle">季節限定</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<td rowspan="2"><img src="img/104.png" width="49" height="100"></td>
			<td><a href="s001.html" class="t_name">さくらソフトクリーム</a></td>
			<td class="t_right">1個</td>
			<td class="t_right">200円</td>
		</tr>
		<tr>
			<td colspan="3">桜の風味を生かした4月限定のソフトクリーム。</td>
		</tr>
		<tr>
			<td rowspan="2"><img src="img/108.png" width="100" height="100"></td>
			<td><a href="s002.html" class="t_name">さくらかき氷</a></td>
			<td class="t_right">1個</td>
			<td class="t_right">350円</td>
		</tr>
		<tr>
			<td colspan="3">春の暖かな日差しの中でかき氷を楽しみましょう。<br>
			桜のシロップで春の香りも満喫できます。<br>
			3月から5月までの季節限定です。</td>
		</tr>
	</table>

	<div class="menutitle">定番商品</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<td rowspan="2"><img src="img/001.png" width="100" height="100"></td>
			<td><a href="w001.html" class="t_name">あんこぼたもち</a></td>
			<td class="t_right">1個</td>
			<td class="t_right">180円</td>
		</tr>
		<tr>
			<td colspan="3">当店自慢の一品です。<br>
			職人が１つ１つ丹精込めて作っています。</td>
		</tr>
		<tr>
			<td rowspan="2"><img src="img/002.png" width="100" height="100"></td>
			<td><a href="w002.html" class="t_name">きなこぼたもち</a></td>
			<td class="t_right">1個</td>
			<td class="t_right">180円</td>
		</tr>
		<tr>
			<td colspan="3">当店自慢の一品です。<br>
			職人が１つ１つ丹精込めて作っています。</td>
		</tr>
		<tr>
			<td rowspan="2"><img src="img/003.png" width="100" height="100"></td>
			<td><a href="w003.html" class="t_name">どら焼き</a></td>
			<td class="t_right">1個</td>
			<td class="t_right">150円</td>
		</tr>
		<tr>
			<td colspan="3">当店自慢の一品です。<br>
			職人が１つ１つ丹精込めて焼いています。</td>
		</tr>
		<tr>
			<td rowspan="2"><img src="img/006.png" width="100" height="100"></td>
			<td><a href="w006.html" class="t_name">三色団子</a></td>
			<td class="t_right">1本</td>
			<td class="t_right">80円</td>
		</tr>
		<tr>
			<td colspan="3">お花見のお伴にも最適な三色団子です。<br>
			ピンクは桜、白は雲、緑は若草をイメージしています。</td>
		</tr>
		<tr>
			<td rowspan="2"><img src="img/007.png" width="100" height="100"></td>
			<td><a href="w007.html" class="t_name">みたらし団子</a></td>
			<td class="t_right">1本</td>
			<td class="t_right">80円</td>
		</tr>
		<tr>
			<td colspan="3">毎日1000本も売れているみたらし団子は、3本で150円。<br>
			大人も子どもも大好きですよね。</td>
		</tr>
	</table>
</div>

戻る