リセットCSSとは
「Google Chrome」「Safari」「Microsoft Edge」など、それぞれ異なるブラウザでもすべて同じように、サイトが表示されるためのCSSのことです。
リセットCSSを使用するのは一般的になっています。
ブラウザは、独自のCSS(デフォルトのCSS)を持っています。
ChromeやSafariなどの各ブラウザで異なるCSSを持っているので、自分で書いたCSSが、それぞれのブラウザごとで意図しない表示になることがあります。
リセットCSSは、ブラウザが持っているCSSを丸ごとリセットするもので、そのためその分のCSSは自分で記述します。
それでは作業が増えてしまうことが問題であり、
今の主流派は、ブラウザが持っているCSSはできるだけ残しつつ、必要なところだけリセットする方法「normalize.css」が使われています。
使い方
※ 自作で作ることも可能ですが、ネットで拾ってきたものをコピペで使うことができます。
① ファイルのダウンロード
Normalize.css: Make browsers render all elements more consistently.
② コードが出てくるので、コピペする
③ テキストエディタにペーストして、CSSファイルを名前を付けて保存します。
保存場所はルートディレクトリ(一番上の階層)のcssフォルダに保存します。
④ 自作のCSSの前にコードを記述していきます。
<head>
<link rel="stylesheet" href="/reset.css">/* リセットCSS */
<link rel="stylesheet" href="/style.css">/* 自作CSS */
</head>
コメント