1. ホーム
  2. HTML・CSS
  3. 基礎20. デフォルトCSSとリセットCSS

基礎20. デフォルトCSSとリセットCSS

デフォルトCSS（user agent stylesheet）とは

各ブラウザは要素に対して、あらかじめCSSが設定されています。
このデフォルトで設定されているCSSをユーザーエージェント スタイルシートと言います。例えばh1などの見出し要素を使うと、文字サイズに違いや太字になります。
デフォルトCSSはブラウザの種類やバージョンによって設定値に違いがあります。このブログで「初期値」という表記があったと思いますが、初期値は、ブラウザのデフォルトCSSを指します。

デフォルトCSSの確認方法

各ブラウザには、開発ツールと呼ばれるHTMLとCSSの確認が行えるツールがあります。機能の充実さで、主にGoogle Chromeの「デベロッパーツール」を使用します。
開発ツールの表示・非表示の切り替えは、Windowsでは「F12」。 Macでは「Command ＋ Option + i」で行います。

デベロッパーツール

起動するとHTMLとCSSが左右に表示されていることが確認できます。左側のHTMLの要素をクリックすると、右側にその要素に指定されているCSSを確認することができます。
CSSは優先順位の高い順から表示され、上書きされている部分は打ち消し線で表示されます。CSS側で背景がグレーで表示されている部分がブラウザのデフォルトCSSです。

リセットCSS（reset css）とは

デフォルトCSSの設定値をなるべくゼロベースの状態にしたり、文字サイズなどの装飾を統一するために設定したCSSのことです。
リセットCSSは「reset.css」または「リセットCSS」で検索すると、色々なリセットCSSが見つかると思います。
リセットを行わず、デフォルトのCSSを活かして、最小限のリセットをする「Normalize.css」という手法もあります。
どの手法も開発者ごとの考え方があり、比べてみると興味深いと思います。ただし、どのリセットCSSを利用するにしても、ソースコードは必ず確認してください。せっかくリセットしてあるのに、同じ設定をしてコードが増えてしまっては意味がありません。

今回は、初心者向けに全称セレクタを利用したリセット方法を紹介します。
慣れてきたら、自身が作業しやすいリセットCSSを考えてみるのもよいでしょう。


@charset "UTF-8";
	
/* ********************************************
// --- リセット ---
// ※ブラウザのデフォルトCSSをリセット
// ***************************************** */
	
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html{
  font-size: 16px;
}
body {
  font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
header, footer, nav, menu, article, aside, section, details, figcaption, figure{
  display: block;
}
ul, ol {
	list-style: none;
}
table {
  border-collapse: collapse;
}
img {
  vertical-align: bottom;
}
a img {
  border: none;
}
strong {
  font-weight: normal;
}
i{
  font-style: normal;
}

まとめ

  • 各ブラウザごとに、各要素にデフォルトのCSSが設定されている
  • CSSの確認は「開発者ツール（デベロッパーツール）」で確認できる
  • reset.cssはデフォルトCSSをなるべくゼロベースに設定したCSSの設定のこと

関連記事