cssレイアウト - 千葉商科大 web表現
TRANSCRIPT
![Page 1: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/1.jpg)
Web表現第7回:CSSレイアウト
2011年11月9日千葉商科大学政策情報学部担当:田所淳
![Page 2: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/2.jpg)
本日の内容‣ ボックスモデルについて (復習)
‣ CSSで段組レイアウトをする‣ CSSでページのフレームワークを作成する
‣ まずはシンプルな2段組レイアウトに挑戦‣ ヘッダー‣ コンテント‣ サイドバー‣ フッター
‣ いくつかの方法を紹介
![Page 3: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/3.jpg)
復習:ボックスモデル‣ CSSでは全ての要素を長方形のボックスを単位として考える‣ ブラウザの画面の中で積み木をしている感覚‣ いままで学んできたHTMLのほとんど要素(ブロックレベル要素)はその周囲に見えない長方形のボックスを持っていた
‣ ボックスの周囲の余白、枠線、背景に様々なプロパティを与えることで様々なスタイルを実現する
![Page 4: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/4.jpg)
復習:ボックスモデル
要素の内容 (コンテント)
margin
padding
border
隣接するボックスとの境界
![Page 5: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/5.jpg)
複数の要素を包括する要素:div と span‣ divとspanで選択範囲をまとめる‣ div要素やspan要素で複数の要素を囲むことによって、一定の範囲にまとめてスタイルを指定することができる
‣ 高度なスタイル指定の基本となる‣ ページ内の機能の応じてHTMLを区分分けする‣ ヘッダ‣ フッタ‣ メニューバー‣ サイドバー ...etc
![Page 6: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/6.jpg)
複数の要素を包括する要素:div と span‣ div要素の例
‣ span要素の例
<div id="hoo"> <h1>div要素のサンプル</h1> <p>この領域は複数の要素をもっているdivによって包括されている。</p> <p>中に入る要素は、いくつでもよい。</p></div>
<p>ここでは、<span id="hoo">段落の中の一部分だけ</span>をspan要素で範囲指定している。</p>
![Page 7: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/7.jpg)
特定の要素のみ選択する:classとid‣ たとえば、div要素がたくさんあるHTMLがあったとする‣ ある特定の(例えば、2番目の)divにだけスタイルを適用したい場合はどうすれば良いのか?
‣ 同じ名称の要素を区別するための、特別な属性がある‣ class‣ id
![Page 8: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/8.jpg)
特定の要素のみ選択する:classとid‣ class属性‣ 要素名の後ろに"."をつけて、その後のクラス名をつける‣ クラス属性はHTMLのタグに「class="hoge"」という属性で指定される
‣ id属性‣ 要素名の後ろに"#"をつけて、その後のクラス名をつける‣ クラス属性はHTMLのタグに「id="hoge"」という属性で指定される
‣ 同じid属性はひとつのHTMLファイルの中で1回のみ使用可
![Page 9: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/9.jpg)
特定の要素のみ選択する:classとid‣ 例:id要素によって区別された2つのdiv要素
‣ 対応するCSS
<div id="header"> <h1>ここはヘッダーの領域</h1> <p>headerというid属性を付加することで、他のdiv要素と区別している。</p></div> <div id="sidebar"> <h1>ここはサイドバーの領域</h1> <p>sidebarというid属性を付加することで、他のdiv要素と区別している。</p></div>
#header { }
#sidebar { }
![Page 10: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/10.jpg)
特定の要素のみ選択する:classとid‣ 例:id要素によって区別された2つのdiv要素
‣ 対応するCSS
<div id="header"> <h1>ここはヘッダーの領域</h1> <p>headerというid属性を付加することで、他のdiv要素と区別している。</p></div> <div id="sidebar"> <h1>ここはサイドバーの領域</h1> <p>sidebarというid属性を付加することで、他のdiv要素と区別している。</p></div>
#header { }
#sidebar { }
![Page 11: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/11.jpg)
特定の要素のみ選択する:classとid‣ 例:id要素によって区別された2つのdiv要素
‣ 対応するCSS
<div id="header"> <h1>ここはヘッダーの領域</h1> <p>headerというid属性を付加することで、他のdiv要素と区別している。</p></div> <div id="sidebar"> <h1>ここはサイドバーの領域</h1> <p>sidebarというid属性を付加することで、他のdiv要素と区別している。</p></div>
#header { }
#sidebar { }
![Page 12: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/12.jpg)
特定の要素のみ選択する:classとid‣ 例2:class要素によって区別された2つのdiv要素
‣ 対応するCSS
<div class="header"> <h1>ここはヘッダーの領域</h1> <p>headerというid属性を付加することで、他のdiv要素と区別している。</p></div> <div class="sidebar"> <h1>ここはサイドバーの領域</h1> <p>sidebarというid属性を付加することで、他のdiv要素と区別している。</p></div>
.header { }
.sidebar { }
![Page 13: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/13.jpg)
CSSレイアウト
![Page 14: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/14.jpg)
CSSレイアウト‣ では、いよいよCSSを用いてページ全体のレイアウトをしていきましょう
‣ 基本的な考え方‣ ページの領域を、div要素で区切る‣ id属性、またはclass属性を指定‣ CSSから、div要素のブロックの配置を操作する
![Page 15: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/15.jpg)
目標とするレイアウトのワイヤーフレーム‣ 目標とするレイアウト
Header
ContentSidebar
Footer
![Page 16: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/16.jpg)
テンプレートのダウンロード‣ ベースとなるHTMLファイルを下記からダウンロードします‣ 最低限のHTMLとCSSの設定があらかじめ行われています
‣ ダウンロード先‣http://goo.gl/gyOCP
![Page 17: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/17.jpg)
ベースとなるHTMLの作成
<!DOCTYPE HTML> <html> <head> <title>CSSレイアウトのテンプレート</title> <meta http-equiv="Content-Type" charset="utf-8" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div id="container"> <div id="header">
</div> <div id="sidebar">
</div> <div id="content">
</div> <div id="footer">
</div> </div> </body> </html>
![Page 18: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/18.jpg)
ベースとなるHTMLの作成‣ CSSのfloatプロパティを利用して、段組を作成する方法‣ 各レイアウトのセグメントごとに、ブロックを作成‣ <div>タグを使用する - divタグに囲まれた内容はひとつのまとまりとして扱うことができる
‣ 4つのブロックに分けて、それぞれにid属性を指定する‣ header‣ sidebar‣ content‣ footer
‣ この4つのブロックを包括するid属性を用意する‣ container
![Page 19: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/19.jpg)
ベースとなるHTMLの作成‣ ページ内の構造
bodydiv id = “container”div id = “header”
div id = “sidebar”
div id = “main”
div id = “footer”
![Page 20: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/20.jpg)
方法A:サイドバーの浮動化
![Page 21: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/21.jpg)
方法A:サイドバーの浮動化‣ CSSのfloatプロパティを利用して、段組を作成する方法‣ 各レイアウトのセグメントごとに、ブロックを作成‣ <div>タグを使用する - divタグに囲まれた内容はひとつのまとまりとして扱うことができる
‣ 4つのブロックに分けて、それぞれにid属性を指定する‣ header‣ sidebar‣ content‣ footer
‣ この4つのブロックを包括するid属性を用意する‣ container
![Page 22: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/22.jpg)
方法A:サイドバーの浮動化‣ スタイルシートを作成‣ レイアウトを指定するCSSファイルを作成する‣ 「index.html」と同じ階層に「css」フォルダを作成‣ 「css」フォルダ内に、「default.css」というファイル名でCSSファイルを新規に作成
‣ まずは、それぞれのブロックのスタイルを定義する
![Page 23: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/23.jpg)
方法A:サイドバーの浮動化‣ それぞれのブロックにスタイルを設定#container {}
#header { background-color:#C7E8FF;}
#footer { background-color:#C7E8FF;}
#sidebar { background-color:#FFFBC7;}
#content { background-color:#FFDCC7; }
![Page 24: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/24.jpg)
方法A:サイドバーの浮動化‣ サイドバーを浮動化する‣ floatプロパティを使用‣ 左右どちらかにサイドバーを配置する‣ HTMLファイル内では、sidebar要素は必ずcontent要素の前になくてはならない
![Page 25: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/25.jpg)
方法A:サイドバーの浮動化‣ sidebarを浮動化する@charset "UTF-8";/* CSS Document */
#container {}
#header { background-color:#C7E8FF;}
#footer { background-color:#C7E8FF;}
#sidebar { background-color:#FFFBC7; float:left; width:200px;}
#content { background-color:#FFDCC7; }
![Page 26: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/26.jpg)
方法A:サイドバーの浮動化‣ sidebarを浮動化する@charset "UTF-8";/* CSS Document */
#container {}
#header { background-color:#C7E8FF;}
#footer { background-color:#C7E8FF;}
#sidebar { background-color:#FFFBC7; float:left; width:200px;}
#content { background-color:#FFDCC7; }
![Page 27: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/27.jpg)
方法A:サイドバーの浮動化
![Page 28: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/28.jpg)
方法A:サイドバーの浮動化
浮動化float : left
![Page 29: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/29.jpg)
方法A:サイドバーの浮動化‣ まだちょっと変‣ メインコンテンツがサイドバーの下に回り込んでしまっている
‣ contentの左にmarginを指定することで解決できる‣ サイドバーの幅より僅かに広くcontent右のマージンをとることで、コラムの間に余白を生成する
![Page 30: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/30.jpg)
方法A:サイドバーの浮動化
ここにマージンを入れる
![Page 31: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/31.jpg)
方法A:サイドバーの浮動化‣ #contentの部分を変更#sidebar { background-color:#FFFBC7; float:left; width:200px;}
#content { background-color:#FFDCC7; margin-left:200px;}
![Page 32: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/32.jpg)
方法A:サイドバーの浮動化‣ #contentの部分を変更#sidebar { background-color:#FFFBC7; float:left; width:200px;}
#content { background-color:#FFDCC7; margin-left:200px;}
![Page 33: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/33.jpg)
方法A:サイドバーの浮動化
![Page 34: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/34.jpg)
方法A:サイドバーの浮動化‣ 全体の幅を固定にして、センタリング‣ #containerを調整することで、全体の幅を固定にして、センタリングして配置することが可能
‣ #containerに加える指定‣ width を固定‣ 左右の margin を auto に
![Page 35: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/35.jpg)
方法A:サイドバーの浮動化‣ #containerの部分を変更#header, #footer, #sidebar, #content { margin:0; padding:5px 0;}
#container { width:800px; margin:0 auto;}
![Page 36: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/36.jpg)
方法A:サイドバーの浮動化‣ それぞれのブロックの余白を調整#header, #footer, #sidebar, #content { margin:0; padding:5px 0;}
#container { width:800px; margin:0 auto;}
![Page 37: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/37.jpg)
方法A:サイドバーの浮動化
![Page 38: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/38.jpg)
方法B:ダブルフロート
![Page 39: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/39.jpg)
方法B:ダブルフロート‣ 方法A(sidebarの浮動化)の欠点
‣ 必ず、contentの高さがsidebarのより高くなくてはならない‣ もし、高さが逆転すると、レイアウトが崩れる
‣ また、sidebarの記述を必ず先に書かなくてはならない
‣ これらの欠点を改良したい
![Page 40: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/40.jpg)
方法B:ダブルフロート‣ sidebar側の記述を増やしてみる → レイアウトの崩れ
![Page 41: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/41.jpg)
方法B:ダブルフロート‣ サイドバーとメインコンテンツを入れ替える....(略)....<body> <div id="header"> <p>ヘッダー</p> </div> <div id="content"> <p>メインコンテンツ</p> </div> <div id="sidebar"> <p>サイドバー</p> </div> <div id="footer"> <p>フッター</p> </div></body>....(略)....
![Page 42: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/42.jpg)
方法B:ダブルフロート‣ sidebarとcontentの左右両方を浮動化することで、問題を解決
‣ 右から表示を埋めていく場合‣ content → float : right‣ sidebar → float : right
‣ 左から表示を埋めていく場合‣ content → float : left‣ sidebar → float : left
‣ floatする方向によって、コラムの位置を入れ替える
![Page 43: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/43.jpg)
方法B:ダブルフロート‣ CSSの変更‣ contentのfloat属性を設定:右 (right) に‣ contentの幅を設定 (600px)
‣ sidebarのfloat属性を設定:右 (right) に‣ sidebarの幅を設定 (200px)
![Page 44: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/44.jpg)
方法B:ダブルフロート‣ #content と #sidebar を右に浮動化して幅固定#sidebar { background-color:#FFFBC7; float:right; width:200px;}
#content { background-color:#FFDCC7; float:right; width:600px;}
![Page 45: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/45.jpg)
方法B:ダブルフロート‣ #content と #sidebar を右に浮動化して幅固定#sidebar { background-color:#FFFBC7; float:right; width:200px;}
#content { background-color:#FFDCC7; float:right; width:600px;}
![Page 46: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/46.jpg)
方法B:ダブルフロート‣ 確認してみる → フッターの位置がおかしい…?
![Page 47: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/47.jpg)
方法B:ダブルフロート‣ 浮動化の解除 (clear)
‣ ダブルフロートで左右の要素を浮動化した場合、後に続くコンテントは浮動化の解除を行う必要がある
‣ clear プロパティを使用‣ clear : left - 左に浮動化した要素を解除‣ clear : right - 右に浮動化した要素を解除‣ clear : both - 左右両方で浮動化した要素を解除
![Page 48: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/48.jpg)
方法B:ダブルフロート‣ #footerで浮動化を解除する#footer { background-color:#C7E8FF; clear:right;}
![Page 49: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/49.jpg)
方法B:ダブルフロート‣ #footerで浮動化を解除する#footer { background-color:#C7E8FF; clear:right;}
![Page 50: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/50.jpg)
方法B:ダブルフロート‣ 最終的に完成したCSSbody { margin:0;}#header, #footer, #sidebar, #content { margin:0; padding:5px 0;}#container { width:800px; margin:0 auto;}#header { background-color:#C7E8FF;}#footer { background-color:#C7E8FF; clear:right;}
#sidebar { background-color:#FFFBC7; float:right; width:200px;}#content { background-color:#FFDCC7; float:right; width:600px;}
![Page 51: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/51.jpg)
方法B:ダブルフロート‣ 完成!! :レイアウトの崩れることのない2コラムレイアウト
![Page 52: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/52.jpg)
方法C:リキッドレイアウト
![Page 53: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/53.jpg)
方法C:リキッドレイアウト‣ 方法Bのダブルフロートのサンプルは、幅が固定(800px)になっている
‣ 幅を可変にしても崩れないように変更してみる
‣ Webページの表示領域の幅を変更しても、従来のレイアウトを維持できるようにする手法を「リキッドレイアウト」と呼ぶ
![Page 54: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/54.jpg)
方法C:リキッドレイアウト‣ 方法Bを改造してリキッドレイアウトにしてみる
‣ ポイント‣ 全ての要素の幅を、相対値(%)で指定する‣ 2コラムの要素を左右に浮動化する(float:left, float:right)‣ 左右に浮動化した要素の幅の合計を、100%より小さくする
‣ 例えば、‣ sidebar - width : 20%‣ content - width : 79%‣ 合計 99%
![Page 55: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/55.jpg)
方法C:リキッドレイアウト‣ まずは#containerのセンタリング部分を変更#container { width:90%; margin:0 5%;}#header { background-color:#C7E8FF;}#footer { background-color:#C7E8FF; clear:both;}#sidebar { background-color:#FFFBC7; float:left; width:20%;}...
![Page 56: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/56.jpg)
方法C:リキッドレイアウト‣ まずは#containerのセンタリング部分を変更#container { width:90%; margin:0 5%;}#header { background-color:#C7E8FF;}#footer { background-color:#C7E8FF; clear:both;}#sidebar { background-color:#FFFBC7; float:left; width:20%;}...
![Page 57: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/57.jpg)
方法C:リキッドレイアウト‣ #sidebarと#containerを左右にfloatして相対幅に
#sidebar { background-color:#FFFBC7; float:left; width:20%;}#content { background-color:#FFDCC7; float:right; width:79%;}
![Page 58: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/58.jpg)
方法C:リキッドレイアウト‣ #sidebarと#containerを左右にfloatして相対幅に
#sidebar { background-color:#FFFBC7; float:left; width:20%;}#content { background-color:#FFDCC7; float:right; width:79%;}
![Page 59: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/59.jpg)
方法C:リキッドレイアウト‣ 最終的なCSSbody { margin:0;}#header, #footer, #sidebar, #content { margin:0; padding:5px 0;}#container { width:90%; margin:0 5%;}#header { background-color:#C7E8FF;}#footer { background-color:#C7E8FF; clear:both;}
#sidebar { background-color:#FFFBC7; float:left; width:20%;}#content { background-color:#FFDCC7; float:right; width:80%;}
![Page 60: CSSレイアウト - 千葉商科大 Web表現](https://reader031.vdocuments.net/reader031/viewer/2022020123/55953fbb1a28ab426d8b45f1/html5/thumbnails/60.jpg)
方法C:リキッドレイアウト‣ 完成!! ウィンドウ幅を変更しても崩れない