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



HTML5ホームページテンプレートをカスタマイズするにはスタイルシート( style.css )を使います。
色がついている箇所は変更可能です。

@charset "utf-8";
リンク全般
a{
リンク色
color:#ddddddd;
}
リンクマウスオーバー
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:#aa0000;
}
Page Top ▲

body{
文字サイズ全般
font-size:9pt;
フォント
font-family:"Times New Roman";
文字色全般
color:#dddddd;
背景色外側
background-color:#ffffff;
text-align:center;
margin:0px;
文字サイズを自動調整 削除すると自動調整あり(スマートフォン用)
-webkit-text-size-adjust:none;
}
Page Top ▲

テーブル
table,th,td{
margin:auto;
テーブル内の文字サイズ
font-size:9pt;
テーブル枠の色
border-color:#666666;
}
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:910px;
背景色
background-color:#000000;
背景画像
background-image:url(image/bg.gif);
background-position:top right;
background-repeat:repeat-y;
overflow:hidden;
}
Page Top ▲

ヘッダー 背景
#header{
width:100%;
ヘッダー 背景画像高さ
height:200px;
text-align:left;
背景画像
background-image:url(image/header.jpg);
background-position:top left;
background-repeat:nrepeat-x;
overflow:hidden;
}
Page Top ▲

ヘッダー <h1>
#header h1{
上からの位置
margin-top:90px;
左からの位置
padding-left:30px;
文字サイズ
font-size:14pt;
}
#header h1 a{
text-decoration:none;
}
Page Top ▲

メニュー
#menu,#menu2{
width:100%;
height:30px;
背景画像
background-image:url(image/menu_bg.jpg);
background-position:top left;
background-repeat:repeat-x;
太字設定
font-weight:bold;
}
#menu ul,#menu2 ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#menu li,#menu2 li{
float:left;
メニュー 横幅
width:140px;
height:30px;
line-height:30px;
overflow:hidden;
position:relative;
z-index:1;
}
#menu .on,#menu2 .on{
Internet Explorer6用メニュー 背景画像 マウスオーバー
_background-image:url(image/menu.jpg);
_background-position:top left;
_background-repeat:repeat-x;
overflow:visible;
}
#menu .sbm,#menu2 .sbm2{
left:-1px;
プルダウンメニュー背景色
background-color:#000000;
透明度
opacity:0.7;
filter:Alpha(Opacity=70);
position:absolute;
}
.sbm li,.sbm2 li{
プルダウンメニュー 線の色 (下のメニュー 仕切り線色と一緒に設定します。)
border-left:solid 1px #333333;
border-bottom:solid 1px #333333;
}
#menu a,#menu2 a{
/* ニューの文字を左寄せにする場合 */
/* text-align:left; */
/* padding-left:10px; */
文字色
color:#ffffff;
text-decoration:none;
white-space:nowrap;
メニュー 仕切り線色
border-right:solid 1px #333333;
太字設定
font-weight:bold;
display:block;
}
#menu a:hover,#menu2 a:hover{
メニュー 背景画像 マウスオーバー
background-image:url(image/menu.jpg);
background-position:top left;
background-repeat:repeat-x;
メニュー 文字色 マウスオーバー
color:#ff0000;
}
#menu .sbm a:hover,#menu2 .sbm2 a:hover{
プルダウンメニュー 背景 マウスオーバー
background-image:url();
background-color:#222222;
}
Page Top ▲

#main{
margin:auto;
width:890px;
overflow:hidden;
}
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 ▲

レイアウトボックス 1- 4
.box1,.box2,.box3,.box4{
width:890px;
margin:auto;
margin-top:5px;
margin-bottom:5px;
背景色
background-color:#ffffff;
文字色
color:#333333;
overflow:hidden;
}
.box1 a,.box2 a,.box3 a,.box4 a{
レイアウトボックス 1- 4 リンク文字色
color:#333333;
}
.box2{
レイアウトボックス 2 背景画像
background-image:url(image/box2.gif);
background-position:top right;
background-repeat:repeat-y;
}
.box3{
レイアウトボックス 3 背景画像
background-image:url(image/box3.gif);
background-position:top right;
background-repeat:repeat-y;
}
.box4{
レイアウトボックス 4 背景画像
background-image:url(image/box4.gif);
background-position:top right;
background-repeat:repeat-y;
レイアウトボックス 4 文字サイズ
font-size:8pt;
}
Page Top ▲

<h2> - <h5>設定
#body h2,#body h3,#body h4,#body h5{
margin:auto;
margin-top:0px;
margin-bottom:0px;
文字サイズ
font-size:9pt;
height:30px;
line-height:30px;
背景画像
background-image:url(image/h.jpg);
background-position:top left;
background-repeat:repeat-x;
文字色
color:#ffffff;
overflow:hidden;
枠の色 (type2用)
border-left: solid 1px #6600ff;
border-right: solid 1px #6600ff;
}
#body h2 a,#body h3 a,#body h4 a,#body h5 a{
<h2> - <h5> リンク文字色
color:#ffffff;
}
#body h3,#body h5{
text-indent:10px;
text-align:left;
}
#body .box4 h2,#body .box4 h3,#body .box4 h4,#body .box4 h5{
レイアウトボックス 4 <h2> - <h5>文字サイズ
font-size:8pt;
}
#body .box4 table,#body .box4 th,#body .box4 td{
レイアウトボックス 4 テーブル文字サイズ
font-size:8pt;
}
Page Top ▲

.left1,.right1{
width:440px;
overflow:hidden;
}
.left2,.center1,.right2{
width:290px;
overflow:hidden;
}
.left3,.center2,.center3,.right3{
width:215px;
overflow:hidden;
}
.left1,.left2,.left3,.center1,.center2,.center3{
float:left;
}
.right1,.right2,.right3{
float:right;
}
.center1,.center2,.center3{
margin-left:10px;
}
Page Top ▲

フッター 背景
#footer{
clear:both;
width:100%;
フッター 背景画像高さ
height:150px;
フッター 背景画像
background-image:url(image/footer.jpg);
background-position:top left;
background-repeat:repeat-x;
overflow:hidden;
}
Page Top ▲

スクロールボックス
.sbox{
スクロールボックス 高さ
height:150px;
overflow:auto;
スクロールボックス 枠線色
border:solid 1px #333333;
文字色
color:#dddddd;
背景色
background-color:#000000;
慣性スクロール 削除するとドラッグスクロール(スマートフォン用)
-webkit-overflow-scrolling:touch;
}
Page Top ▲

カラーボックス
.cbox{
カラーボックス 枠線色
border:solid 1px #333333;
文字色
color:#dddddd;
背景色
background-color:#222222;
}
#body .sbox a,#body .cbox a{
スクロールボックス、カラーボックス リンク色
color:#dddddd;
}
Page Top ▲

.right{
text-align:right;
}
.center{
text-align:center;
}
.f_left{
float:left;
}
.f_right{
float:right;
}
.clear{
clear:both;
}
文字サイズクラス
文字サイズクラスを追加出来ます。
. 名前(英数字){
font-size: 文字の大きさ ;
}
.large1{
font-size:120%;
}
.large2{
font-size:150%;
}
.small1{
font-size:80%;
}
.small2{
font-size:60%;
}
Page Top ▲ テーブルクラス
テーブルクラスを追加出来ます。
. 名前(英数字) 適用するタグ(th td){
余白
padding:10px;
テーブルの線種、太さ、枠の色
border:solid 1px #0000ff;
}
.table,.table th,.table td{
border-style:solid;
border-width: 1px;
}
.table img{
vertical-align:bottom;
}
.hr {
border-style:solid;
border-width:1px 0px 0px 0px;
margin:auto;
水平線 class="hr"上下余白
margin-top:0.5em;
margin-bottom:0.5em;
}
.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;
}
Page Top ▲

スタイルシート説明

長さの単位一覧
emフォントの幅を1emとする長さ
ex文字xの幅を1exとする長さ
px液晶の1 ピクセルを1pxとする長さ
inインチ( 1in=2.54cm )
cmセンチメートル
mmミリメートル
ptポイント( 1pt = 1/72in )
pcパイカ( 1pc = 12pt )

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

noneなし
underline下線
overline上線
line-through打ち消し線
blink blink 点滅 ※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
画像の表示位置を指定します。

left
right
center中央
top
bottom

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

noneなし
repeat全体に敷き詰める
repeat-x横方向に敷き詰める
repeat-y縦方向に敷き詰める
no-repeat敷き詰めない

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

inserted by FC2 system