CSSテンプレート

このCSSのテンプレートは、よく使う項目が用途別にあらかじめ用意されているものです。パラメーターや値を必要に応じて改良してください。

基本的なテンプレート

簡単なテンプレートです。これを元に色々いじってみて下さい。

/************************************/
/*               Body               */
/************************************/
* {
 font-size: 100%;
 font-weight: normal;
 font-style: normal;
 text-decoration: none;
 line-height: 1.5;
 padding: 0px;
 margin: 0px;
}
body {
 color: #333333;
 font-size: small;
 font-family: sans-serif;
 text-align: center;
 background-color: #ffffff;
 background-image: url(###########);
 background-attachment: fixed;
}
/************************************/
/*               Link               */
/************************************/
a:link {
 color: #0000ff;
}
a:visited {
 color: #0000ff;
}
a:hover {
 color: #0066ff;
}
a:active {
 color: #0066ff;
}
/************************************/
/*        Block ボックスなど        */
/************************************/
#header {
 width: 880px;
 height: 80px;
 text-align: center;
 margin: 0px auto;
}
#mainbox {
 float: right;
 text-align: left;
 width: 630px;
 padding-bottom: 5px;
 margin-right: 5px;
}
#leftbox {
 float: left;
 text-align: left;
 width: 235px;
 padding-bottom: 5px;
 margin-left: 5px;
}
#foot {
 clear: both;
 color: #666666;
 font-size: 12px;
 text-align: center;
 width: 880px;
 border-top: 1px dashed #cccccc;
 padding-top: 5px;
}
/************************************/
/*              Block2              */
/************************************/
h1 {
 color: #ffff66;
 font-size: 18px;
 text-align: left;
 background-color: #0066ff;
 padding: 5px 0px 5px 3px;
}
h2 {
 color: #ffff66;
 font-size: 18px;
 text-align: left;
 background-color: #0066ff;
 padding: 5px 0px 5px 3px;
}
h3 {
 color: #ffff66;
 font-size: 18px;
 text-align: left;
 background-color: #0066ff;
 padding: 5px 0px 5px 3px;
}
h4 {
 color: #ffff66;
 font-size: 18px;
 text-align: left;
 background-color: #0066ff;
 padding: 5px 0px 5px 3px;
}
/************************************/
/*             Inline               */
/************************************/
img {
 vertical-align: bottom;
 border: none;
}
.t_red {
 color: #ff0000;
 font-weight: bold;
}
.t_blue {
 color: #0000ff;
 font-weight: bold;
}
.t_green {
 color: #00ff00;
 font-weight: bold;
}
.t_bk {
 color: #000000;
 font-weight: bold;
}
.t_ol {
 color: #ff6600;
 font-weight: bold;
}

/************************************/

戻る

TOP

WEB SEARCH

CONTENTS