HOMEへ

CSS講座

CSS
セレクタ CSSの記述方法
CSSテンプレート

2カラム用テンプレート

■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><

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

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

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

</div>
</div>

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

#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>

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

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

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

</div>
</div>

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

#CSSCopyright{
font-size:10px;
}

3カラム用テンプレート

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

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

#CSSCopyright{
font-size:10px;
}

4カラム用テンプレート

4カラム：左・中左・中右・右（各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-4.css">
<link rel="index" href="トップページURL">
<link rev="made" href="mailto:メールアドレス">
</head><body>

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

<div class="CenterLeft">

<div class="LeftC">
中左スペース
</div><!-- end left_c -->

<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="CenterRight">

<div class="RightC">
中右スペース
</div><!-- end RightC -->

<div class="right">
右スペース
</div><!-- end right -->

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

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

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

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

</div><!-- end centering -->
</body></html>
□CSSテンプレート
body{
text-align:center;
}

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

#inner{
margin:0 10px;
}

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

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

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

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

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

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

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

#CSSCopyright{
font-size:10px;
}

 

SEO �� ���������^���T�[�o�[ �u���O SEO