HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

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

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

      2019/05/30   hatano

デフォルトCSS（default css）とは

各ブラウザは要素に対してあらかじめCSSが設定されています。

これを「デフォルトCSS（default.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をリセット
// ***************************************** */
	
*{
  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のこと

関連記事