店舗：トップページ

コンテンツの作成（３）

商品紹介の部分を作って行きましょう。
これでトップページは完成となります。

メインコンテンツのタグ

id「mainmenu」のある<div>タグの内側に３つのパートを作ります。

1つ目は「今月のおすすめ」、2つ目は「定番商品」とします。
それぞれのコンテンツ部分にはテーブルタグを組み込みます。

<div id="mainmenu">
	<div class="menutitle">今月のおすすめ</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<td><img src="img/man01.gif" width="100" height="149"></td>
			<td><img src="img/104.png" width="49" height="100" align="right">4月の新商品はこちらのソフトクリームです。<br>
			桜の風味を生かした<a href="s001.html" class="t_name">さくらソフトクリーム</a>なんですよ。<br>
			こちらは4月末までの期間限定で販売いたします。</td>
		</tr>
	</table>

	<div class="menutitle">定番商品</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<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>

定番商品は、３つの商品を紹介しています。１つの商品について2行を使い、1行目は4列に分割されています。borderを見えるようにすると下記のように組まれているのが判ります。（CSSは適用していません）

	どら焼き	1個	150円
	当店自慢の一品です。職人が１つ１つ丹精込めて焼いています。

メインコンテンツのCSS

id「mainmenu」と、２つのクラスを追加します。
「t_name」クラスは商品名に、「t_right」クラスは個数と価格に適用されます。

#mainmenu {
	width: 500px;
	margin-left: 220px;
	border: 5px solid #993300;
	background-color: #FFFFCC;
	background-image: url(img/bg_sakura02.gif);
}
.t_name {
	font-size: 16px;
	font-weight: bold;
	margin: 5px;
}
.t_right {
	text-align: right;
	font-size: 16px;
}

メニュー部とメインコンテンツでは、背景の濃さを変えています。

CSSの外部テキスト化

この後、内部の各ページを作る前に、トップページで使ったCSSをそれらにも使えるように、外部テキストに作り替えましょう。

実例

テキストファイル

ファイル名は「index.css」とします。内容は<style>タグ内にあるものをそのままコピーします。

/* CSS Document */

#header {
	font-size: 36px;
	font-style: italic;
	text-decoration: underline;
	text-align: center;
	color: #000099;
	width: 720px;
}
#footer {
	clear: both;
	text-align: right;
	background-color: #993300;
	font-size: 10px;
	color: #FFFFCC;
	margin-top: 5px;
	margin-bottom: 5px;
	width: 720px;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
}
#leftmenu {
	width: 200px;
	float: left;
	border: 5px solid #993300;
	background-color: #FFFFCC;
	background-image: url(img/bg_sakura01.gif);
	position: fixed;
}
#mainmenu {
	width: 500px;
	margin-left: 220px;
	border: 5px solid #993300;
	background-color: #FFFFCC;
	background-image: url(img/bg_sakura02.gif);
}
.menutitle {
	background-color: #993300;
	text-align: center;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	padding: 5px;
}
.menulink {
	padding: 5px;
	display: block;
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
	color: #FF9900;
	background-color: #996600;
	border-style: groove;
}
.menulink:hover {
	background-color: #FFCC66;
}
.t_name {
	font-size: 16px;
	font-weight: bold;
	margin: 5px;
}
.t_right {
	text-align: right;
	font-size: 16px;
}
p {
	padding: 5px;
}

index.htmlの修正

実例

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>●●●●商店</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>

外部のCSSは複数同時に使うこともできます。また、<style>タグでそのページだけのCSSを追加することも可能です。

戻る