Webサイトを制作しているときに、「ブラウザによって表示が違う」と感じたことはありませんか？
リセット CSSを利用していないのであれば各ブラウザのデフォルトCSSによって表示が変わってしまいます。
この記事では、「リセットCSS」について簡単に説明していきます。
最後まで読みリセットCSSの簡単なイメージを持てるようにしましょう。
目次
リセットCSSについて学ぼう
まずは、リセットCSSの概要について説明していきます。
リセットCSSとは
リセットCSSとは、webサイトを制作する際に、ブラウザ間で異なるデフォルトのスタイルを無効化するためのCSSになります。
ブラウザごとにデフォルトのスタイルが適用されている
実際にGoogle Chromeでも、見出しを表す「h1~h6タグ」や、リストを表す「ulタグ,olタグ」にもデフォルトのスタイルが適用されています。
実際のweb制作の現場では、こうしたブラウザに存在するデフォルトのスタイルを無効化して、表示方法を揃える作業をします。
リセットCSSの種類
一口にリセットCSSと言っても、リセットCSSには大きく分けて２種類あります。
「デフォルトのスタイルをほぼ完全に打ち消すタイプ」、「デフォルトのスタイルを統一するもの」の２つです。
次は、この２つのリセットCSSについても学んでいきましょう。
ほぼ完全に打ち消すリセットCSS
デフォルトのスタイルをほぼ完全に打ち消すタイプのものは、まっさらな状態からサイトのスタイルを当てることができます。
ほぼ完全に打ち消されているので、特にデフォルトのスタイルの仕様を気にすることなくスタイルを当てることができます。
有名なリセットCSSだと以下のものがあります。
デフォルトのスタイルを統一するリセットCSS
このタイプのリセットCSSの特徴として、ブラウザ間のスタイルをある程度整ったデフォルトのスタイルで統一することができます。
どのブラウザで見たとしても画像のような同じデフォルトのスタイルになります。
有名なリセットCSSだと以下のものがあります。
ここまでで、２種類のリセットCSSを紹介しました。
ひとまず、リセットCSSには「デフォルトのスタイルをほぼ完全に打ち消すタイプ」、「デフォルトのスタイルを程よく残すタイプ」の２つがあるということを覚えていれば大丈夫です。
リセットCSSの使い方
この章では、リセットCSSの使い方について説明していきます。
リセットCSSは自作するか公開されているものを使う
リセットCSSの使い方は大きく分けて２種類あります。
「自分でリセットCSSを作成するか」、「インターネットで公開されているリセットCSSを使うか」です。
皆さんが実際にwebサイトを制作される際は、後者がおすすめです。
有名で使いやすいリセットCSSが公開されているので、一旦はそちらを使うようにしましょう。
そして、よりリセットCSSの内容への理解を深めたい方は、公開されているリセットCSSを参考にしながら、自作してみることをおすすめします。
この記事の末尾に、ZeroPlusの教材で使用しているリセットCSSのコードを載せています。
参考までに、こちらのリセットCSSを使ってみてください。
リセット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は、style.cssより先に読み込むこと
以上のことを理解できていれば大丈夫です！
実際にリセット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;
}
