CSSの初期設定（リセット）

余白とボックスサイズ

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

全ての要素および擬似要素に対して、margin: 0;とpadding: 0;で余白をなくしています。ブラウザの仕様で余白が入ったりすることがあるので、一度全ての余白を消して必要な場合に個別に余白を設定しています。

box-sizing: border-box;はボックスサイズにborderやpaddingの値を含ませるという設定です。初期値ではボックスサイズにborderやpaddingが含まれないため、例えばwidth:100px;、padding:10px;、border:1px solid #ccc;のようなボックスを作ったとき、このボックスの横幅は122pxになってしまいます。これだとレイアウトなどを考えるときにborderやpaddingなども考慮する必要があり面倒なので、この設定をおこなっています。

フォーカス時のアウトライン

*:focus {
	outline: none;
}

Chromeでテキストボックスなどにフォーカスが当たると自動的に青い線が入ります。この青い線は個人的には不要なので、outline: none;で青い線が表示されないようにしています。

見出し

h1, h2, h3, h4, h5, h6 {
	line-height: 1;
	font-size: 1em;
	font-weight: normal; 
}

見出しの設定を一旦すべて統一させておき、それぞれの見出しはクラスを使ってデザインを設定します。こうする理由としては同じ見出しでデザインを変えたい場合に上書きなどが面倒なためです。

画像

img {
	border-style: none;
	vertical-align: bottom;
}

border-style: none;は画像リンクにした場合に枠が付いてしまうことがあるため、これを防ぐために入れています。vertical-align: bottom;は画像の下に少しだけ余白が入ることを防ぐための設定です。

リンク

a {
	text-decoration: none;  
}

テキストリンクの場合に自動的に下線が入りますが、この下線を表示させないためにtext-decoration: none;を設定しています。

リスト

li {
	list-style: none;
}

リストのマーカーを消しています。メニューなどを作る際にマーカーは邪魔になることがあり、アイコンはFontAwesomeで表示させることが多いので初期値のマーカーは削除しています。

テーブル

table {
	border-collapse: collapse;
}

テーブルのセルの間隔をあけないように設定しています。テーブルはセルをくっつけて線を引いて使うことが多い為、この設定にしています。

テキストエリア

textarea {
	resize: none;
	tab-size: 4;
}

テキストエリアはデフォルトで大きさを変更できるため、resize: none;で変更できない仕様にしています。またタブのサイズをtab-size: 4;で４文字分に指定しています。