店舗：トップページ

商店のトップページを作ります。今回は1ページ内に、最新の更新情報、各ページへのリンク、主要商品の紹介を配置します。
イメージを押し出すために、2ページに分けて、1ページ目で来訪の挨拶や動画を見せ、実用的なメニューを2ページ目に配置することもあります。

素材の準備

使用する画像は、背景２つ、店舗のイラスト１つ、人物画１つ、商品を４つです。
画像は全てimgフォルダに入れておきます。

背景用：img/bg_sakura01.gif	背景用：img/bg_sakura02.gif	店舗：img/shop01.gif	人物：img/man01.gif

商品：img/104.png	商品：img/003.png	商品：img/006.png	商品：img/007.png

コンテンツの作成（１）

基本となるタグを記述し、<body>から仕上げていきましょう。
ファイル名は「index.html」です。

実例

基本となるタグの記述

HTMLの基本となる<html><head><body>を記述します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>●●●●商店</title>
</head>

<body>

</body>
</html>

ヘッダとフッタの記述

<body>の中に大まかにコンテンツを入れていきましょう。
画面上部のヘッダと画面下部のフッタ、そして、その間に２つの<div>タグを用意します。

<h1 id="header"><img src="img/shop01.gif" width="75" height="60" align="absmiddle">●●●●商店<img src="img/shop01.gif" width="75" height="60" align="absmiddle"></h1>

<div id="leftmenu">
</div>

<div id="mainmenu">
</div>

<p id="footer">●●●●商店</p>

中心にコンテンツを配置し、２つの<div>タグで左肩にメニューを、中央に商品紹介を置くことになります。
それぞれのパートにidを割り当てています。

leftmenu（ID）とmainmenu（ID）については、<div>タグの内側になにもない状態なので、画面上も何も表示されません。

ヘッダとフッタのCSS

上記のタグにCSSでデザインを付けましょう。
<head>タグ内に<style>タグを記述します。

<style type="text/css">
#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;
}
</style>

ヘッダとフッタにはwidthで幅を設定してあります。これは後で作成するコンテンツの幅に合わせてあります。

戻る