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

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

ボックスを構成する要素



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


※コンテント: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年7月現在の設定方法
  • iOSにはProNしか入っていません(初期設定は、W3)
  • ヒラギノ角ゴの英数字が読みにくいという考え方もありますが、Macの日本語の初期設定のため、欧文書体を指定することによる違和感がある場合は、「Hiragino Kaku Gothic ProN」の前には欧文書体を入れないようにします
  • 同様にWindowsは英数字もメイリオのままにしておきたいので、メイリオの前にArialやLucida Sansを入れないようにします
  • 「MS Pゴシック」は指定しなくても必要なときには表示されるので記述しない
  • 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",
    "MS P明朝",
    "MS 明朝",
    serif;
  font-weight: bold;
}

見やすい表記方法


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


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

スタイルの優先順位


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

文字サイズ




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


line-height


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


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