Lancersで現役エンジニアに相談してみよう!

【2020年】リセットCSSのおすすめと基本的な使い方まとめ

CSSの勉強・コーディングをしていたら、リセットCSSとかいう意味わからん単語が出てきた…

↑↑この記事では、こんな疑問に答えます。

リセットCSSとは?

リセットCSSとは、「初期設定されているCSSをリセットするCSS」のことを指します。

これだけだと、

いや、意味わからんし

となると思いますが、もう少し我慢してください。

実は、私たちが普段使っている「WEBブラウザ」には最初から少しだけCSSが設定されており、何も考えずにコードを書くと予期せぬ余白の原因になるんです。

あ、だからヘッダーや見出しタグの上下に勝手に余白ができるのか!

つまり、リセットCSSとは「WEBブラウザに初期設定されているCSSをリセットするCSS」ということですね。

リセットCSSの使い方

リセットCSSの使い方・設定方法を紹介します。

①リセットCSS専用のCSSファイルを作る

「index.html」と同じフォルダ内にリセットCSS用のCSSファイルを作ります。

名前はなんでも良いですが、わかりやすいものにしましょう。

②HTMLのhead内で読み込ませる

<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>リセットCSSの設定方法</title>
<!-- ここでリセットCSSのページを読み込ませる -->
<link rel="stylesheet" href="reset.css">
<!-- ここでリセットCSSのページを読み込ませる -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>

</body>
</html>

HTMLのhead部分に、先ほど作成したCSSファイルを読み込ませる記述をします。

上のソースコードでいうところの、コメントアウトで挟んだ部分ですね。

※CSSは上から順番に読み込むため、必ず通常のCSSファイルよりも上の場所に記述してください。

③reset.cssの中にコードを書く

あとは先ほど作成したreset.cssの中に、ブラウザのCSSを消すためのコード(リセットCSS)を書いていけばOKです。

自分でリセットCSSを作成する猛者もいますが、ほとんどの人はそんな猛者たちが公開してくれているコードをそのままコピペして使っています。

オープンソースのコードなので、著作権は気にしなくていいです。

その中でも、日本で人気&僕も使っているおすすめなリセットCSSを紹介します。

おすすめのリセットCSS

ブラウザに表示される意図しない余白を全てリセットしてくれます。

完全にゼロの状態からコードを書くことができ、非常に使いやすいことで有名です。

デメリットは、marginやpaddingの数値は全て自分で設定しないといけないため、コードの記述量が多くなる点。

慣れてきたらカスタマイズもしやすいので、初心者ならこれで間違いありません。

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

「*」ではなくリセットCSSを使う理由

実は、リセットCSSを使わなくても下記のコードを使えばWEBブラウザの余白を消すことは可能です。

*{
  margin: 0;
  padding: 0;
}

この「*」は、「body」内の全ての要素を含むという意味で使います。

イメージとしては「全選択」です。

上記のコードでは、ページ内の全ての「margin/padding」を0に上書きして余白を消しています。

「*」は、正式には「全称セレクタ」と呼ばれています。

ただ、この方法は「使わない要素に対しても全てリセットしてしまう」ため、ブラウザの読み込みが遅くなってしまうという致命的な欠点があります。

一昔前は「*」を使っていたそうですが、現在はリセットCSSによる手法が一般的です。