2013年のリセットCSS。HTML5とCSS3対応!

追記:2014年版を作成しました。是非こちらもご覧ください。
>>2014年のリセットCSSとレスポンシブ対応の初期CSS(wordpressもOK!)

2013年、いよいよHTML5、CSS3がガンガン活用されてきました。

最近はCMSでWebサイトを作成することが多いのですが、やはり、ゼロからコーディングする事もあります。そこで、今まで使っていたリセットCSSを見直し、もっと効率良く作業できるようカスタマイズしました。ブラウザごとの違いをリセットするためのCSSに、よく使うCSS3をコメントアウトで入れておきました。

CSS3は、アニメーション系以外で頻繁に使うもの、テキストシャドウ、ボックスシャドウ、ボックスシャドウ内側、角丸、トランジション、透明、背景のみ透明、グラデーションのコードと、おまけでスマホ対応時の記述を書いておきました。使わなかったものは、サイト制作後に、消すだけです。

また、Float解除時に使う、「 clear:both; 」と、
背景色・背景画像を残したい時に使う「 .clearfix 」も書いておきました。

.clearfixの使い方は、ページ下部をご覧ください。

なお、このリセットCSSはこちらからダウンロードできるようにもしておきました。
リセットcssをダウンロード

.clearfixによるfloatの解除

2段のレイアウトを組む際、こんな感じのコードになります。
.contentsに背景色や背景画像を設定したとき、
通常のfloatだと、変な感じになっちゃいますよね。

そこで・・・

.bothまたは.clear等に、clear:bothを設定することで、背景カラー、背景画像がしっかりと表示されるようになります。
これが最も簡単な方法です。

けれども、中身の無いタグを使うことになるので、記述としては、あまりよろしくありません。

そこで、.clearfixを使います。
.clearfixには下記のような指示が書かれています。

簡単にいうと、
.clearfixのお尻に、(:after )
CSSで空白を入れて、(content: “.”; )
それでfloat解除しましょう、(clear: both;)
ということです。

というわけで、このように記述します。

外側のdivに、.contentsと.clearfix の2つのクラスが付いている状態ですね。
こうすれば、一番最後の </div> の前に、
clear:both付きの空白が入ることになります。