演習（1）考え方

カンプ画像の解析

  • 実寸のカンプがある場合、そこから算出します
  • カンプ画像が実寸ではない場合（今回のブログ画像）


基準を決める

  • 本文の大きさを決める
CSSを適用しない場合の幅を算出





ビルボード画像までの空きを算出

  • 両端で４文字分の空き（16px ✕ 4 ＝ 64px　＋文字間）は、約70px




これでビルボードの幅が算出されました。

670px ＋ 70px ＝ 740px


環境によるワードラップの誤差（WindowsとMacの誤差は、約1.5文字分）も念頭にいれて、ビルボードの画像は「760px（暫定）」とします。


#containerの両端それぞれの空きは、約1.5文字分とします。
結果は、24pxですが設定しにくい数字なので「20px」に設定します。
トータルで、#container 幅は「800px」と算出できました。

文字の大きさの基準を決める
  • 本文 ＜ h4 ＜ h3 ＜ h2 ＜ h1
  • h要素は、大きさではなく「優先順位」を表すためにあるのですが、記述スタート時には大きな視覚的流れを作るために決めておきます
body {
  font-size: 16px;  //PC用の基準サイズ
}


指定をしない場合は、ブラウザが指定する基準の大きさになります。（大・中・小などの指定）

可変を前提とした場合：

  • em、%を指定すると親要素の文字サイズを基準にした子要素のサイズになり思ったような大きさになりません

解決法

  1. 子セレクタで設定する（nav > li）
  2. 単位を「rem」にする（root+em）すべての文字サイズがroot要素を基準にem表示されます


基準をはっきり明示することにより、その後の指定に迷いがなくなります。
この時点では（2015年06月）「rem」を設定します。
「rem」に対応出来ないブラウザ用に、「px」も同時に指定します。

  • 「font-size: 62.5%」が、10px相当になるので、それを基準とします
/* font-size */
html { font-size: 62.5%; }  /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */

カンプから予測できる文字サイズは、

/* font-size */
html { font-size: 62.5%; }  /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
h1 { font-size: 32px; font-size: 3.2rem; }
h2 { font-size: 24px; font-size: 2.4rem; }
h3 { font-size: 20px; font-size: 2.0rem; }
h4 { font-size: 18px; font-size: 1.8rem; }
p { font-size: 16px; font-size: 1.6rem; }


もちろん、全体のバランスの中で微調整していきます。


この基準を元に、CSS全体を記述していきます。