🔰はじめての方へ

【リセットCSS】概要とNormalize.cssの使い方

CSS
記事内に広告が含まれています。
スポンサーリンク

リセットCSSとは

「Google Chrome」「Safari」「Microsoft Edge」など、それぞれ異なるブラウザでもすべて同じように、サイトが表示されるためのCSSのことです。

リセットCSSを使用するのは一般的になっています。

ブラウザは、独自のCSS(デフォルトのCSS)を持っています。

ChromeやSafariなどの各ブラウザで異なるCSSを持っているので、自分で書いたCSSが、それぞれのブラウザごとで意図しない表示になることがあります。

リセットCSSは、ブラウザが持っているCSSを丸ごとリセットするもので、そのためその分のCSSは自分で記述します。

例えば、h1 だと文字サイズが大きくなるのがデフォルトのCSS
→ すべてリセットすると、h1 のサイズから指定する必要がある など

それでは作業が増えてしまうことが問題であり、
今の主流派は、ブラウザが持っている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>

CSSのコメントアウトは「/*」○○「*/」と囲む

コメント