Web白描

Webデザインの勉強 - 演習

リセットCSSの記述

★CSS

リセットCSS

ブラウザのデフォルトスタイル（初期値）を解除するためのCSSは「リセットCSS」と呼ばれ、世界中でいろいろな手法が試されています。
目的は、各ブラウザが持つ「ボックスモデルの値」を初期化すること
以下の例は、最小記述の resetCSS の例になります

全称セレクタ（ユニバーサルセレクタ）

「*（アスタリスク）」
HTML内のすべての要素を対象に適用できるセレクタ

@charset "UTF-8";

* {

}

余白をなくす

@charset "UTF-8";

* {
  padding: 0;
  margin: 0;
}

疑似要素も加える

::beforeと::afterは疑似要素といい、対象の要素に擬似的に要素を追加するためのセレクタです。
疑似要素は、全称セレクタではカバーしきれない場合があるため、この2つのセレクタも追加しています。

@charset "UTF-8";

*,*::before,*::after {
  padding: 0;
  margin: 0;
}

要素の幅と高さの計算方法を指定する

box-sizing（要素の幅と高さをどのように計算するかを設定）
content-box（初期値）
border-box

@charset "UTF-8";

*,*::before,*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

要素の幅と高さの計算方法

CSSボックスモデルで定義している
初期値は、要素の大きさは「width / heightの値」＋「paddingの値」＋「borderの太さ」の値を足した数値で算出

border-box

初期値である「content-box」を「border-box」変更することにより、paddingとborderの値を含めずに「width / heightの値」のみで計算するようになる

リストの行頭スタイルを非表示にする

「ul」の行頭「●」を非表示にする
「ul」のみで非表示になりますが、一般的に「li」で非表示にする場合もあるため両方記述します。
「list-style」は、「list-style-image」「list-style-position」「list-style-type」をまとめて指定

ul,li {
  list-style: none;;
}

リンクの文字色と下線の設定

文字色「inherit」は、親要素の文字色を継承する
下線の有無は、「text-decoration」で設定

a {
  color: inherit;
  text-decoration: none;
}

ベースになるスタイルを指定

文字色・文字サイズ・書体・行間を指定
背景色も指定

body {
  color: #000;
  background-color: #fff;
  font-size: 16px;
  font-family: sans-serif;
  line-height: 1.0;
}

img要素の最大幅を指定する

サイト制作の実務では、画像のサイズを２倍の大きさで用意するため、親要素内に収まるように指定します
「vertical-align: bottom;」文字の小文字の下部に当たる部分の空きをとる指定

img {
  max-width: 100%;
  vertical-align: bottom;
}

まとめ

初心者のサイト制作では、以下の最低限のリセットにとどめます
必要に応じて追加記述します

@charset "UTF-8";

/*-----------------------------------------
  reset 
-----------------------------------------*/
*,*::before,*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul,li {
  list-style: none;;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}