【CSS】シンプルなclearfixと reset.cssをまとめたファイル

私が使っている、シンプルなclearfixとrecet.cssをまとめたファイルを紹介します。

clearfixは様々なものが色々な人によって作られてきましたが、いまいちシンプルでないものや、稀に効果が反映されなかったりするものがあります。

そのため「最も良いものはないか？」と以前調べたりカスタマイズしたりして、最終的に落ち着いたものが下記です。

[css]

@charset "utf-8";

/*—————————————————————-
*　recet
—————————————————————-*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,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;
}
object,embed {
vertical-align:top;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight:normal;
}
img,abbr,acronym,fieldset {
border:0;
}

li {
list-style-type:none;
}

/*—————————————————————-
*　clearfix（フロート要素を含む親要素に適用させる）
—————————————————————-*/

#sample:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow:hidden;
}

#sample{
zoom:1;
overflow:hidden;
}

[/css]

clearfixにoverflow:hidden;を指定しているのは、Dreamweaver上で見るときにこの指定がないとレイアウトが崩れて表示されてしまうためです。
clearfixも、タグを指定する箇所が2つしかないので、スムーズに作業できると思います。

いま紹介していて思ったのですが、bodyなどにline-height:170%などを指定して行間空けると、たまーにFirefoxにおいて画像要素の上下に余白ができることがあるので、img要素にline-height:0;の指定を追加してもいいかも。。。

上記のファイルはこちらからダウンロードできます。ご自由に使用・改造・配布して頂いて結構です。

シンプルなclearfixと recet.cssをまとめたファイル