CSSの事ならなんでも

サイト枠組みの作り方

このページでは一般的なCSSのサンプルとして、2カラム、3カラムの2構造を解説付きで紹 介します。

■2カラム

* { margin:0; padding:0; }

#boxA { background:#ffc; }

#boxB { background:#fcc; }

#boxC { background:#ccf; }

#boxD { background:#cfc; }

body { text-align:center; }

#container { width:700px; margin-left:auto; margin-right:auto; text-align:left; }

#boxB { width:500px; float:left; }

#boxC { width:200px; float:left; }

#boxD { width:100%; clear:left; }

こちらの2カラムは全体の構造を700pxとしてセンタリングして、メインコンテンツを 挿入するboxBにマージン500px、メニューを挿入するboxBをマージン200と割り当てて います。またヘッダ、フッタにそれぞれboxA、boxDを割り当てています。


■3カラム

* { margin:0; padding:0; }

#boxA { background:#ffc; }

#boxB { background:#fcc; }

#boxC { background:#ccf; }

#boxD { background:#cfc; }

#boxE { background:#fcf; }

body { text-align:center; }

#container { width:800px; margin-left:auto; margin-right:auto; text-align:left; }

#wrapper { width:620px; float:left; }

#boxD { width:180px; float:left; }

#boxE { width:100%; clear:left; }

#boxB { width:440px; float:right; }

#boxC { width:180px; float:right; }

こちらの3カラム構造は800pxとしてセンタリングして、メインコンテンツとなる boxBをはさむように、左にboxC、右にboxDを設置しています。
こちらも2カラム時と同様にヘッダ、フッタを適用してあり、それぞれboxA、boxD となります。

より複雑な構造となると、自分自身で構成する必要が出てきますが、インターネット 上に有志がサンプルを提供してくれてますのでそれを模範にしてみてもいいかも知れ ません。

CSSレイアウトの長所・短所

メニュー部分の作り方

よくあるレイアウト崩れ