GLTMatrix

タグ：procss逆引きcss layout.css

　該当ＣＳＳ　　

layout.css

　該当プロパティー　　　

div#container {
  position: relative;
  width: 800px;  /* サイト全体の幅[W] */
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

参考事例

　サイトの幅を変える。　

方法
width: 800px; /* サイト全体の幅[W] */の値を変える。
pxだと固定、%だと、emだとエラスティックデザインが制作できる。

div#container {
  position: relative;
  width: 800px;  /* サイト全体の幅[W] */
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

　サイトの幅の最小と最大サイズを決めたい　

方法
mini-width（最小幅）max-width（最大幅）を指定する。

div#container {
  width: 80%;
  min-width: 800px;
  max-width: 80em;
}

　解説　

この部分だけを修正してもヘッダー・左右センターカラム・フッターとの統合性が取れなくなるのでデザインは崩れる。
div#containerとはProfessionalCSSの一番大きい外枠と考える。