CSSレイアウトサンプル
# CSSレイアウトサンプル CSSでHTMLをレイアウトする為の最低限の記述をしたサンプルです。 コピーアンドペーストをせず理解を深めてください。 > ・2カラムレイアウト(固定) > ・3カラムレイアウト(固定) > ・2カラムレイアウト(可変) ## 2カラムレイアウト(固定)  ### HTML ``` 2カラムレイアウト ヘッダー サイドバー メインコンテンツ フッター ``` ### CSS ``` /*ヘッダー*/ header{ background-color: #3370e0; /*背景の色を設定*/ width: 900px; /*幅を設定*/ height: 100px; /*高を設定*/ margin: 0 auto; /*センタリング*/ } /*コンテナ*/ #container{ width: 900px; /*幅を設定*/ margin: 0 auto; /*センタリング*/ } /*サイドバー*/ #container #SideBar{ width: 300px; /*幅を設定*/ float: left; /*フロート レフト*/ } /*コンテンツ*/ #container #content{ width: 600px; /*幅を設定*/ float: left; /*フロート レフト*/ } /*フッター*/ footer{ background-color: #3370e0; /*背景の色を設定*/ width: 900px; /*幅を設定*/ height: 50px; ...