ブラウザで確認
CSSコーディング
- まず、@charset を記述
CSSをリセット
- ブラウザーの初期値をリセットする
■ 空間のリセット
- ユニバーサル（全称）セレクタですべての要素をまとめてリセットする
- content area のみの幅・高さにするため余分な余白を取り除きます（marginとpadding）
- borderも計算されてしまうので、width内に収まるように指定します
■ 要素の幅と高さの計算方法
- 要素の幅・高さは、CSSボックスモデルで定義している
- 初期値は、要素の大きさは「width / heightの値」＋「paddingの値」＋「borderの太さ」の値を足した数値で算出
■ border-box
- 初期値である「content-box」を「border-box」変更することにより、paddingとborderの値を含めずに「width / heightの値」のみで計算するようになる
■ リストのリセット
- 「ul」の行頭「●」を非表示にする
- 「list-style」は、「list-style-image」「list-style-position」「list-style-type」をまとめて指定
- リストは、ul のスタイルのみリセット（olは、数字を表示したいことが多いためリセットはしない）
■ アンカーのリセット
- 文字色「inherit」は、bodyの文字色を継承
- 下線の有無は、「text-decoration」で設定
■ 画像のリセット
- サイト制作の実務では、画像のサイズを２倍の大きさで用意するため、親要素内に収まるように指定します
- 「vertical-align: bottom;」文字の小文字の下部に当たる部分の空きをとる指定
※この時点ではここまで（今後追加・変更していきます。）
