【コピペOK】リセットCSSとは？必要性を解説【最低限は必要です】

リセットCSSって何なの？本当に必要なのか気になる・・・。

このような方向けの記事です。

結論から言いますと、最低限のリセットCSSを設定した方がコーディングが楽になります。

本記事では、前半ではリセットCSSの必要性と定番のリセットCSSを解説していき、後半では僕の使用している自作のリセットCSSを配布していきます。

これからリセットCSSを使おうか迷っている方は参考にしてみてください。

リセットCSSの必要性を解説【定番のリセットCSS３選も紹介】

リセットCSSは僕は使う派です。
ですが、働いていた会社では使用していない方もいましたので必須ではない。

リセットCSSとは？

CSSってブラウザによってデフォルトでmarginやpaddingなどが設定されているんですよね。それが人によっては邪魔に感じる方が多いので、デフォルトで適用されているCSSを全て０にするのがリセットCSSの役目です。

リセットCSSの必要性

デザイナーに作って頂いたデザインデータを元にコーディングをする時などは、なるべくpxを正確にコーディングする必要があります。

こういう場合にリセットCSSを予め設定しておくと、予期せぬスタイル崩れを防ぐ事ができます。

※リセットCSS不要派の方は、スタイルシートのはじめに必要のないスタイルのみリセットしている場合が多いです。

定番のリセットCSS３選

沢山あるのですが、厳選して紹介します。
それぞれに特徴があります。

上記の３つが定番のリセットCSSです。各リンク先にコードが公開されています。

リセットCSSによってリセットされている範囲が違いますので、自分の好みに合わせてカスタマイズなどして使用するのがいいかもです。

個人的にオススメはdestyle.css

僕は１から全てスタイルを適用していきたい完璧主義タイプなので、destyle.cssが好きです。

デメリット：ファイルが重たいです

リセットCSSはファイルサイズが大きいです。

destyle.cssは7KBほどあり、気になる方は気になると思います。理由としては普段使わないタグなどにもリセットスタイルが当てられているのでサイズが重たくなっています。

なので、上記のリセットCSSを使用する場合は普段使用しないタグなどは削除して、なるべくファイルを軽くして使用するようにするといいです。

【コピペOK】軽量版リセットCSSを配布します【アレンジOKです】

僕が普段しているリセットCSSを配布します。
ファイルサイズも2KBほどなので軽量です。欲しい方はどうぞ。

reset.cssのコード

reset.cssファイルを作成して下記のコードをコピペしてください。

reset.css
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;
}
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;
    text-decoration: none;
}
ins {
    background-color:#fff;
    color:#000;
    text-decoration:none;
}
mark {
    background-color:#fff;
    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;
}
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}

使い方

htmlファイルに読み込むだけで使用できます。

HTMLファイル
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">

メインのスタイルシートよりも前に読み込みましょう。後に読み込んでしまうと、自分で作ったデザインがリセットされてしまいますので注意が必要です。

自分用にアレンジOKです

僕が使いやすいように、最小限のコードのみ書いておりますので不要なコードや足りないコードは足して頂いて大丈夫なので自由に使用してください。

それでは、ここまで。