CSSレイアウトサンプル リンクを取得 Facebook × Pinterest メール 他のアプリ 2月 07, 2019 # 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; /*高さを設定*/ margin: 0 auto; /*センタリング*/ clear: left; /*フロート クリア*/ } ``` |箇所|幅|説明| |:----|:--:|:---| |ヘッダー|900px|基準サイズの900px| |コンテナ|900px|コンテナのサイズを基準サイズ900pxに設定| |サイドバー|300px|基準サイズからコンテンツサイズを引いた値(900 - 600)| |コンテンツ|600px|基準サイズからサイドバーのサイズを引いた値(900 - 300)| |フッター|900px|ヘッダーに合わせて基準サイズの900pxを設定| ※サイズはボーダー・マージン・パディング等の値によって調整が必要です。 サンプルでは幅のみサイズで組まれています。 ## 3カラムレイアウト(固定)  ### HTML ``` 3カラムレイアウト ヘッダー サイドバー1 メインコンテンツ サイドバー2 ``` ### 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カラムレイアウト(可変)  ### HTML ``` 2カラムレイアウト可変 ヘッダー サイドバー メインコンテンツ ``` ### 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%を設定| ※サイズはボーダー・マージン・パディング等の値によって調整が必要です。 サンプルでは幅のみサイズで組まれています。 リンクを取得 Facebook × Pinterest メール 他のアプリ コメント
コメント
コメントを投稿