読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

1か月授業内容まとめ - 書体指定とリセットCSS

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

  • 日本語の書体指定で表現したい
  • 日本語の場合、フォントメーカーの制約から自由な選択は出来ません
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;
Windowsでも綺麗な明朝体を表示する
  • HG明朝は13pxからアンチエイリアスがかかる(MicrosoftOfficeをインストールするとついてくるフォント)
  • 実際には、見出しのような大きいサイズにむいています
h1 {
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "MS P明朝",
    "MS 明朝",
    serif;
  font-weight: bold;
}

リセット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:
    "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」
つまり、ボックスモデルの概念を理解することが必須です。