個人ホームページ制作を無料で依頼・請負できるサイト

スタイルシートを見る際に

このスタイルシート（ＣＳＳ）はこのサイトだけのものです
ＸＨＴＭＬのソースはブラウザの表示→ソースの表示で見れます。必ずソースとにらめっこしながら見ていってくださいね
/*と*/で囲まれた部分はコメント文です、動作には何の関係もありません。解説として入れてみました。参考になれば幸いです
スタイルシートの中で#honyarara{設定等}となっていてＸＨＴＭＬのなかで　<div id="honyarara>ってなってるところ、またスタイルシートの中で.honyararaとなっていてＸＨＴＭＬのなかで<div class="honyarara>となっているところに スタイルが適用されます

このサイトのスタイルシートここから

@charset "shift_jis";
/*外部スタイルシートにする場合文字コードの 指定が一番最初の行に必要です*/

/*デザインの設定*/

body{
background: url(images/back-bg.gif) repeat-y center;
background-color: #ffffff;/*ページ全体の背景色*/
margin: 0;
font-family: "ＭＳ Ｐゴシック","平成角ゴシック",sans-serif;
font-size: 0.8em;/*文字サイズ*/
color: #333333;/*文字色*/
line-height:130%;/*行間*/
text-align: center;
}

a{ text-decoration:underline; }
a:link{ color: #333333; }/*リンク文字の色*/
a:visited{ color: #333333; }/*訪問済みリンクの色*/
a:hover{ color: #ff0000; }/*カーソルがリンク文字上に来たときの色*/


/*サイト全体の設定*/
#container{
width: 810px;
margin: 0px auto 0px auto;
text-align: left;
}


/*最上部帯の設定*/

#header{
width: 810px;
position: absolute;
margin: 0px 0px 0px 0px;
height: 30px;
z-index: 0;
background-color: #ffffff;/*最上部帯の背景色*/
}

/*見出しの設定*/
h1{
position: absolute;
margin: 10px 0px 0px 0px;
padding-left: 10px;
text-align:left;
font-size: 8.5pt;
color: #333333;
font-weight: normal;
text-decoration:none;
z-index: 1;
}


/*最上部のメニューリストの設定*/
#top-menu-list{
position: absolute;
left: 450px;
top: 7px;
width: 340px;
text-align:right;
}

#top-menu-list li{
display:inline;
font-size: 8pt;
color: #333333;
}

#top-menu-list li a:link{ color: #333333; }
#top-menu-list li a:visited{ color: #333333; }
#top-menu-list li a:hover{ color: #ff0000; }


/*ヘッダーロゴ画像の設定*/

#header-logo{
position: absolute;
margin: 30px 0px 0px 0px;
width: 810px;
height: 110px;
background-image:url(images/logo.jpg);/*ヘッダー画像*/
z-index: 1;
text-align: left;
}


/*ロゴテキストの設定*/
#logo-text{
position: absolute;
top: 28px;
left: 18px;
color: #333333;
font-size:24pt;/*ロゴテキストのフォントサイズ*/
font-weight: bold;
letter-spacing:-0.5pt;/*文字間を若干詰めています*/
width: 440px;
z-index: 1;
}

#logo-text a{ text-decoration:none; }


/*サブテキストの設定*/
#sub-text{
position: absolute;
top: 65px;
left: 18px;
color: #333333;
font-size:10pt;/*フォントサイズの設定*/
font-weight: bold;
width: 440px;
}

#sub-text a{ text-decoration:none; }


/*ヘッダー文章の設定*/
#header-text{
position: absolute;
top: 10px;
left: 460px;
padding: 10px 20px 0px 0px;
color: #000000;
font-size:9pt;
text-align: right;
width: 340px;
}


/*パン屑ナビ*/

#navi{
position: absolute;
margin: 150px 0px 0px 0px;
padding-left: 10px;
text-align:left;
font-size: 8.5pt;
}


/*Googleアドセンスの設定*/

/*左*/
#big-banner{
position: absolute;
margin: 175px 0px 0px 0px;
width: 810px;
text-align: center;
z-index: 1;
}


/*左メニュー*/

#left{
position: absolute;
margin: 275px 0px 0px 10px;
width: 190px;
text-align: left;
z-index: 1;
}

#left .menu{
margin: 10px 0px 10px 0px;
padding: 0px;
background-color: #ffffff;
text-align: left;
color: #000000;
border: 1px solid #FFD0A2;
width: 198px;
}


#left .title{
margin: 0px;
padding: 5px 10px 5px 10px;
background-color: #FFD0A2;/*背景色*/
color: #ffffff;
text-align: center;
font-weight: bold;
font-size:1.0em;
width: 178px;
_width: 198px;
}


#left ul{
margin: 5px 0px 5px 30px;
text-align: left;
}


#left li{
padding: 10px 5px 10px 0px;
color: #000000;
font-size:1.1em;
font-weight: bold;
list-style-type: disc;
list-style-position: outside;
}


/*コンテンツ*/
#left .contents{
margin: 10px 0px 10px 0px;
padding: 10px; background-color: #ffffff;/*背景色*/
text-align: left;
color: #000000;
border: 1px solid #FFD0A2;/*枠線の色*/
width: 178px;
_width: 198px;
}


/*中央コンテンツ*/


#center{
position: absolute;
margin: 285px 0px 0px 225px;
text-align: left;
width: 400px;
}


/*コンテンツ*/
#center .contents{
margin: 10px 0px 20px 0px;
padding: 15px;
text-align: left;
clear: both;
}


/*copyright*/
#center #copyright{
margin: 5px 0px 20px 0px;
color: #777777;
font-size: 10pt;
}


/*右の設定*/


#right{
position: absolute;
margin: 285px 0px 0px 640px;
text-align: left;
width: 160px;
}


/*コンテンツ*/
#right .contents{
margin: 10px 0px 20px 0px;
background-color: #ffffff;
padding: 15px;
text-align: left;
clear: both;
}


/*画像配置*/

.left{
float: left;
margin: 0px 30px 20px 0px;
}

.right{
float: right;
margin: 0px 0px 20px 30px;
}


/*見出し・装飾タグの設定*/


/*文字色*/
.black{ color: #000000;}
.red{ color: #ff0000;}
.blue{ color: #0000dd;}
.green{ color: #008000;}
.yellow{ color: #ffff00;}
.navy{ color: #1F26A9;}
.gray{ color: #cccccc;}
.orange{ color: #ff6600;}
.pink{ color: #cc6699;}
.purple{ color: #660099;}
.olive{ color: #808000;}
.lime{ color: #00ff00;}
.aqua{ color: #167FA6;}


h2 {
padding:0px 0px 0px 7px;
font-weight: bold;
font-size: 1.1em;
line-height: 2.0em;
color: #333333;
border-left: 5px solid #FFD0A2;
background: #eeeeee;
clear: both;
}


h3{
width: 380px;
background: url(images/h3back.gif);
margin: 10px 0px 10px 10px;
padding: 4px 0px 0px 10px;
text-align:left;
font-size: 14px;
font-weight: bold;
color: #333333;
clear: both;
}

/*戻る・進む*/
.link-back,.link-next{
padding: 3px;
margin: 30px 0px 30px 0px;
font-weight: bold;
font-size:1.1em;
clear: both;
}

.link-back{ float: left;}
.link-next{ float: right;}

.underline{ text-decoration:underline;}

.not{ text-decoration:line-through;}

.impact{
padding: 0px;
color: #000000;
background-color: #ffff66;
}


/*横線*/
hr{
border-width: 1px 0px 0px 0px;
color:#cccccc;
border-style: solid none none none;
clear: both;
height:1px;
}

/*Copyright用横線*/
hr.copyright{
border-width: 1px 0px 0px 0px;
border-style: solid none none none;
color:#aaaaaa;
clear: both;
height:1px;
}


/*リスト*/
ul.list1{
font-size:1.0em;
line-height:250%;
text-decoration:none;
list-style-type: disc;
list-style-position: inside;
}


/*テーブル*/
td{
padding: 8px;
}