1段組みの可変レイアウト

シンプルな1カラム

widthの指定をしなくても、ブロックレベルの要素は自動的に親要素の幅いっぱいまで広がり、ブラウザ幅にあわせて伸縮する。コンテンツの幅を固定する必要がない場合には、基本的に幅指定する必要はない。

最大幅を固定した1カラム

ブラウザ幅に応じてどこまでも広がるコンテンツは大型モニタ環境では可読性が落ちるため、テキストなどのコンテンツが収まる領域についてはボックス幅の最大値（max-width）を決めることが多くなる。

.container {
　max-width: 1000px;  /* 最大幅を固定 */
　margin-left: auto;
　margin-right: auto;
}

画像のフルードイメージ化

画像は明示的に幅が可変となるように設定する必要がある。width:100%でフルード化した場合は、画像自体の物理的な幅を超えて親要素の幅いっぱいまで広がる。max-width:100%とした場合は、画像自体の物理的な幅を最大値としてそれ以上は広がらず、自分より親要素の幅が狭くなった場合には親要素幅に合わせて縮小する。
画像のフルード化をする際にはheight:autoを明示しておかないと伸縮時に画像のアスペクト比（縦横比）がおかしくなってしまうため、必ずセットで指定する必要がある。

img {
  max-width: 100%;  /* 画像自身の物理サイズを最大値として伸縮 */
  height: auto;  /* アスペクト比の崩れを防止 */
}
inserted by FC2 system