mina-majorana
かしわざきみなの制作日記

style.css

※こちら一つの例であって必ずではありませんのであしからず


/*--------------------------
 メイン部分
---------------------------*/
#main {
float: right;
width: ●●●px;
}
h1 {
background-color:#●●●;
border-top: 5px solid #●●●;
color: #●●●;
font-size:0.8en;
margin-bottom:10px;
padding:5px 10px;
}
h2 {
background: url("●●●.gif") no-repeat scroll left top transparent;
height: ●●●px;
width: ●●●px;
margin-bottom: 15程度●●●px;
text-indent: -9999px;

}
/*--------------------------
text-indent: -9999px;
画像内にタイトルがあるとき使うから覚えた方がいい
---------------------------*/

h3 {
background: url("●●●.gif") no-repeat scroll left top transparent;
height: ●●●px;
width: ●●●px;
margin-bottom: 10程度px;
padding-left: 20程度●●●px;
padding-top: 8程度●●●px;

}
#main p {
margin-bottom: 15程度●●●px;
}
#main p.icon{
text-align: right;
}


#main p.icon a {
padding-left: 10程度●●●px;
}
a:link {
color: #●●●;
text-decoration: none;
}
a:visited {
color: #●●●;
text-decoration: none;
}
a:hover {
color: #●●●;
text-decoration: none;
font-weight: bold;
}
a:active {
color: #●●●;
text-decoration: none;
font-weight: bold;
}

/*--------------------------
 ヘッダー部分
---------------------------*/

#header {
background-color:#●●●;
width: 800程度●●●px;
margin-bottom: 25程度●●●px;
}
#header p {
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 8程度●●●px;
padding-left: 8程度●●●px;
}
#header li {
float: right;
padding-right: 8程度●●●px;
}
/*--------------------------
 改行部分でクリア両方
---------------------------*/
.clear {
clear: both;
}
/*--------------------------
 サイドバー部分
---------------------------*/
#sidemenu {
float: left;
width: 200程度●●●px;
}

#menu {
margin-bottom: 15程度●●●px;
}
#menu a {
color: #●●●;
padding: 10程度●●●px;
text-decoration: none;
width: ●●●px;
display: block;

}
#menu a:link,
#menu a:visited{
background: url("●●.gif") repeat-x scroll left top #●●●;
border-bottom:2px sold #●●●;}

#menu a:hover,
#menu a:active {
background: url("●●.gif") repeat-x scroll left bottom #●●●;
border-bottom: 2px solid #●●●;
font-weight: bold;
}
/*--------------------------
 フッター部分
---------------------------*/
#footer {
clear: both;
width: 800程度●●●px;
}
#footer li {
display: inline;
padding: ●●● ●●●px;

}
#footer p {
font-size: 0.8程度●●●em;
text-align: right;
}
#wrap #footer ul {
background-color: #●●●;
}

#footer li a:link
#footer li a:visited {
color:#●●●;
text-decoration: none;
}
#footer li a:hover
#footer li a:active {
color:#●●●;
text-decoration: underline;
}




わたしが練習したものの基本のcssだけまとめました。
これみれば、できるでしょ??

あとは自分の力信じるしかないですね。
忘れないようにちょこちょこまとめましょう。
スポンサーサイト

Post comment

管理者にだけ表示を許可する

Trackback

trackbackURL:http://minamajorana.blog.fc2.com/tb.php/30-26595002
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。