テンプレート－ 3カラムレイアウト

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

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

テンプレート－ 3カラムレイアウト

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

3カラム：センタースペース（400px）：左サイドバー：右サイドバー（各160px）
HTML記載順序：センタースペース > 左サイドバー > 右サイドバー

サンプル

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_160_400_160.css">
<link rel="index" href="トップページURL">
<link rev="made" href="mailto:メールアドレス">
</head><body>

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

<div class="CenterLeft">

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

<div class="left">
左サイドバー

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

</div><!-- end left -->

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

</div><!-- end CenterLeft -->

<div class="right">
右サイドバー
</div><!-- end right -->

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

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

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

CSSテンプレート

body{
	text-align:center;
}

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

#inner{
	margin:0 10px;
}

.CenterLeft{
	width:570px;
	float:left;
}

.center{
	width:400px;
	float:right;
}

.left{
	width:160px;
	float:left;
}

.right{
	width:160px;
	float:right;
}

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

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

3カラム：センタースペース（430px）：左サイドバー（160px）：右サイドバー（120px）
HTML記載順序：センタースペース > 右サイドバー > 左サイドバー

サンプル

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_160_430_120.css">
<link rel="index" href="トップページURL">
<link rev="made" href="mailto:メールアドレス">
</head><body>

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

<div class="CenterRight">

<div class="center">
センタースペース。ここに本文を記載します。
</div><!-- end center_right -->

<div class="right">
右サイドバー
</div><!-- end right -->

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

</div><!-- end CenterRight -->

<div class="left">
左サイドバー

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

<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;
}

.CenterRight{
	width:560px;
	float:right;
}

.center{
	width:430px;
	float:left;
}

.right{
	width:120px;
	float:right;
}

.left{
	width:160px;
	float:left;
}

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

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

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

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

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

テンプレート － 3カラムレイアウト

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

テンプレート － 3カラムレイアウト

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

テンプレート－ 3カラムレイアウト

テンプレート－ 3カラムレイアウト

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