［レスポンシブ］レスポンシブWebデザイン②

あらゆるデバイスに対して単一のWebページ（HTML）を使い、スクリーンサイズ（画面幅）を基準にCSSだけを切り替えてレイアウトを調整するのがレスポンシブWebデザイン。

次にCSSを書いていきます。レスポンシブWebデザインでは、CSSの記述効率とファイルサイズを圧縮するため、もっとも小さいスクリーンサイズ向けのスタイルから、徐々に大きいスクリーンサイズのスタイルへと記述していきます（mobile first）。

①最初にするべきは、CSSのリセットです！

ちなみに、ASCIIに書いてあるオールリセット （*{ margin:0; padding: 0;}）では、リセットできませんでした。

a要素、ul要素、img要素も全てリセットします。

右：リセット後

②画像の幅の調整

通常のWebページはブラウザの幅より画像が大きい場合、画像がはみ出してしまい横スクロールバーが現れます。

レスポンシブWebデザインでは、ウィンドウ幅に応じて画像や（場合によっては）文字サイズが変わるのが特徴です。

これを実現するのが「フルードイメージ」という技術です。
ウィンドウサイズより大きい画像でも、ウィンドウサイズ（または親要素の幅）に応じて、縦横比を保持したまま自動的に画像が拡大・縮小します。

img要素に対して、下の設定をします。

　　img { max-width: 100%; }

※フルードイメージはIE7以下には非対応

③文字関連の設定

フォントサイズは16px、line-heightを1.5にすることで、１行の高さが24pxになるようにします。
フォントサイズはデフォルトで16pxなので設定の必要はありません。

［重要］この１行の高さ24pxが、このページの要素を配置する基準になります

④見出しの設定

見出しh1〜h4のフォントサイズと行の高さの設定をします。

「見出し要素のサイズや行の高さは適当に決めるのではなく、前に決めた1行の高さ（24px）を基準にして一定の間隔で要素が配置されるように考えます。要素同士の距離に規則性を持たせることで、読みやすく、バランスの取れたデザインができます。」
（引用元：ASCII）

h1 {
  font-size: 48px;
    line-height:1;
}
h2 {
  font-size: 36px;
    line-height:1.3333;
}
h3 {
  font-size: 24px;
    line-height:1;
}
h4 {
  font-size: 16px;
    line-height:1.5;
}
h1, h2, h3, h4 {
  margin-bottom: 24px;
}