リセットCSS

そもそもリセットCSSとは、標準的に予め設定されているものをとっぱらって、制作する人が０からCSSを設定するために一旦まっさらな状態に戻すことです。これにより、制作者が、レイアウトを0から設定していくことが出来るため、自分の思い通りにレイアウトしていきやすいメリットがあります。

例えばですが、仮にリセットCSSを行わずにレイアウトを組もうとした時、幅高さをキッチリ指定したタグに、標準的に初めからついているマージンがあるせいで要素がはみ出してレイアウトが崩れたり、その都度そのマージンがどのくらいついているか調べて、そのタグにmargin:0;を指定してあげたりと、非常にめんどくさいです。

ですが、一旦リセットCSSをしていれば、マージンもパディングも０からのスタートでレイアウトしていくことが出来るので、想定外のサイズになったりしないですよね？こういった点からリセットCSSは、レイアウトする際に非常に重宝する考え方と言っていいでしょう。

リセットCSSにやり方は決まっていません。色々調べるとわかりますが、各々やり方やリセットする内容が違いますので、はじめは自分が使うタグからリセットしていくといいでしょう。

リセットCSSについてこちらにも詳しく載っています。

リセットCSSとは？ | 独学でWebデザインまとめんばーず｜Webクリオンライン

では、実際にどんな感じか私が使っているリセットCSSを見ていきましょう。

以下コード

@charset "utf-8";

/* resetCSS@zin */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
}
img, input {
vertical-align: bottom;
}
article, aside, dialog, figure, footer, header,
main, menu, nav, section {

display: block;

}

自分の使用するブロックレベルのタグのリセット

htmlにも、bodyにも、ul,olといったリストにもmargin,paddingがついていますので、それらを0にしています。さらに、line-heightといった、行間も同様に1.0として、上下に発生する隙間をなくしています。そして、フォントファミリーで使用するフォントの最適化を行っています。フォントの最適化に関しては、以下の記事を参考にしています。

web-design.hatenadiary.jp

ul,olのlist-style:none

list-styleをnoneにすることで、黒点やolの数字を消します。

imgにborder:0;を指定する理由

これもレイアウト上ボーダーがつく可能性があるためです。たとえば、アンカータグで囲まれると青いボーダーが入り、img自体の幅がそのボーダー分伸びる事になります。なので、0にしておこうということです。

imgにvertical-align:bottomを指定する理由

gとかjとかを表示させるために、下側がそもそもインラインレベルのものは空いています。画像も特殊なインラインレベルのタグ（ただし、例外的に幅や高さを指定できる）になりますので、vertical-alignがベースラインに合わさってしまい、ボトムとベースラインの隙間があいたまま画像が配置されてしまいます。なので、その隙間を埋めるために画像のvertical-alignをbottomに指定しています。inputも同様です。グリッドデザインのような配置をする時に結構ハマるポイントです。画像の下になんか隙間ができちゃうんだよねーという時はvertical-alignを確認してみるといいかもしれません。

こちらにも分かりやすく解説されています。

画像の下にできる隙間 - Webtech Walker