前回のエントリーに引き続いて今回から具体的に実践に入っていきたいと思います。
default.css
ここでデフォルトの設定をしています。
/* ----------------------- Browser Default Initialization */
html {
overflow-y: scroll;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0; padding: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
}
table {
border-collapse: collapse; border-spacing: 0;
}
caption, th {
text-align: left;
}
q:before ,q:after {
content: '';
}
object, embed {
vertical-align: top;
}
hr, legend {
display: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
img, abbr, acronym, fieldset {
border: 0;
}
li {
list-style-type: none;
}
解凍したままの状態だと下記の状態になっていると思います。
/* ----------------------- Basic Style */
/* ------------ Font Style */
body {
font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
color: #666;
font-size: 75%;
line-height: 150%;
}
html>/**/body {
font-size: 12px;
}
* + html body {
font-family: "メイリオ","Meiryo";
}
/* ------------ A Style */
a, a:link, a:visited {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: underline;
color: #333;
}
a:active {
text-decoration: underline;
color: #333;
}
ここでbodyのに画像を読み込んだり、フォントサイズや色を決めたりしましょう
そうするとこうなります。
/* ----------------------- Basic Style */
/* ------------ Font Style */
body {
font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
background: url(../image/bg_body.gif) repeat;
color: #666;
font-size: 75%;
line-height: 150%;
text-align: center;
}
html>/**/body {
font-size: 12px;
}
* + html body {
font-family: "メイリオ","Meiryo";
}
/* ------------ A Style */
a, a:link, a:visited {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: underline;
color: #333;
}
a:active {
text-decoration: underline;
color: #333;
}
これでベースの設定は終わりです。
次のエントリーで本格的なレイアウトに入っていきます。
まだダウンロードしていない方は下記からダウンロードをお願い致します。
