Blog | ブログ

2007.03.21 03:30

デフォルトのCSSとか

最近色んなところで、
デフォルト用CSSをみんな書いているので、
自分のも書いてみます。

1回自分で用意しておくと、すごい楽ですよ。


* {margin: 0;padding: 0;}
■これで、全部のmargin paddingをリセット。これがないと話にならない。


body {
font-family:verdana,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','Osaka','MS Pゴシック',sans-serif;
font-size: 80%;
color: #333;
line-height: 1.4;
text-align: center;
background: #fff;
}
■横文字は、MSゴシだと、ちょいダサなので、verdanaを指定。
■font-sizeは、いまいち、よい設定がわかりません。
■colorは#000だとちょいきつい。
■line-heightは、em,%指定はしないほうがいいって。
■text-alignは、センタリング用。時々でなくなったり。
■bgも指定してあげるべし。


a {
color: #00f;
}
a:visited {
color: #009;
}
a:hover {
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
■あんまり良いとは思わないけど、
どうせ、そのままのサイズじゃ使い物にならないので。


ul,ol,li,dl,dt,dd {
list-style: none;
}
img {
border: 0;
vertical-align: bottom;
}
■htmlで、border="0"は書かないための指定と、
IEの画像の下の余白対策。

a img {
overflow: hidden;
}
■主に画像置換したさいの、リンクの枠線(点線)が延びる現象回避。


p {
margin: 0 0 1em 0;
}
■これが無難っぽい。

.clfx {
zoom:1;
min-height: 1px;
}
.clfx:after{
content:".";
display: block;
clear:both;
height: 1px;
line-height: 1px;
margin-top: -1px;
visibility:hidden;
}
■clearfixはすごい楽。
でも、参考にしたCSSが不完全だったのか、
微妙に崩れたりして、CSS直したりしたあげく、今はこの形。


.clr{
clear: both;
}
■よく使うので書いている。


あとは、
大きめのサイト作るときは、
.aligncenter
.alignright
.floatleft
.floatright

なんかも書くこともあります。
あんまCSSの意味をなしてないけどもね。

2007.03.21 03:30