くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[レスポンシブ]レスポンシブWebデザイン②

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

 

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

 

 

f:id:pleasure10501:20150513170807p:plain①最初にするべきは、CSSのリセットです!

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

 

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

 

右:リセット後

 

 

 

 

②画像の幅の調整

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

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

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

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

  img { max-width: 100%; }

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

 

③文字関連の設定

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

[重要]この1行の高さ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;
}

 

 

広告を非表示にする