書体指定とリセットCSS - web-0127のブログ

適切なフォントファミリー

日本語の書体指定で表現したい
日本語の場合、フォントメーカーの制約から自由な選択は出来ません

2014年12月現在の設定方法

iOSにはProNしか入っていません（初期設定は、W3）
ヒラギノ角ゴの英数字が読みにくいという考え方もありますが、Macの日本語の初期設定のため、欧文書体を指定することによる違和感がある場合は、「Hiragino Kaku Gothic ProN」の前には欧文書体を入れないようにします
同様にWindowsは英数字もメイリオのままにしておきたいので、メイリオの前にArialやLucida Sansを入れないようにします
「ＭＳＰゴシック」は指定しなくても必要なときには出るので記述しない

font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;

もし、Windowsで英数字は「Verdana」、Macで英数字は「Lucida Grande」にしたい場合は、

font-family:
    "Lucida Grande",
    "Hiragino Kaku Gothic ProN",
    Verdana,
    Meiryo, 
    sans-serif;

リセットCSS

リセットする意味を理解する必要がありますが、初学者にとってCSSの全体像をつかめないと理解しにくいのも「リセットCSS」です
一度に「こう記述するものだ」とするのも間違いではありませんが、あわてず少しずつ理解して行きましょう

@charset "UTF-8";

/* reset */
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:
    "Lucida Grande",
    "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;
}

リセットCSSは、Web歴史的な背景を背負っているため、仕事のなかでも「ベター」な選択があるだけで、絶対的なルールではありません
将来的には「Normalize.css」という選択肢もありますが、初学者の選択肢ではありません
授業内では、「リセットCSS」の根拠を理解する必要があるため、単純な記述から初めて徐々に複雑にしていきます

《過去のレイアウトのためのCSS》

@charset "UTF-8";

/* reset */
* {
  margin: 0;
  padding: 0;
}

《過去のレイアウトのためのCSSを修正》

@charset "UTF-8";

/* reset */
ここに指定した要素名を記述 {
  margin: 0;
  padding: 0;

この記述の意味を理解するためには、
「margin」「padding」「background-color」
つまり、ボックスモデルの概念を理解することが必須です。