CSSリセットのお呪いと+α

見出し右端の記号は?

 
Web Page
Booskanium's Tips.
忘れっぽい落書き人のメモ

ここに落書きするメモは、下記のリセットが行われている事が前提です。

余白や文字の設定を全てリセット

ブラウザのuser agent stylesheet

これがスタイルの既定値です。厄介なのは、ブラウザによって既定値が異なることです。
そこで余白や文字の設定を全てリセットしておきます。事例はいっぱいありますが大差ありません。

ちょっと付け足し

引っ張ってきたリセットCSSに追記していること

html {
	/* トップのhtmlにwidth指定を行っておかないと、子要素のbodyのwidth指定で%指定が効きません。 */
	width: 100%;
	height: 100%;
	/* サイト全体で統一ならリセットCSSの中に記述しておく */
	font-size: 0.9em;
	font-family: arial, sans-serif;
}
bodyのwidthの%指定は、親要素のHTMLに対する割合ですので、この様な考慮が必用です。
body以下のfont-sizeは上記に対する相対的な指定「rem」とすれば、サイト全体の文字の拡大や縮小の調整が楽。

ルートカラー指定

色の指定を行っておきます。

色を纏めて指定しておくで、サイト全体のカラー調整が楽になります。

:root {
--basic-text-color: rgb(0,0,30);
--bright-text-color: rgb(100,100,255);
--outline-text-color: white;
--underline-color: rgb(52,70,255);
--active-background-color: rgb(147,165,217);
--dark-background-color: rgb(70,95,171);
--basic-background-color: rgb(93,116,186);
--bright-background-color: rgb(201,211,242);
--clear-background-color: rgb(225,232,252);
--link-text-color: rgb(0,0,255);
--link-hover-background-color: rgb(0,0,255);
--link-hover-text-color: gb(255,255,255);
--outlined1-background-color: rgb(237,242,255);
--outlined2-background-color: rgb(168,183,227);
--outlined3-background-color: rgb(70,95,171);
--mosaic_container-color: white;
--menu-background0: rgb(93,116,186);
--menu-background1: rgb(168,183,227) 0%, rgb(147,165,217) 10%, rgb(70,95,171) 100%;
--top-img-background: 0deg, rgba(201,211,242, 0.95), rgba(201,211,242, 0.6) 30%;
}
上記の様に指定しておけば、
 color: var(--basic-text-color);
の様に色を指定できます。
この方法はIE不可ですが、もうIE対応は良いですよね。