CSS図解

CSS覚書

padding:●px ●px ●px ●px;/*文字の位置：上右下左の余白*/
margin:●px ●px ●px ●px;/*エリアの余白：上右下左*/
margin:●px ●px ;/*画像外側の余白：「上下」「左右」*/

/*---スクロールバー--------------------*/
* {
scrollbar-base-color: #;
scrollbar-highlight-color: #;
scrollbar-3dlight-color: #;
scrollbar-arrow-color: #;
scrollbar-shadow-color: #;
scrollbar-darkshadow-color: #;
scrollbar-face-color: #;
}

/*---リンクの文字色など--------------------*/
div#main a {
text-decoration : none;
color : #;
}
div#main a:hover {
text-decoration : none;
color : #;
}

/*---タイトルバナー--------------------*/
#banner H1 {
FONT-SIZE: x-large; PADDING-TOP: ●px;padding-bottom:●px
}/*タイトル文字の種類と位置*/

#banner H2 {
margin-LEFT: ●px
}/*タイトルの下の文字の種類と位置*/

/*---タイトルバナー参考--------------------*/
h1 {
margin : 10px 0 0 10px;
text-align : right;
}/*タイトル文字の種類と位置*/

h2 {
color : #●●●●●●;
text-align : center;
font-weight : bold;
margin-top: 10px;
}/*タイトルの下の文字の種類と位置*/

/*---記事欄--------------------*/
.entry-body,.entry-more {
MARGIN: 0px 15px
}/*記事欄の余白「上下」「左右」*/
.entry-body-text,.entry-more-text {
WIDTH: 440px
}/*記事欄の幅*/
.entry-body-bottom {
BACKGROUND: url(画像のURL) no-repeat center center; MARGIN: 20px 0px 0px; HEIGHT: 21px
}/*記事の下の区切りの画像と位置*/

DIV.entry P.posted {
PADDING-RIGHT: 15px; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; PADDING-TOP: 20px; FONT-SIZE: small; TEXT-ALIGN: left
}/*フッターの文字の大きさ種類位置*/

/*---サイドバー--------------------*/
.sidebar h2
{
background-image:url(画像のURL);
background-repeat:no-repeat;
height:●px;
padding-top:●px;
padding-left:●px;
}/*サイドバー項目の画像と文字の位置*/

.sidebar li
{
padding-left:●px;
} /*サイドバーリスト内項目の文字の位置*/

.module,.list {
BACKGROUND: url(画像のURL) no-repeat left bottom; MARGIN-BOTTOM: px; PADDING-BOTTOM: px; WIDTH: px; COLOR: #
} /*項目の行間と項目の下の画像*/

/*---カレンダー------------------------*/
#calendar{
FONT-SIZE: x-small
}

/*---コメント欄------------------------*/
.entry-trackback H2,.archive-datebased H2,.archive-category H2,.comment-list H2,.comment-form H2,.comment-preview H2,.comment-list-previous H2,.comment-error H2,.contact-list H2,.minibio H2,.bio H2,.interests H2{
PADDING-LEFT: ●px; FONT-WEIGHT: bold; FONT-SIZE: medium; BACKGROUND: url(画像のURL) no-repeat; COLOR: #●●●●●●; MARGIN-top: ●px
}/*コメント欄の項目の左の画像*/

#comment-text textarea, #comment-text-field textarea
{
background-image:url(画像のURL); /*背景画像の指定*/
background-repeat:no-repeat; /*背景画像の繰り返し：なし*/
background-position:100% 100% ; /*背景画像の位置*/
scrollbar-base-color:#●●●●●●;
BORDER: #●●●●●● 1px solid; HEIGHT: ●px; BACKGROUND-COLOR: #ffffff
}/*コメントを書き込む欄の背景画像と位置と枠の色*/

.entry-trackback,.archive-category,.comment-list,.comment-form,.comment-list-previous,.minibio,.bio,.interests{
MARGIN-left: -●px
}/*コメント欄の文字のエリア*/

#comment-submit INPUT {
BORDER-RIGHT: #●●●●●● 1px solid; BORDER-TOP: #●●●●●● 1px solid; BORDER-LEFT: #●●●●●● 1px solid; COLOR: #●●●●●●; BORDER-BOTTOM: #●●●●●● 1px solid; BACKGROUND-COLOR: #●●●●●●
} /*確認と送信ボタンの色*/

#comment-submit {
WIDTH: ●px; TEXT-ALIGN: center
}/*確認と送信ボタンの位置*/

#author,#email,#url {
BORDER: #●●●●●● 1px solid; BACKGROUND-COLOR: #ffffff
}

.comment-form FORM P {
MARGIN: ●px
}/*名前、メール、URL、テキストボックスの余白*/

/* ベース
------------------------------------------------------------ */
div#container{
border:3px dotted #c8e3ff;
width : px ;
}/*コンテナー幅と枠線*/

div#main {
width : px ;
}/*記事幅*/

/* ---------画像の周りを線で囲む --------*/
div#main img{
padding: 5px;
border: 1px solid #cccccc;
}

/* ---------画像に影をつける --------*/
div#main img{
padding: 5px;/*影の幅*/
filter: shadow(color=#b8b89c,direction=120);
}

/* 補足
------------------------------------------------------------ */
* {
border:px dotted #;
}/*各エリアすべてのまわり*/