テンプレート－レイアウト

CSSで作った2カラムレイアウトのホームページテンプレート

CSSレイアウト実践講座トップ > CSSテンプレート > 2カラムレイアウト >

テンプレート－レイアウト

ページレイアウトに関するテンプレートです。それぞれHTMLテンプレート、CSSテンプレートに分けて記載していますので、コピー＆ペーストしてお使いください。（テンプレートには当サイトへのリンクが掲載されていますが、これは削除しないでください。お願いいたします。）

2カラム：右メインスペース（490px）：左サイドバー（180px）

サンプル

HTMLテンプレート

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="description" content="このページの要約文">
<meta name="keyword" content="キーワード,キーワード,キーワード">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>このページのタイトル</title>
<link rel=stylesheet type="text/css" href="sample_l_180_490.css">
<link rel="index" href="トップページURL">
<link rev="made" href="mailto:メールアドレス">
</head><body>

<div id="container">
<div id="inner">

<div class="main">
メインスペース。ここに本文を記載します。
</div><!-- end main -->

<div class="side">
サイドバー。サイドバーは左です。

<!-- 削除不可 -->
<p id="CSSCopyright">Powered by <a target="_blank" href="http://css.uka-p.com/">CSSレイアウト</a></p>

</div><!-- end side -->

<div class="clear"><br></div>

</div><!-- end inner-->
</div><!-- end container -->

</div><!-- end centering -->
</body></html>

CSSテンプレート

body{
	text-align:center;
}

#container{
	width:700px;
	margin:0 auto;
	text-align:left;
}

#inner{
	margin:0 10px;
}

.main{
	width:490px;
	float:right;
}

.side{
	width:180px;
	float:left;
}

.clear{
	clear:both;
	line-height:0;
	height:0;
}

/* 削除・改変不可 */
/* ただし、フォントサイズ・色、1行の高さ等デザインに関する変更可能です */
#CSSCopyright{
	font-size:10px;
}

2カラム：左メインスペース（470px）：右サイドバー（250px）

サンプル

HTMLテンプレート

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="description" content="このページの要約文">
<meta name="keyword" content="キーワード,キーワード,キーワード">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>このページのタイトル</title>
<link rel=stylesheet type="text/css" href="sample_l_470_250.css">
<link rel="index" href="トップページURL">
<link rev="made" href="mailto:メールアドレス">
</head><body>

<div id="container">
<div id="inner">

<div class="main">
メインスペース。ここに本文を記載します。
</div><!-- end main -->

<div class="side">
サイドバー。サイドバーは左です。

<!-- 削除不可 -->
<p id="CSSCopyright">Powered by <a target="_blank" href="http://css.uka-p.com/">CSSレイアウト</a></p>

</div><!-- end side -->

<div class="clear"><br></div>

</div><!-- end inner-->
</div><!-- end container -->

</div><!-- end centering -->
</body></html>

CSSテンプレート

body{
	text-align:center;
}

#container{
	width:750px;
	margin:0 auto;
	text-align:left;
}

#inner{
	margin:0 10px;
}

.main{
	width:470px;
	float:left;
}

.side{
	width:250px;
	float:right;
}

.clear{
	clear:both;
	line-height:0;
	height:0;
}

/* 削除・改変不可 */
/* ただし、フォントサイズ・色、1行の高さ等デザインに関する変更可能です */
#CSSCopyright{
	font-size:10px;
}

CSSレイアウトテンプレート

SSIでらくらくホームページ更新術

CSSレイアウト実践講座トップ

テンプレート － レイアウト

CSSで作った2カラムレイアウトのホームページテンプレート

テンプレート － レイアウト

CSSレイアウト テンプレート

テンプレート－レイアウト

テンプレート－レイアウト

CSSレイアウトテンプレート