HTMLとCSSでフレームを作る

ひながたを作る

何も無い状態からWordPressで作業するのは無謀に感じたので、まずは、htmlとcssで軽くレイアウト確認のコードを書いてみる。htmlは次のような形になる

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<!-- html ヘッダ -->
</head>
<body>
<div id="wrap">
	<div id="header">
		<!-- header -->
	</div>
	<div id="navi">
		<!-- navigation menu -->
	</div>
	<div id="side">
		<!-- side bar -->
	</div>
	<div id="main">
		<!-- main content -->
	</div>
	<div id="footer">
		<!-- footer -->
	</div>
</div>
</body>
</html>

head部まで

<!DOCTYPE>で文書型を宣言して<html>で始め、<head></head>内に情報を書く。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>WordPress template test</title>
</head>

header部

header部にはタイトル画像だけを配置する。

<div id="header">
	<img src="images/title.png" width="1000" height="160">
</div>

navi,side部

navi,side部のメニューはリストを使って階層化する。

<div id="navi">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Menu1</a>
			<ul>
				<li><a href="#">Menu1-Sub1</a></li>
				<li><a href="#">Menu1-Sub2</a></li>
				<li><a href="#">Menu1-Sub3</a></li>
			</ul>
		</li>
		<li><a href="#">Menu2</a>
			<ul>
				<li><a href="#">Menu2-Sub1</a></li>
				<li><a href="#">Menu2-Sub2</a></li>
				<li><a href="#">Menu2-Sub3</a></li>
			</ul>
		</li>
	</ul>
</div>

side部もnavi部と同じ内容にしておき、cssで項目の表示方法を変えることにする

WordPressを始めよう

HTMLとCSSでフレームを作る

ひながたを作る

head部まで

header部

navi,side部