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

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

リセットCSSと書体指定

初学者のCSS

CSSを理解しようとして、いまネット上にあるプロの解釈を読むと、頭が混乱すると思います。
日本語ですら、まともに作文を書くことができるようになるまで何年もかかりました。まだ勉強を初めて1週間です
原理原則、現在の傾向といろいろあるWebの技術ですが、初めてなのだからプロに笑われるようなことでも、ひとつひとつ丁寧に記述し理解して行きましょう。
慌てる必要はありません。シンプルにいきましょう。



《サンプル》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リセットCSSを記述する前に</title>
<style>
h1,p,ul {
  color: #FFF;
}
h1 {
  background-color: #95CCE2;
}
p {
  background-color: #EFB15F;
}
li {
  background-color: #98DC77;
}
</style>
</head>
<body>
<h1>ページのテーマ</h1>
<p>ここに本文が入る</p>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</body>
</html>


《プレビュー》

  • 各要素間が、指定していないにもかかわらず空いているのがわかります
  • リストも2文字分インデントされています


これは、ブラウザが初期値としてもっている空きの値を利用してプレビューしているからです


《空きをなくす記述》

h1,p,ul {
  color: #FFF;
  margin: 0;
  padding: 0;
}



この状態から、自分の空けたい値を指定することにより、思い通りのレイアウトにするということが「リセットCSS」の目的です。


《ブラウザとの空きもなくす記述》

body,h1,p,ul {
  color: #FFF;
  margin: 0;
  padding: 0;
}


これからページを構築していく段階で、「初期値:0」であることにより、指定した値が反映されていることが確認しやすくなります。

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

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

  • 日本語の書体指定で表現したい
  • 日本語の場合、フォントメーカーの制約から自由な選択は出来ません
2015年9月現在の設定方法
  • iOSにはProNしか入っていません(初期設定は、W3)
  • ヒラギノ角ゴの英数字が読みにくいという考え方もありますが、Macの日本語の初期設定のため、欧文書体を指定することによる違和感がある場合は、「Hiragino Kaku Gothic ProN」の前には欧文書体を入れないようにします
  • 同様にWindowsは英数字もメイリオのままにしておきたいので、メイリオの前にArialやLucida Sansを入れないようにします
  • 「MS Pゴシック」は指定しなくても必要なときには出るので記述しない
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;
}