Webサイトを制作しているときに、「ブラウザによって表示が違う」と感じたことはありませんか？
リセットCSSを利用していないのであれば各ブラウザのデフォルトCSSによって表示が変わってしまいます。
この記事では、「リセットCSS」について簡単に説明していきます。
- リセットCSSとは何か
- リセットCSSの使い方
リセットCSSについて学ぼう
まずは、リセットCSSの概要について説明していきます。
リセットCSSとは
リセットCSSとは、webサイトを制作する際に、Webブラウザごとで異なっているデフォルト（初期設定）のスタイルを無効化するためのCSSになります。
ブラウザごとにデフォルトのスタイルが適用されている
実際にGoogle Chromeでも、見出しを表す「h1~h6タグ」や、リストを表す「ulタグ,olタグ」にもデフォルトのスタイルが適用されています。
例えば、リセットCSSを使用しない場合、h1タグを使用すると、初めから大きな太字のフォントで表示されたりしてしまいます。
実際のweb制作の現場では、こうしたブラウザに存在するデフォルトのスタイルを無効化して、表示方法を揃える作業をします。
リセットCSSの種類
一口にリセットCSSと言っても、リセットCSSには大きく分けて２種類あります。
「デフォルトのスタイルをほぼ完全に打ち消すタイプ」、「デフォルトのスタイルを統一するもの」の２つです。
次は、この２つのリセットCSSの種類についても学んでいきましょう。
ほぼ完全に打ち消すリセットCSS
デフォルトのスタイルをほぼ完全に打ち消すタイプのものは、まっさらな状態からサイトのスタイルを当てることができます。
ほぼ完全に打ち消されているので、特にデフォルトのスタイルの仕様を気にすることなくスタイルを当てることができます。
有名なリセットCSSだと以下のものがあります。
デフォルトのスタイルを統一するリセットCSS
このタイプのリセットCSSの特徴として、ブラウザ間のスタイルをある程度整ったデフォルトのスタイルで統一することができます。
どのブラウザで見たとしても画像のような同じデフォルトのスタイルになります。
有名なリセットCSSだと以下のものがあります。
ここまでで、２種類のリセットCSSを紹介しました。
ひとまず、リセットCSSには「デフォルトのスタイルをほぼ完全に打ち消すタイプ」、「デフォルトのスタイルを程よく残して統一するタイプ」の２つがあるということを覚えていれば大丈夫です。
リセットCSSの使い方
次に、リセットCSSの使い方について説明していきます。
リセットCSSはどう用意するか
リセットCSSは自分で作ることも可能ですが、まずはできているものを使うことをおすすめします。
基本的に型を使い回すものなので、特に中身のコードを覚える必要はありません。
こちらでは、ZeroPlusの教材で使用しているリセットCSSのコードを載せています。
ZeroPlusの教材で使用しているリセットCSSは、デフォルトのスタイルをほぼ完全に打ち消すタイプのものになっています。
ぜひこのZeroPlusのリセットCSSをコピーして、ご自身で制作する際にご利用ください。
/* ------------------------------ */
/* リセットCSS */
/* ------------------------------ */
html {
color: #000;
background: #fff;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
fieldset,
img {
border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
q:before,
q:after {
content: '';
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input,
textarea,
select,
button {
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
font-size: 100%;
border-radius: 0;
border: none;
appearance: none;
-webkit-appearance: none;
background-color: inherit;
}
input,
textarea,
select {
font-size: 16px;
}
textarea {
resize: vertical;
display: block;
}
button {
padding: 0;
cursor: pointer;
}
legend {
color: #000;
}
main {
display: block;
}
a {
text-decoration: none;
color: inherit;
}
img {
width: 100%;
height: auto;
vertical-align: bottom;
}
svg {
display: block;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}リセットCSSは先に読み込む
リセットCSSは読み込む順番に注意が必要です。
リセットCSSのファイルの読み込みは、必ずサイト独自に用意する「style.css」よりも前に記述します。
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />プログラムは上から下に読み込まれていきます。
リセットCSSを後から読み込んでしまうと、せっかく作ったサイト用のスタイルが打ち消されてしまいます。
そのため、「リセットCSS」→「style.css」この順番は必ず守るようにしてCSSファイルを読み込んでください。
リセットCSSのコードを確認してみよう
ここまでで、リセットCSSについて説明してきました。
記事の内容として、以下の内容が押さえられていれば次の記事に進んで大丈夫です。
- ブラウザ間のデフォルトのスタイルを打ち消すためにリセットCSSがあること
- リセットCSSは2種類あること
- リセットCSSは、style.cssより先に読み込むこと
以上のことを理解できていれば大丈夫です！
実際にリセットCSSの中身のコードを確認して、どんなスタイルを打ち消しているのか見てみてください！
