ボックスモデルと適切なフォントファミリー

ボックスモデルの解説の代表例

ボックスを構成する要素



ボックス幅は、コンテント領域幅 ＋ パディング ＋ ボーダーの太さ ＋ マージンです。
コンテント領域がボックス幅ではないので、注意が必要です。


※コンテント：widthとheightプロパティで規定される長方形


パディング：padding

ボーダー辺に対し、コンテントの読みやすさを確保するために空ける空間を指します。
「pad」つまり肩パッドのように、内容の嵩を増して大きいと思わせる設定です。


「padding-top」「padding-right」「padding-bottom」「padding-left」の順に記述します。
これをまとめて記述する場合は、ショートハンドプロパティ「padding」を使用します。


※「−」値は指定できません。


ボーダー：border

本来は「border-width」「border-color」「border-style」プロパティですが、ショートハンドプロパティ「border」か、「border-top」など個別に指定します。
「幅・色・スタイル」の順序は自由です。


マージン：margin

関連する機能を視覚的にグループ化し、別の機能ブロックと区別しやすくします。
ブロックとブロックの間の空間を広げる設定です。


※「auto」が指定できる。
※「−値」を指定できる。


  • 図の見栄えとして「文字要素」を最上位にしていますが、上の例に見るように「border」が最上位と考えます
  • 記述の順序は「外側から」と「重なり順の上から」があります
  • 一般的にレイヤー構図を意識して記述することが少ないからか「外側から」記述することが多いようです
  • 記述順序例

16進数で色を決める

ヘックスカラー（HEX COLOR）
  • 16進数（0123456789ABCDEF）
  • #000000（黒）
  • #ffffff（白）
  • Hue（色相）・Brightness（明度） ・Saturation（彩度）





CSSで色を設定する

16進数で設定する
  • 16進数：hexadecimal number
  • #：number
  • 0123456789ABCDEF（16個）
  • RGBを2個ずつの数字を割り振る
  • 2個の左側の数字が明度(Brightness)、右側の数字が彩度(Saturation)


【RGB】
【8ビットカラー】



　#FF0000　または　#F00

10進数の数値で設定する


　rgb(255,0,0)　または　rgb(100%,0%,0%)


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

  • 日本語の場合、フォントメーカーの制約から自由な選択は出来ません
2013年７月現在の設定方法
  • iOSにはProNしか入っていません（初期設定は、W3）
  • ヒラギノ角ゴの英数字が読みにくいという考え方もありますが、Macの日本語の初期設定のため、欧文書体を指定することによる違和感がある場合は、「Hiragino Kaku Gothic ProN」の前には欧文書体を入れないようにします
  • 同様にWindowsは英数字もメイリオのままにしておきたいので、メイリオの前にArialやLucida Sansを入れないようにします
  • 「ＭＳ Ｐゴシック」は指定しなくても必要なときには表示されるので記述しない
  • Mac版Officeは、MicrosoftというフォルダーにMeiryoが格納されるため表示フォントとしては、そのままでは利用できない（Mac版Meiryoは、Office内でのみ利用される）
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",
    "ＭＳ Ｐ明朝",
    "ＭＳ 明朝",
    serif;
  font-weight: bold;
}

見やすい表記方法


　セレクタ　 {
　　　プロパティ：値
　　　プロパティ：値
　　　プロパティ：値
　}


　/* 〜この範囲にコメント〜 */

スタイルの優先順位


プロパティ
  • color
  • font-size
  • line-height
  • background-color

文字サイズ




0.875em は「14px」相当になります。


line-height


「line-height」を設定して、背景色を文字の上下に見せるために使われるのは、このためです。
ただし日本語の場合、デバイスフォントが英語であることにより、少し違和感があります。


日本語の場合、「0.5em＋ディセンダの空き」により下が空きすぎに見えます。
あえて上下の padding を別々に設定したほうが自然に見えます。