サイト製作 - 4 / html

html CSS

サイト製作 - 3のつづき

CSSスタイルシートで形を作ってレイアウト作り。
CSSについては「CSSとは」を参照。
ソースは下記。

<!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>
	<div>
		<h1>ページタイトル</h1>
		<h2>サブタイトル</h2>
	</div>
	<div>
		<p>メニュー</p>
		<ul>
		<li>メニュー1</li>
		<li>メニュー2</li>
		<li>メニュー3</li>
		<li>メニュー4</li>
		</ul>
	</div>
	<div>
		<p>サイトコンテンツの文章</p>
		<p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも・・・・</p>
	</div>
	<div>
		<p>フッター</p>
		<ul>
		<li>フッター1</li>
		<li>フッター2</li>
		<li>フッター3</li>
		<li>フッター4</li>
		</ul>
	</div>
</div>
</body>
</html>

これを下図のようにデザインする。



そのためにまず、各々のdivに名前を付けて、指定しやすくする。
これはどこのdivをどれくらいの大きさにして、背景の色は何色で、
とデザインを指定するために名前をふる必要がある。

<!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>
	</div>
	<div id="footer">
		<p>フッター</p>
		<ul>
		<li>フッター1</li>
		<li>フッター2</li>
		<li>フッター3</li>
		<li>フッター4</li>
		</ul>
	</div>
</div>
</body>
</html>

ここで「id」と「class」について言及。
「id」はそのページ内（ソース内）で一回しか書いてはいけない名前。
「class」は何度でも書いてOKな名前。


つまり、「id」はページの中で一度しか使えないので、ページの中で1つしかなく、数が増えないものに付ける。
「class」はその逆で、ページ内で繰り返し使うものに設定する。

  • タイトルは1つなのでid
  • メニューも1つなのでid
  • フッターも1つなのでid
  • サイトコンテンツは、同じブロックを下にいくつも続ける場合があるので、class

と指定する。
※ちなみにどのタグにも名前を付けてデザインを指定することができる。ディテールまでこだわったデザインを使用したいときの用途。




それでは、実際に「style.css」ファイルを作成してデザイン。
まず、新規テキストファイルを作成して名前を「style.css」にする。



これを「index.html」ファイルと同じ階層に置いておく。



テキストエディタで「style.css」を開いて編集。
最初はこんなのを書いてみる。

#wrap {
	margin: 10px auto;
	padding: 10px;
	width: 700px;
}
#header {
	margin: 0 auto;
	width: 600px;
	height: 150px;
}
#menu {
	float: right;
	width: 200px;
}

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

#footer {
	clear: both;
}

「id」は「#」をつけて、「class」は「.」ドットをつけて指定する。{}の間でレイアウトやデザインを名前付けしたタグで設定する。


命令は下記のとおり。

プロパティ名 指定内容
margin ボックス外部の余白幅を設定する
padding ボックス内部の余白幅を設定する
width ボックス自体の横幅を指定する
height ボックス自体の縦幅を指定する
float 文字やボックス等の要素の回り込みを指定
clear 文字やボックス等の要素の回り込みを解除

こうして見るとわかりづらいけど、実際に自分でいろいろ指定して試せばわかりやすくなる。

#wrap {
	margin: 10px auto;	/*ボックスの外部に上下10px・左右は自動の幅を持たせる*/
	padding: 10px;		/*ボックスの内部に上下左右10pxの幅を持たせる*/
	width: 700px;		/*wrapのボックス自体の幅は700px（ピクセル）*/
}
#header {
	margin: 0 auto;		/*ボックスの外部に上下0px・左右は自動の幅を持たせる*/
	width: 600px;		/*headerのボックス自体の幅は600px（ピクセル）*/
	height: 150px;		/*headerのボックスの縦幅を150pxに指定*/
}
#menu {
	float: right;		/*menuボックスを右に配置*/
	width: 200px;		/*menuボックスの幅は200px*/
}

.contents {
	float: left;		/*contentsボックスは左に配置*/
	width: 400px;		/*contentsボックスの幅は400px*/
}

#footer {
	clear: both;		/*footerボックスは回りこみ解除で一番下に配置*/
}



表示は下の図のような感じ。



次回でもう少し細部までデザインして、色や文字フォントを変更。サイトらしく形づくっていく。