店舗：人物紹介

ページの作成

人物紹介のページを作ります。人物のイメージに合わせてデザインを変更しましょう。
まずは社長のページで、年配の女性というイメージです。

「p1.html」をコピーして「p4.html」にします。

ヘッダーの修正

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

<h1 id="header">●●●●商店：社長の部屋</h1>

コンテンツ部の修正

mainmenu（ID）のメインコンテンツは、menutitle（クラス）をmenutitle2に変更して利用します。
内部は<div><table><div><table>という構造になっています。
また、1つ目のテーブルと２つ目のテーブルでは構造が異なっています。

趣味の作品例として飾る絵を１つフリー素材で用意します。背景も派手なものに変更してあります。

<div id="mainmenu">
	<div class="menutitle2">自己紹介</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<td rowspan="5"><img src="img/woman09.gif" width="100" height="149"></td>
			<th>名前</th>
			<td>○山△子</td>
		</tr>
		<tr>
			<th>誕生日</th>
			<td>5月1日</td>
		</tr>
		<tr>
			<th>出生地</th>
			<td>○○市○○○○</td>
		</tr>
		<tr>
			<th>趣味</th>
			<td>テニス、短歌、パッチワーク</td>
		</tr>
		<tr>
			<th>ひとこと</th>
			<td>この町で生まれて、親の代からお菓子屋を継いできました。これからもみなさんに愛される御菓子とお店を作ってまいります。</td>
		</tr>
	</table>
	<div class="menutitle2">趣味の部屋</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<th colspan="2">パッチワーク作品</th>
		</tr>
		<tr>
			<td class="t_name">「ペイズリー」</td>
			<td class="t_right">2010年製作</td>
		</tr>
		<tr>
			<td colspan="2"><a href="img/pw002.jpg"><img src="img/pw002.jpg" width="250" height="450"></a></td>
	    </tr>
	</table>
</div>

<style>タグの追加

このページのみスタイルを一部変更してみます。<style>タグを追加して独自のCSSを記述します。

<style type="text/css">
#mainmenu {
	width: 500px;
	margin-left: 220px;
	border: 5px solid #FADEE2;
	background-image: url(img/pw001.gif);
}
.menutitle2 {
	background-color: #FADEE2;
	text-align: center;
	color: #BD6E6E;
	font-size: 14px;
	font-weight: bold;
	padding: 5px;
}
</style>

#mainmenu

index.cssに同じ名前のIDを定義していますので、同じプロパティを指定すると後からの記述で上書きされます。
ここでは、枠の色と背景画像を変更しています。

「width」と「margin-left」は変更しないので、削除しても構いません。

.menutitle2

こちらは新たにこのページ内だけで有効なクラスを定義しています。
mainmenu（ID）のようにmenutitle（クラス）で上書きしないのは、leftmenu（ID）内でmenutitle（クラス）が使われているからです。別のものとして分けて定義する必要があるのです。

ここでは、背景色と文字色を変更していますが、上書きではないため、プロパティを削除しないようにしましょう。

戻る