L3.7.1 リセット CSS とは
ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセット CSS です。
リセット CSS は、ブラウザが持っているスタイルシートをリセット(クリア)するためのスタイルシートですがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセット CSS は存在しません。
以下にリセット CSS のサンプルを示しますのでコーディングスタイルに合わせて適時変更してください。
CSS
@charset "utf-8";
/* Reset CSS */
html {
font-size: 16px;
}
* {
box-sizing: border-box;
}
body,
h1,h2,h3,h4,h5,h6,
article,section,header,footer,nav,aside,
p,hr,
ul,ol,li,dl,dt,dd,
div,main,
a,em,strong,small,i,b,span
table,caption,tr,th,td,
pre,label,input,textarea,select,
button {
padding: 0;
margin: 0;
font-size: 100%;
color: #333;
font-weight: normal;
line-height: 1.6;
word-wrap: break-word;
}
address,em,i {
font-style: normal;
}
strong,th,b {
font-weight: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
width: 100%;
height: auto;
border: 0;
}
li {
list-style-type: none;
}
small {
font-size: 80%;
}
a:hover {
opacity: 0.6;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}