サイト製作 - 8 / html

html CSS

サイト製作 - 7のつづき



この見え方だとやっぱりちょっと変で、やる気が出ないので、画像作って適用してみた。また、「body」で指定した背景も同じ画像だと気持ち悪いのでなくして、色をdivのid：headerと同色に設定。


「index.html」は下記に修正して、

<!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=shift_jis">
<title>タイトル</title>
<meta name="keywords" content="ページのメインキーワード">
<meta name="description" content="ページの説明文章。">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrap">
	<div id="header">
		<h1>ページタイトル</h1>
		<h2>サブタイトル</h2>
	</div>
	<div id="menu">
		<p>メニュー</p>
		<ul>
		<li>メニュー1</li>
		<li>メニュー2</li>
		<li>メニュー3</li>
		<li>メニュー4</li>
		</ul>
	</div>
	<div class="contents">
		<p>サイトコンテンツの文章</p>
		<p>ディズニーリゾートラインの車窓から覗いたシンデレラ城。</p>
		<p><img src="img/bak.jpg" alt=""></p>
	</div>
	<div id="footer">
		<p>フッター</p>
		<ul>
		<li>フッター1</li>
		<li>フッター2</li>
		<li>フッター3</li>
		<li>フッター4</li>
		</ul>
	</div>
</div>
</body>
</html>

CSSは下記に修正。

body {
	background-color: #993333;
}

#wrap {
	margin: 10px auto;
	padding: 10px;
	width: 700px;
	border: 2px solid black;
	background-color: #FFF;
}
#header {
	margin: 0 auto;
	width: 600px;
	height: 251px;
	background-image: url(img/sample-header.png);
	background-repeat: none;
}
#header h1,h2 {
	font-weight: normal;
	font-size: 20px;
	color: white;
	text-align: center;
}

#menu {
	float: right;
	width: 200px;
}

#menu ul li {
	list-style-type: none;
}

.contents {
	float: left;
	width: 400px;
}

#footer {
	clear: both;
}

#footer ul li {
	display: inline;
	margin-left: 15px;

}




これで見栄えは少しマシになった。Topページが形になってきたら、サイトの構成についても考える。
ページはTopページだけではないし、カテゴリー別けや、階層別けにも乗り出す。


早い話がメニューの名前を決めること。
これは、カテゴリー別けを決めるのと同じことで、例えば、サイトの紹介ページを作成してリンクをメニューに入れるなど。

  • サイト紹介
  • 趣味
  • 仕事
  • アルバム

このようにサイドバーのメニューを作り上げる準備をする。


つづく