めも帖

「めも帖」代わりにダラダラと書いていったり、めもしたりしているだけです。

XHTMLのテンプレート

dev

配色が悪いけれど、大雑把にはこんな感じで動くはず。
確認したのは、Firefox 2.0、IE7、Safari 3だけ。IE6が手元にないのです...。
追記：たぶん問題なさそう。

XHTML

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>title</title>
<meta name="description" content="" />
<meta name="keywords"    content="" />
<meta http-equiv="Content-Type" content="text/html; charset=Shift-jis" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="base.js"></script>
</head>
<body>

<!-- block -->
<div id="container">
	<!-- header -->
	<div id="header">
		<h1><a href="#" title="タイトルです">タイトルです</a></h1>
		<h2>サブタイトルです</h2>
	</div>
	<!--/header/-->

	<!-- topicPath -->
	<div id="topicPath">
	ホーム<a href="#">コンテンツ名</a>
	</div>
	<!--/topicPath/-->

	<!-- block -->
	<div id="globalMenu">
		<ul>
			<li><a href="#" title="">リンク名</a></li><li><a href="#" title="">リンク名</a></li><li><a href="#" title="">リンク名</a></li>
		</ul>
		<ul>
			<li><a href="#" title="">リンク名</a></li>
			<li><a href="#" title="">リンク名</a></li>
			<li><a href="#" title="">リンク名</a></li>
		</ul>

		<dl>
			<dt><a href="#" title="">リンク名dt1</a></dt>

			<dt><a href="#" title="">リンク名dt2</a></dt>

			<dt><a href="#" title="">リンク名dt3</a></dt>

		</dl>

		<dl>
			<dt><a href="#" title="">リンク名dt</a></dt>
			<dd>解説テキスト解説テキスト解説テキスト解説テキスト解説テキスト</dd>
			<dt><a href="#" title="">リンク名dt</a></dt>
			<dd>解説テキスト解説テキスト解説テキスト解説テキスト解説テキスト</dd>
			<dt><a href="#" title="">リンク名dt</a></dt>
			<dd>解説テキスト解説テキスト解説テキスト解説テキスト解説テキスト</dd>
		</dl>
		<div class="clearall"></div>
	</div>
	<!--/block/-->

	<!-- pagebody -->
	<div id="pagebody">

		<!-- block -->
		<div class="entryBody">
		<h3>エントリーのタイトルです</h3>
<dl>
	<dt>テキスト</dt>
	<dd>テキストテキストテキストテキスト</dd>
</dl>
		</div>
		<!--/block/-->

		<!-- block -->
		<div class="entryBody">
		<h3>エントリーのタイトルです</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
		<!--/block/-->

		<!-- block -->
		<div class="entryBody">
		<h3>エントリーのタイトルです</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<pre>
テキスト
テキストテキストテキストテキストテキスト
テキストテキスト
</pre>
		</div>
		<!--/block/-->

		<!-- block -->
		<div class="entryBody">
<input type="text" value="http://www.yahoo.co.jp/" />
		</div>
		<!--/block/-->

	</div>
	<!--/pagebody/-->

	<!-- module -->
	<div id="module">
		<!-- block -->
		<div class="moduleBlock">
		<h3>モジュールの名前</h3>
		</div>
		<!--/block/-->

		<!-- block -->
		<div class="moduleBlock">
		<h3>モジュールの名前</h3>
		<ul>
			<li><a href="#" title="">リンク名</a></li>
			<li><a href="#" title="">リンク名</a></li>
			<li><a href="#" title="">リンク名</a></li>
		</ul>
		</div>
		<!--/block/-->

		<!-- block -->
		<div class="moduleBlock">
		<h3>モジュールの名前</h3>
		<dl>
			<dt><a href="#" title="">リンク名dt</a></dt>
			<dd>解説テキスト解説テキスト解説テキスト解説テキスト解説テキスト</dd>
			<dt><a href="#" title="">リンク名dt</a></dt>
			<dd>解説テキスト解説テキスト解説テキスト解説テキスト解説テキスト</dd>
			<dt><a href="#" title="">リンク名dt</a></dt>
			<dd>解説テキスト解説テキスト解説テキスト解説テキスト解説テキスト</dd>
		</dl>
		</div>
		<!--/block/-->

	</div>
	<!--/module/-->

	<!-- footer -->
	<div id="footer">
<p>テキストテキストテキスト</p>
	</div>
	<!--/footer/-->
</div>
<!--/block/-->

</body>
</html>

CSS

@charset "Shift-Jis";
/*============================================================*/
body,h1,h2,h3,h4,h5,h6,form,div,p,pre,ul,string,em {
	font-size:100%;
	font-weight:normal;
	line-height:1.4;
	padding:0;
	margin:0;
}

dl {
	padding:0;
	margin:0;
}

/*============================================================*/
body {
	text-align:center;
}

string {
	font-wegiht:bold;
}

p {

}

pre {
	padding:1em;
	margin:1em;
	border:1px dotted #666666;
}

/*============================================================*/
.clearall {
	clear:both;
}

/*============================================================*/
#container {
	margin:0 auto 0 auto;
	width:800px;
	text-align:left;

}
/*----------*/
#header {
	background-color:#999999;
}

#topicPath {
	padding:0.4em;
	text-align:right;
}

#globalMenu {
	background-color:#999999;
}

#globalMenu li{
	border:1px solid red;
	display:inline;
	list-style-type:none;
}

#globalMenu dl{
}

#globalMenu dt {
	border:1px solid red;
	display:block;
	float:left;
}

#globalMenu dd{
	width:0px;
	text-indent:-9999px;
	display:block;
	float:left;
}

/*----------*/
#pagebody {
	float:right;
	background-color:#e7e7e7;
	width:500px;
}

#pagebody h3{
	border-bottom:3px solid #666666;
}

.entryBody{
	background-color:pink;
}

/*----------*/
#module {
	float:right;
	background-color:#f0f0f0;
	width:300px;
}

.moduleBlock {
	border:1px solid green;
}

#module dl{
}

#module dt{
	background-color:pink;
}

#module dd{
	height:0;
	text-indent:-9999px;
}
/*----------*/
#footer {
	clear:both;
	padding:1em;
	border:4px solid pink;
}