リセットCSS

リセットする意味を理解する必要がありますが、初学者にとってCSSの全体像をつかめないと理解しにくいのも「リセットCSS」です

《サンプル》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リセットCSSを記述する前に</title>
<style>
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
h1,p,li {
  color: #FFF;
}
h1 {
  background-color: #95CCE2;
}
p {
  background-color: #EFB15F;
}
li {
  background-color: #98DC77;
}
</style>
</head>
<body>
<h1>ページのテーマ</h1>
<p>ここに本文が入る</p>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</body>
</html>

《プレビュー》

各要素間が、指定していないにもかかわらず空いているのがわかります
リストも２文字分インデントされています

これは、ブラウザが初期値としてもっている空きの値を利用してプレビューしているからです

《空きをなくす記述》

h1,p,ul {
  color: #FFF;
  margin: 0;
  padding: 0;
}

この状態から、自分の空けたい値を指定することにより、思い通りのレイアウトにするということが「リセットCSS」の目的です。

《ブラウザとの空きもなくす記述》

body,h1,p,ul {
  color: #FFF;
  margin: 0;
  padding: 0;
}

これからページを構築していく段階で、「初期値：0」であることにより、指定した値が反映されていることが確認しやすくなります。

リセット記述例

@charset "UTF-8";

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

リセットCSSは、Web歴史的な背景を背負っているため、仕事のなかでも「ベター」な選択があるだけで、絶対的なルールではありません
将来的には「Normalize.css」という選択肢もありますが、初学者の選択肢ではありません
授業内では、「リセットCSS」の根拠を理解する必要があるため、単純な記述から初めて徐々に複雑にしていきます

《過去のレイアウトのためのCSS》

@charset "UTF-8";

/* reset */
* {
  margin: 0;
  padding: 0;
}

《過去のレイアウトのためのCSSを修正》

@charset "UTF-8";

/* reset */
ここに指定した要素名を記述 {
  margin: 0;
  padding: 0;

この記述の意味を理解するためには、
「margin」「padding」「background-color」
つまり、ボックスモデルの概念を理解することが必須です。