XHTML ホームページテンプレート スタイルシートカスタマイズ

• HOME
• ホームページ テンプレート一覧
• HTML5 HPテンプレートの使用法
• HTML5 HPテンプレートをカスタマイズ
• ホームページ作成 -HTML5-
• XHTML HPテンプレート使用法
• XHTML HPテンプレートカスタマイズ
• ホームページ作成 -XHTML-
• 掲示板の設置法
• スマホ HPテンプレート

XHTML ホームページテンプレート スタイルシートカスタマイズ

ホームページテンプレートをカスタマイズするにはスタイルシート( style.css )を使います。
色がついている箇所は変更可能です。
（サイズ、色などテンプレートの種類によって違う箇所もあります。）
ホームページテンプレート１面タイプのスタイルシートはこちら

@charset "shift_jis";
リンク全般
a{
リンク色
color:#cccccc;
}
リンクマウスオーバー
a:hover{
text-decoration:none;
}
Page Top ▲ スクロールバー色（Internet Explorer用）
html{
scrollbar-track-color:#000000;
scrollbar-face-color:#000000;
scrollbar-shadow-color:#333333;
scrollbar-darkshadow-color:#444444;
scrollbar-highlight-color:#333333;
scrollbar-3dlight-color:#444444;
scrollbar-arrow-color:#ffa500;
}
Page Top ▲ body{
文字サイズ全般
font-size:9pt;
文字色全般
color:#cccccc;
背景色外側
background-color:#000000;
text-align:center;
margin:0px;
文字サイズを自動調整　削除すると自動調整あり（スマートフォン用）
-webkit-text-size-adjust:none;
}
Page Top ▲ テーブル
table,th,td{
margin:auto;
テーブル内の文字サイズ
font-size:9pt;
テーブル内の文字色
color:#cccccc;
}
Page Top ▲ 文字行間 <p>タグ
p{
text-align:left;
line-height:2em;
padding-left:20px;
padding-right:20px;
margin-top:0.5em;
margin-bottom:0.5em;
}
Page Top ▲
img{
border-style:none;
}
メイン 背景
#body{
margin:auto;
width:850px;
メイン 背景色
background-color:#222222;
メイン 背景画像
background-image:url(image/bg.gif);
background-position:top right;
background-repeat:repeat-y;
overflow:hidden;
}
Page Top ▲
ヘッダー 背景
#header{
width:100%;
ヘッダー 背景画像高さ
height:150px;
text-align:left;
ヘッダー 背景画像
background-image:url(image/header.jpg);
background-repeat: no-repeat;
background-position:top left;
overflow:hidden;
}
Page Top ▲
ヘッダー <h1>
#header h1{
ヘッダー <h1> 上からの位置
margin-top:60px;
ヘッダー <h1> 左からの位置
padding-left:30px;
ヘッダー <h1> 文字サイズ
font-size:14pt;
ヘッダー <h1> フォント
font-family:"Times New Roman";
ヘッダー <h1> 文字色
color:#ffa500;
}
#header h1 a{
ヘッダー <h1> リンク文字色
color:#ffa500;
text-decoration:none;
}
Page Top ▲
トップメニュー
#menu{
width:100%;
height:30px;
トップメニュー 背景画像
background-image:url(image/menu_bg.jpg);
background-repeat:no-repeat;
background-position:top left;
overflow:hidden;
}
#menu ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#menu li{
float:left;
トップメニュー 横幅
width:120px;
height:30px;
line-height:30px;
overflow:hidden;
}
#menu .on{　ホームページテンプレート プルダウンメニュー＆ツリーメニュー付き用
overflow:visible;
}
#menu .sbm{　ホームページテンプレート プルダウンメニュー＆ツリーメニュー付き用
left:-1px;
position:absolute;
}
.sbm li{　ホームページテンプレート プルダウンメニュー＆ツリーメニュー付き用
プルダウンメニュー 線の色　（下のトップメニュー 仕切り線色と一緒に設定します。）
border-left:solid 1px #3d3d3d;
border-bottom:solid 1px #3d3d3d;
}
#menu a{
/* トップメニューの文字を左寄せにする場合 */
/* text-align:left; */
/* padding-left:10px; */
text-decoration:none;
white-space:nowrap;
トップメニュー 仕切り線色
border-right:solid 1px #3d3d3d;
display:block;
}
#menu a:hover{
トップメニュー 背景画像 マウスオーバー
background-image:url(image/menu.jpg);
background-repeat:no-repeat;
background-position:top left;
トップメニュー リンク文字色 マウスオーバー
color:#ffa500;
}
#menu .sbm a{　ホームページテンプレート プルダウンメニュー＆ツリーメニュー付き用
プルダウンメニュー 背景色
background-color:#000000;
}
#menu .sbm a:hover{　ホームページテンプレート プルダウンメニュー＆ツリーメニュー付き用
プルダウンメニュー 背景 マウスオーバー
background-image:url();
background-color:#222222;
}
Page Top ▲
サイドバー 文字サイズ
#left{　ホームページテンプレート２分割タイプ右メニューは使用しません
float:left;
width:200px;
フレームタイプ用　サイドバーの高さ　height:400px;（変更する場合下のメインと同じサイズにします。）
サイドバー左 文字サイズ
font-size:8pt;
overflow:hidden;
}
#main{
float:left;
width:450px;
フレームタイプ用　メイン部の高さ　height:400px;（変更する場合上のサイドバーと同じサイズにします。）
overflow:hidden;
}
#right{　ホームページテンプレート３分割タイプ、２分割タイプ右メニュー用
float:right;
width:200px;
サイドバー右 文字サイズ
font-size:8pt;
overflow:hidden;
}
#menu2{
margin:0px;
padding:0px;
list-style-type:none;
}
Page Top ▲
サイドメニュー
.sbm2{　ホームページテンプレート プルダウンメニュー＆ツリーメニュー付き用
ツリーメニュー　左余白
padding-left:9px;
}
.off .sbm2{　ホームページテンプレート プルダウンメニュー＆ツリーメニュー付き用
display:none;
}
.on .sbm2{　ホームページテンプレート プルダウンメニュー＆ツリーメニュー付き用
display:block;
}
#menu2 a{
margin:auto;
width:180px;
height:25px;
line-height:25px;
text-align:left;
text-indent:30px;
text-decoration:none;
white-space:nowrap;
サイドメニュー 背景画像
background-image:url(image/menu2_bg.jpg);
background-repeat:no-repeat;
background-position:top left;
display:block;
overflow:hidden;
}
#menu2 a:hover{
サイドメニュー リンク文字色 マウスオーバー
color:#ffa500;
サイドメニュー リンク背景画像 マウスオーバー
background-image:url(image/menu2.jpg);
background-repeat:no-repeat;
background-position:top left;
}
#menu2 .sbm2 a{　ホームページテンプレート プルダウンメニュー＆ツリーメニュー付き用
ツリーメニュー　横幅
width:170px;
ツリーメニュー　右線色
border-right:solid 1px #333333;
}
Page Top ▲
#main h2,#main h3,#left h4,#right h4,#left h5,#right h5{
margin:auto;
margin-top:0px;
margin-bottom:0px;
height:30px;
line-height:30px;
background-position:top left;
background-repeat:no-repeat;
<h2>-<h5>文字色
color:#ffa500;
overflow:hidden;
}
Page Top ▲
メイン <h2>
#main h2{
メイン <h2> 文字サイズ
font-size:9pt;
width:448px;
メイン <h2> 背景画像
background-image:url(image/h2.jpg);
メイン h2 枠の色
border-right:solid 1px #ffa500;
border-left:solid 1px #ffa500;
}
Page Top ▲
メイン <h3>
#main h3{
メイン <h3> 文字サイズ
font-size:9pt;
width:450px;
text-indent:10px;
text-align:left;
メイン <h3> 背景画像
background-image:url(image/h3.jpg);
}
Page Top ▲
サイドバー <h4>
#left h4,#right h4{
サイドバー <h4> 文字サイズ
font-size:8pt;
width:178px;
text-align:center;
サイドバー <h4> 背景画像
background-image:url(image/h4.jpg);
サイドバー <h4> 枠の色
border-right:solid 1px #ffa500;
border-left:solid 1px #ffa500;
}
Page Top ▲
サイドバー <h5>
#left h5,#right h5{
サイドバー <h5> 文字サイズ
font-size:8pt;
width:180px;
text-indent:10px;
text-align:left;
サイドバー <h5> 背景画像
background-image:url(image/h5.jpg);
}
Page Top ▲
リスト<ol><ul>
#main ul,#main ol{
margin-left:0px;
padding-left:35px;
padding-right:20px;
}
#main li{
line-height:2em;
text-align:left;
}
Page Top ▲
サイドボックス
.box_head,.box_main{
margin:auto;
width:180px;
サイドボックス 背景色
background-color:#222222;
background-repeat:no-repeat;
overflow:hidden;
}
.box_head{
margin-top:5px;
padding-top:10px;
サイドボックスヘッダー 背景画像
background-image:url(image/box_h.jpg);
background-position:top left;
}
.box_main{
text-align:left;
margin-bottom:5px;
padding-bottom:10px;
サイドボックスメイン 背景画像
background-image:url(image/box_f.jpg);
background-position:bottom left;
}
サイドボックス <ol><ul> リスト
.box_main ul,.box_main ol{
margin-left:0px;
padding-left:25px;
padding-right:1em;
}
.box_main li{
line-height:2em;
}
.box_main p{
padding-left:1em;
padding-right:1em;
margin-bottom:0px;
}
#left table,#left th,#left td,#right table,#right th,#right td{
サイドバー テーブル文字サイズ
font-size:8pt;
}
Page Top ▲
フッター 背景
#footer{
clear:both;
width:100%;
フッター 背景画像高さ
height:100px;
フッター 背景画像
background-image:url(image/footer.jpg);
background-repeat:no-repeat;
background-position:top left;
overflow:hidden;
}
Page Top ▲
スクロールボックス
.sbox{
スクロールボックス高さ
height:150px;
overflow:auto;
スクロールボックス枠線色
border:solid 1px #333333;
スクロールボックス背景色
background-color:#000000;
慣性スクロール 削除するとドラッグスクロール（スマートフォン用）
-webkit-overflow-scrolling:touch;
}
Page Top ▲
カラーボックス
.cbox{
カラーボックス枠線色
border:solid 1px #333333;
カラーボックス背景色
background-color:#000000;
}
Page Top ▲
.right{
text-align:right;
}
.center{
text-align:center;
}
.f_left{
float:left;
}
.f_right{
float:right;
}
.clear{
clear:both;
}
.up{
clear:both;
text-align:right;
padding-right:10px;
}
#copy{
font-size:8pt;
color:#555555;
width:100%;
height:20px;
background-color:#000000;
overflow:hidden;
}
#copy p{
float:right;
width:50px;
height:20px;
margin:0px;
padding:0px;
text-align:right;
overflow:hidden;
}
#copy a{
color:#555555;
text-decoration:none;
background-image:url(image/copy.jpg);
background-repeat:no-repeat;
background-position:top left;
padding-left:80px;
display:block;
}
Page Top ▲
色クラス
色クラスを追加できます。
. 名前(英数字){
color:# 色 ;
}
.darkblue{
color:#00008b;
}
.blue{
color:#0000ff;
}
.cyan{
color:#00ffff;
}
.skyblue{
color:#87ceeb;
}
.lime{
color:#00ff00;
}
.greenyellow{
color:#adff2f;
}
.green{
color:#008000;
}
.darkolivegreen{
color:#556b2f;
}
.olive{
color:#808000;
}
.darkkhaki{
color:#bdb76b;
}
.red{
color:#ff0000;
}
.tomato{
color:#ff6347;
}
.brown{
color:#a52a2a;
}
.maroon{
color:#800000;
}
.saddlebrown{
color:#8b4513;
}
.yellow{
color:#ffff00;
}
.gold{
color:#ffd700;
}
.orange{
color:#ffa500;
}
.darkgoldenrod{
color:#b8860b;
}
.magenta{
color:#ff00ff;
}
.purple{
color:#800080;
}
.blueviolet{
color:#8a2be2;
}
.violet{
color:#ee82ee;
}
.thistle{
color:#d8bfd8;
}
.pink{
color:#ffc0cb;
}
.mistyrose{
color:#ffe4e1;
}
.tan{
color:#d2b48c;
}
.wheat{
color:#f5deb3;
}
.silver{
color:#c0c0c0;
}
.gray{
color:#808080;
}
.black{
color:#000000;
}
.white{
color:#ffffff;
}

スタイルシート説明

text-decoration
テキスト装飾を指定します。

※Internet Explorer非対応

scrollbar-track-color
スクロールバーの背景色を指定します。

scrollbar-face-color
スクロールバーの表面色を指定します。

scrollbar-shadow-color
スクロールバー右下内側の色を指定します。

scrollbar-darkshadow-color
スクロールバー右下外側の色を指定します。

scrollbar-highlight-color
スクロールバー左上内側の色を指定します。

scrollbar-3dlight-color
スクロールバー左上外側の色を指定します。

scrollbar-arrow-color
スクロールバーの矢印の色を指定します。

line-height
行の高さを指定します。

padding-left
左内側の余白を指定します。

padding-right
右内側の余白を指定します。

margin-top
上外側の余白を指定します。

margin-bottom
下外側の余白を指定します。

background-position
画像の表示位置を指定します。

background-repeat
画像の並べ方を指定します。

font-family
フォントを指定します。
カンマ（,）で区切って複数指定することができます。
指定したフォントが無ければ、次のフォントが採用されます。
フォント名にスペースが含まれる場合は（""）か（''）で囲みます。