reset.cssの使い方・書く順番
reset.cssとはブラウザに付属しているデフォルトのスタイルを打ち消す（リセットする）CSSのことです。
すべてのブラウザには、表示するWebページのすべてに適用され「user agent stylesheet（以下、UA stylesheet）」と呼ばれるデフォルトのスタイルが付属しています。
reset.cssはブラウザによるスタイルの差異をなくすことが目的で、通常はスタイルの一番上に記述し、他のスタイルの前にページに適用されるスタイルです。
また、似たものとしてnormalize.cssがあります。
すべてのスタイルに同じビジュアルを与えますが、normalize.cssでは多くの有用なUA stylesheetのスタイルを維持するものです。
reset.cssの使い方・書く順番
使い方は、通常のCSSと同じでCSSフォルダに入れます。
ただし、ブラウザに付属しているデフォルトのスタイルを打ち消すために使用するので、reset.cssを一番上に記述します。
CSSリセットがreset.css、通常のCSSがstyle.cssの場合、下記の順番で記述します。
<head>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>私が使っているreset.css
コピペＯＫです。
各々、使いやすいようにカスタマイズしてください。
@charset "utf-8";
/*==========================================================================
# reset - ブラウザの差異や不要なスタイルを無くすためのスタイル
========================================================================== */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, small, button, time, figure {
border: 0;
font: inherit;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
padding: 0;
margin: 0;
}
li, dd {
list-style-type: none;
}
header, footer, nav, section, article, aside, figure, figcaption {
display: block;
}
img {
border: none;
vertical-align: bottom;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
cursor: pointer;
opacity: 0.7;
}