CSSレイアウトサンプル

# CSSレイアウトサンプル
CSSでHTMLをレイアウトする為の最低限の記述をしたサンプルです。
コピーアンドペーストをせず理解を深めてください。

>　・2カラムレイアウト(固定)  
> ・3カラムレイアウト(固定)  
> ・2カラムレイアウト(可変)

## 2カラムレイアウト(固定)
![サンプル画像](https://i.imgur.com/yEPd9BO.png)
### HTML
```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>2カラムレイアウト</title>
</head>
<body>
  <header>
    ヘッダー
  </header>

<div id="SideBar">
      サイドバー
    </div>

<div id="content">
      メインコンテンツ
    </div>

</div>

<footer>
    フッター
  </footer>
</body>
</html>
```
### 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;                 /*高さを設定*/
  margin: 0 auto;               /*センタリング*/
  clear: left;                  /*フロート クリア*/
}
```
|箇所|幅|説明|
|:----|:--:|:---|
|ヘッダー|900px|基準サイズの900px|
|コンテナ|900px|コンテナのサイズを基準サイズ900pxに設定|
|サイドバー|300px|基準サイズからコンテンツサイズを引いた値(900 - 600)|
|コンテンツ|600px|基準サイズからサイドバーのサイズを引いた値(900 - 300)|
|フッター|900px|ヘッダーに合わせて基準サイズの900pxを設定|

※サイズはボーダー・マージン・パディング等の値によって調整が必要です。
サンプルでは幅のみサイズで組まれています。

## 3カラムレイアウト(固定)
![サンプル画像](https://i.imgur.com/5VofFab.png)

### HTML
```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>3カラムレイアウト</title>
</head>
<body>
  <header>
    ヘッダー
  </header>

<div id="SideBar1">
      サイドバー1
    </div>

<div id="content">
      メインコンテンツ
    </div>

<div id="SideBar2">
      サイドバー2
    </div>

</div>

<footer>
    フッター
  </footer>
</body>
</html>
```

### CSS
```
header{
  background-color: #3370e0;    /*背景の色を設定*/
  width: 900px;                   /*幅を設定*/
  height: 100px;                  /*高さを設定*/
  margin: 0 auto;                 /*センタリング*/
}

#container{
  width: 900px;                   /*幅を設定*/
  margin: 0 auto;                 /*センタリング*/
}

#container #SideBar1{
  width: 150px;                   /*幅を設定*/
  float: left;                    /*フロート レフト*/
}

#container #content{
  width: 600px;                   /*幅を設定*/
  float: left;                    /*フロート レフト*/
}

#container #SideBar2{
  width: 150px;                   /*幅を設定*/
  float: left;                    /*フロート レフト*/
}

footer{
  background-color: #3370e0;    /*背景の色を設定*/
  width: 900px;                   /*幅を設定*/
  height: 50px;                   /*高さを設定*/
  margin: 0 auto;                 /*センタリング*/
  clear: left;                    /*フロート クリア*/
}
```
|箇所|幅|説明|
|:----|:--:|:---|
|ヘッダー|900px|基準サイズの900px|
|コンテナ|900px|コンテナのサイズを基準サイズ900pxに設定|
|サイドバー1|150px|基準サイズからサイドバー2とコンテンツサイズを引いた値|
|コンテンツ|600px|基準サイズからサイドバーのサイズを引いた値(900 - 300)|
|サイドバー2|150px|基準サイズからサイドバー1とコンテンツサイズを引いた値|
|フッター|900px|ヘッダーに合わせて基準サイズの900pxを設定|

※サイズはボーダー・マージン・パディング等の値によって調整が必要です。
サンプルでは幅のみサイズで組まれています。

## 2カラムレイアウト(可変)
![サンプル画像](https://i.imgur.com/DryAlDA.png)
### HTML
```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>2カラムレイアウト可変</title>
</head>
<body>
  <header>
    ヘッダー
  </header>

<div id="SideBar">
      サイドバー
    </div>

<div id="content">
      メインコンテンツ
    </div>

</div>

<footer>
    フッター
  </footer>
</body>
</html>
```

### CSS
```
/*ヘッダー*/
header{
  background-color: #3370e0;  /*背景の色を設定*/
  width: 70%;                 /*幅を設定*/
  height: 100px;                /*高を設定*/
  margin: 0 auto;               /*センタリング*/
}

/*コンテナ*/
#container{ 
  width: 70%;                 /*幅を設定*/
  margin: 0 auto;               /*センタリング*/
}

/*サイドバー*/
#container #SideBar{
  width: 20%;                 /*幅を設定*/
  float: left;                  /*フロート レフト*/
}

/*コンテンツ*/
#container #content{
  width: 80%;                 /*幅を設定*/
  float: left;                  /*フロート レフト*/
}

/*フッター*/
footer{
  background-color: #3370e0;  /*背景の色を設定*/
  width: 70%;                 /*幅を設定*/
  height: 50px;                 /*高さを設定*/
  margin: 0 auto;               /*センタリング*/
  clear: left;                  /*フロート クリア*/
}
```
可変レイアウトの場合ピクセル(px)等の固定値を使わず、可変する単位を使いレイアウトを組みます。
サンプルでは`%`の単位を使っています。

親要素に比例してサイズが可変しますので`100% = MaxSize`となります。

|箇所|幅|説明|
|:----|:--:|:---|
|ヘッダー|70%|基準サイズの70%|
|コンテナ|70%|コンテナのサイズを基準サイズ70%に設定|
|サイドバー|20%|100%からコンテンツサイズを引いた値(100 - 80)%|
|コンテンツ|80%|100%からサイドバーサイズを引いた値(100 - 20)%|
|フッター|70%|ヘッダーに合わせて基準サイズの70%を設定|

※サイズはボーダー・マージン・パディング等の値によって調整が必要です。
サンプルでは幅のみサイズで組まれています。

このブログを検索

じょうほう処理ノート

CSSレイアウトサンプル

コメント

コメントを投稿

Category