ここに落書きするメモは、下記のリセットが行われている事が前提です。
余白や文字の設定を全てリセット
ブラウザのuser agent stylesheet
これがスタイルの既定値です。厄介なのは、ブラウザによって既定値が異なることです。
そこで余白や文字の設定を全てリセットしておきます。事例はいっぱいありますが大差ありません。
ちょっと付け足し
引っ張ってきたリセットCSSに追記していること
bodyのwidthの%指定は、親要素のHTMLに対する割合ですので、この様な考慮が必用です。
html {
/* トップのhtmlにwidth指定を行っておかないと、子要素のbodyのwidth指定で%指定が効きません。 */
width: 100%;
height: 100%;
/* サイト全体で統一ならリセットCSSの中に記述しておく */
font-size: 0.9em;
font-family: arial, sans-serif;
}
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対応は良いですよね。