マークアップ初心者がリセットCSSを作ったときのメモ

リセットCSS

ゼロからコーディングしてサイトを作っていくなかで『リセットCSS』なるものに出会いました。

はじめは「リセットCSS?なにそれ?」という感じでしたが、調べていくうちにその重要性に気づき、初心者なりに自分のリセットCSSを作ってみたので、その一連の流れをメモしておきます。

そもそもリセットCSSとは

リセットCSSというのは、「ブラウザにデフォルトで指定されているCSSを、リセットするためのCSS」です。

ゼロからコーディングをした経験があるひとは気づいたと思いますが、ブラウザにはデフォルトで「最低限のCSS」というのが設定されています。

CSSを1ミリも書いていなくても、h2などの見出しタグには大きめのフォントサイズと太さ、pタグには上下に読みやすい余白が入りますよね。それがブラウザにデフォルトで設定されたCSSなのです。

たしかにこれは便利なんですが、ひとつ問題があります。

それは、ブラウザごとにデフォルトのCSSが違う、ということ。つまり、IEだといい感じなのにChromeだとデザインが崩れる、といったことが起きてくるんですね。

そういう「ブラウザ間の表示のズレ」をなくすために、ブラウザのデフォルトCSSをいったんゼロに戻して、まっさらな状態にする。これがリセットCSSの役割です。

オープンソースのリセットCSSを使うのが一般的

「リセットCSSの概念はだいたい理解できた。でも、具体的にどうやって作ればいいの?」と思いますよね。

結論をいうと、ゼロからリセットCSS を自作する必要はありません。なぜなら、ネット上にはオープンソースのリセットCSSがたくさん存在しているから。

ですので、すでに完成されたオープンソースのリセットCSSのなかから最適なものを選んで使うのが一般的です。

有名どころでいくと、『Yahoo! (YUI 3) Reset CSS』や『Eric Meyer’s Reset CSS 2.0』あたり。

中身はこんな感じになっています(一部抜粋)。

リセットCSSを自作する

今回は、オープンソースのリセットCSSをベースに、私が使いやすいように修正しました。

なぜそんなことをするのかというと、オープンソースのリセットCSSには使わない(であろう)スタイルが含まれているからです。

例えば、 『hgroup』というタグ使ったことはあるでしょうか。私はありません。使う予定のないスタイルはコードを汚すだけなので削除したほうがいいですよね。

逆に、自分で追加したいスタイルもあるかもしれません。

まとめると、リセット CSS を自作する手順は以下のようになります。

    • オープンソースのリセットCSSをベースとして使う
    • 自分で使いやすい形にカスタマイズする

そんなわけで実際にできたリセット CSS がこんな感じ。

ベースとして使ったのは、HTML5に対応している『HTML5 Doctor CSS Reset』。『ins』・『mark』などの不要なタグを削除したうえで、ユニバーサルセレクタにbox-sizingのスタイルを当てました。

まとめ

今回作ったリセットCSSは、ゼロからサイトを作るときに使いまわすことができます。

reset.cssというファイル名で保存して、モジュール化することにしました。これで、次回サイトを作るときには一瞬でブラウザのデフォルトCSSをリセットすることができますね!

ちなみに個人的にはreset.cssとstyle.cssは別のファイルで用意しておいて、head内で両方を読み込ませるのがスマートな気がしています。

オリジナルのリセットCSS、作ってみてはいかがでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です