CSSレイアウトの考え方

Webデザインの勉強

CSS記載の順番

CSSカスタマイズは、CSSグループ化の順にする

大きい面積から決め、その後に修飾していく

  1. reset
  2. body
  3. container
  4. header
  5. wrapper
  6. content
  7. sidebar(nav含む)
  8. footer
  9. h1
  10. p
  11. h2, h3, h4
  12. ul, ol, dl
  13. li
  14. table
  15. address



リセットCSSの書き方

リセットCSSには、海外からの流れがある

「*（ユニバーサルセレクタ）」を使ってブラウザのデフォルトスタイルをリセット
　　→ブラウザのデフォルト表示の方がフォーム周りは使いやすいので、今では使わない
海外では「YUI」の記述手法が多く見られる
　　→そっくりまねるのではなく、必然性のある書き方をする

現在の書き方

以前と違うのは、body側に書いていたフォント指定をリセットCSSに書く

　/* リセットスタイル */
　html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
　address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
　　　margin: 0;
　　　padding: 0;
　　　line-height: 1.0;
　　　font-family:
　　　　"ヒラギノ角ゴ Pro W3",
　　　　"Hiragino Kaku Gothic Pro",
　　　　"Hiragino Kaku Gothic Pro W3",
　　　　"メイリオ",
　　　　Meiryo,
　　　　Osaka,
　　　　"ＭＳ Ｐゴシック",
　　　　"MS PGothic",
　　　　sans-serif;
　}
　table {
　　　border-collapse: collapse;
　　　border-spacing: 0;
　}
　ul li, ol li {
　　　list-style-type: none; /* マーカーを消す */
　}
　a {
　　　text-decoration: none; /* 下線を消す */
　}
　img {
　　　border: 0;
　}
　img, input {
　　　vertical-align: bottom;
　}

※フォント記載は、上記の順番を守る
（ＭＳ Ｐゴシックが上にくると、Windows7などでは表示が汚くなる）

マージンはbottomで空きを作る

要素間の上下マージンの相殺
  • どちらも正の値の場合、大きいほう
  • どちらも負の値の場合、小さいほう
  • 一方が正の値、他方が負の値の場合、足し引きした値を設定

混乱を避けるため、基本は下の空きをつくることでレイアウトしていく

記述順序

（1）color、font-family、font-size、font-style、font-weight、line-height（文字指定）
（2）margin、padding（空間指定）
（3）width、height（コンテントが入るエリア）
（4）background-color（背景色）
（5）background-image（背景画像）
（6）border（枠線）