各ブラウザ（IE、FireFox、Chrome、safariなど）は、要素毎にデフォルトでスタイルを独自にもっており、ブラウザーによって表示が異なる場合があります。それらをリセットするスタイルシートを一般的に「リセットCSS」と呼びます。
元々持っているブラウザーのデフォルトスタイルを有効に使っていこうという考え方もありますが、ブラウザー間の表示誤差(例えば、ブラウザ毎に文字サイズが変わったり、余白の広さが変わったりなど)に悩まされることも多々あり、それを解消するために一度まっさらな状態にリセットしてから CSS を書き始める、という考え方です。
リセットCSSの記述
リセットCSSの記述方法は色々あり、絶対的な物があるわけでありません。ネット上から既存のリセットCSSをダウンロードして、使用する場合もありますが、まずは1個づつ意味をしっかりと理解し、慣れてきたら徐々に複雑な物を使用して行きましょう。
/* reset */ HTMLで使用しているセレクター名 { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
ブラウザーのデフォルトスタイルではol、ul にそれぞれ黒丸と番号が付いてしまいます。
それらを消す場合は以下の記述をリセットCSSに追加しましょう。
ul, ol { list-style: none; /* マーカーを消す */ }
さらに以下の記述も追加しましょう。
a { text-decoration: none; /* 下線を消す */ } img { border: 0;/* リンクが設定されたimgにつくborderを消す */ } img, input { vertical-align: bottom; }
リセットCSSの例
/* reset */ html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, table, th, td { 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; }
font-familyの指定
font-familyとは表示される文字フォントの指定です。
基本的には表示させたいフォント（綺麗なフォント）から順に指定してきます。
注意が必要なのがwindowsで、windowsで使われる標準フォントはバージョンによって違うので、それを加味したフォント指定を行いましょう。
游書体
游書体はWindows 8.1以降のWindowsおよび、OS X Mavericks以降のMacにバンドルされている、比較的新しいフォントです。
ただ、実際に指定してみると、Macでは綺麗なのに、Windowsでは文字がかすれたように見えて非常に読みづらくなってしまいます。
Macに搭載されている游ゴシックは「ミディアム」「ボールド」なのに対し、Windowsに搭載されているのは「細字」「標準」「中」「太字」（「中」は、Windows10から搭載）。
そのため、font-familyで「游ゴシック」と指定すると、Macでは「ミディアム」で表示されて綺麗なのに、Windowsでは「細字」で表示されるためにかすれてしまいます。
なので敢えて、「font-weight: 500;」の指定が必要になります。
ゴシック体での指定
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 500;
