店舗：人物紹介

ページの作成

もう１つ人物紹介のページを作りましょう。今度はさきほどと違ったイメージでデザインを作ります。
2つ目は職人さんのページとなります。

「p1.html」よりも「p4.html」の方が形が近いので、こちらをコピーして「p5.html」にします。

ヘッダーの修正

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

<h1 id="header">●●●●商店：職人の工房</h1>

コンテンツ部の修正

id「mainmenu」の修正をします。

魚の素材は「海の素材集」からいただきました。魚を３つ、背景画を１つ使います。

<div id="mainmenu">
	<div class="menutitle2">自己紹介</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<td rowspan="5"><img src="img/man03.gif" width="100" height="149"></td>
			<th>名前</th>
			<td>□山○男</td>
		</tr>
		<tr>
			<th>誕生日</th>
			<td>12月15日</td>
		</tr>
		<tr>
			<th>出生地</th>
			<td>○○市○○○○</td>
		</tr>
		<tr>
			<th>趣味</th>
			<td>囲碁、釣り</td>
		</tr>
		<tr>
			<th>ひとこと</th>
			<td>お菓子の食べ歩きもあちこち出かけます。<br>
			  常に新しい発見を求めて行き当たりばったりの一人旅もまた楽しいものです。</td>
		</tr>
	</table>
	<div class="menutitle2">趣味の部屋</div>
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<th>真鯛</th>
			<th><img src="img/madai.gif" width="200" height="120"></th>
		</tr>
		<tr>
			<th>ヒラメ</th>
			<td><img src="img/hirame.gif" width="200" height="120"></td>
		</tr>
		<tr>
			<th>ハコフグ</th>
			<td><img src="img/hakofugu.gif" width="200" height="100"></td>
	    </tr>
	</table>
</div>

自己紹介の部分は、<th>タグ内は同じなので、内容だけ変更します。
あとは、人物画像を入れ換えます。

趣味の部屋にはmenutitle2（クラス）を使っています。これはそのまま使います。
テーブルは単純な3行2列になっています。

<style>タグの変更

必要なID名とクラス名は同じです。
mainmenu（ID）は、index.cssの上書きです。枠の色と背景色が違います。
menutitle2（クラス）はこのHTMLファイルのみに有効で、社長とは色違いです。

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

#mainmenu

枠の色と背景画像を変更します。

ここも「width」と「margin-left」は削除しても構いません。

.menutitle2

背景色と文字色を変更しています。

戻る