cssレイアウト - 千葉商科大 web表現

Web表現第7回：CSSレイアウト

2011年11月9日千葉商科大学政策情報学部担当：田所淳

本日の内容‣ ボックスモデルについて (復習)

‣ CSSで段組レイアウトをする‣ CSSでページのフレームワークを作成する

‣ まずはシンプルな2段組レイアウトに挑戦‣ ヘッダー‣ コンテント‣ サイドバー‣ フッター

‣ いくつかの方法を紹介

復習：ボックスモデル‣ CSSでは全ての要素を長方形のボックスを単位として考える‣ ブラウザの画面の中で積み木をしている感覚‣ いままで学んできたHTMLのほとんど要素(ブロックレベル要素)はその周囲に見えない長方形のボックスを持っていた

‣ ボックスの周囲の余白、枠線、背景に様々なプロパティを与えることで様々なスタイルを実現する

復習：ボックスモデル

要素の内容 (コンテント)

margin

padding

border

隣接するボックスとの境界

複数の要素を包括する要素：div と span‣ divとspanで選択範囲をまとめる‣ div要素やspan要素で複数の要素を囲むことによって、一定の範囲にまとめてスタイルを指定することができる

‣ 高度なスタイル指定の基本となる‣ ページ内の機能の応じてHTMLを区分分けする‣ ヘッダ‣ フッタ‣ メニューバー‣ サイドバー ...etc

複数の要素を包括する要素：div と span‣ div要素の例

‣ span要素の例

<div id="hoo"> <h1>div要素のサンプル</h1> <p>この領域は複数の要素をもっているdivによって包括されている。</p> <p>中に入る要素は、いくつでもよい。</p></div>

<p>ここでは、<span id="hoo">段落の中の一部分だけ</span>をspan要素で範囲指定している。</p>

特定の要素のみ選択する：classとid‣ たとえば、div要素がたくさんあるHTMLがあったとする‣ ある特定の(例えば、2番目の)divにだけスタイルを適用したい場合はどうすれば良いのか?

‣ 同じ名称の要素を区別するための、特別な属性がある‣ class‣ id

特定の要素のみ選択する：classとid‣ class属性‣ 要素名の後ろに"."をつけて、その後のクラス名をつける‣ クラス属性はHTMLのタグに「class="hoge"」という属性で指定される

‣ id属性‣ 要素名の後ろに"#"をつけて、その後のクラス名をつける‣ クラス属性はHTMLのタグに「id="hoge"」という属性で指定される

‣ 同じid属性はひとつのHTMLファイルの中で1回のみ使用可

特定の要素のみ選択する：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 { }

特定の要素のみ選択する：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 { }

CSSレイアウト

CSSレイアウト‣ では、いよいよCSSを用いてページ全体のレイアウトをしていきましょう

‣ 基本的な考え方‣ ページの領域を、div要素で区切る‣ id属性、またはclass属性を指定‣ CSSから、div要素のブロックの配置を操作する

目標とするレイアウトのワイヤーフレーム‣ 目標とするレイアウト

Header

ContentSidebar

Footer

テンプレートのダウンロード‣ ベースとなるHTMLファイルを下記からダウンロードします‣ 最低限のHTMLとCSSの設定があらかじめ行われています

‣ ダウンロード先‣http://goo.gl/gyOCP

http://goo.gl/gyOCP

http://goo.gl/gyOCP

ベースとなる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>

ベースとなるHTMLの作成‣ CSSのfloatプロパティを利用して、段組を作成する方法‣ 各レイアウトのセグメントごとに、ブロックを作成‣ <div>タグを使用する - divタグに囲まれた内容はひとつのまとまりとして扱うことができる

‣ 4つのブロックに分けて、それぞれにid属性を指定する‣ header‣ sidebar‣ content‣ footer

‣ この4つのブロックを包括するid属性を用意する‣ container

ベースとなるHTMLの作成‣ ページ内の構造

bodydiv id = “container”div id = “header”

div id = “sidebar”

div id = “main”

div id = “footer”

方法A：サイドバーの浮動化

方法A：サイドバーの浮動化‣ CSSのfloatプロパティを利用して、段組を作成する方法‣ 各レイアウトのセグメントごとに、ブロックを作成‣ <div>タグを使用する - divタグに囲まれた内容はひとつのまとまりとして扱うことができる

‣ 4つのブロックに分けて、それぞれにid属性を指定する‣ header‣ sidebar‣ content‣ footer

‣ この4つのブロックを包括するid属性を用意する‣ container

方法A：サイドバーの浮動化‣ スタイルシートを作成‣ レイアウトを指定するCSSファイルを作成する‣ 「index.html」と同じ階層に「css」フォルダを作成‣ 「css」フォルダ内に、「default.css」というファイル名でCSSファイルを新規に作成

‣ まずは、それぞれのブロックのスタイルを定義する

方法A：サイドバーの浮動化‣ それぞれのブロックにスタイルを設定#container {}

#header { background-color:#C7E8FF;}

#footer { background-color:#C7E8FF;}

#sidebar { background-color:#FFFBC7;}

#content { background-color:#FFDCC7; }

方法A：サイドバーの浮動化‣ サイドバーを浮動化する‣ floatプロパティを使用‣ 左右どちらかにサイドバーを配置する‣ HTMLファイル内では、sidebar要素は必ずcontent要素の前になくてはならない

方法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; }


浮動化float : left

方法A：サイドバーの浮動化‣ まだちょっと変‣ メインコンテンツがサイドバーの下に回り込んでしまっている

‣ contentの左にmarginを指定することで解決できる‣ サイドバーの幅より僅かに広くcontent右のマージンをとることで、コラムの間に余白を生成する


ここにマージンを入れる

方法A：サイドバーの浮動化‣ #contentの部分を変更#sidebar { background-color:#FFFBC7; float:left; width:200px;}

#content { background-color:#FFDCC7; margin-left:200px;}

方法A：サイドバーの浮動化‣ 全体の幅を固定にして、センタリング‣ #containerを調整することで、全体の幅を固定にして、センタリングして配置することが可能

‣ #containerに加える指定‣ width を固定‣ 左右の margin を auto に

方法A：サイドバーの浮動化‣ #containerの部分を変更#header, #footer, #sidebar, #content { margin:0; padding:5px 0;}

#container { width:800px; margin:0 auto;}

方法A：サイドバーの浮動化‣ それぞれのブロックの余白を調整#header, #footer, #sidebar, #content { margin:0; padding:5px 0;}

#container { width:800px; margin:0 auto;}

方法B：ダブルフロート

方法B：ダブルフロート‣ 方法A(sidebarの浮動化)の欠点

‣ 必ず、contentの高さがsidebarのより高くなくてはならない‣ もし、高さが逆転すると、レイアウトが崩れる

‣ また、sidebarの記述を必ず先に書かなくてはならない

‣ これらの欠点を改良したい

方法B：ダブルフロート‣ sidebar側の記述を増やしてみる → レイアウトの崩れ

方法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>....(略)....

方法B：ダブルフロート‣ sidebarとcontentの左右両方を浮動化することで、問題を解決

‣ 右から表示を埋めていく場合‣ content → float : right‣ sidebar → float : right

‣ 左から表示を埋めていく場合‣ content → float : left‣ sidebar → float : left

‣ floatする方向によって、コラムの位置を入れ替える

方法B：ダブルフロート‣ CSSの変更‣ contentのfloat属性を設定：右 (right) に‣ contentの幅を設定 (600px)

‣ sidebarのfloat属性を設定：右 (right) に‣ sidebarの幅を設定 (200px)

方法B：ダブルフロート‣ #content と #sidebar を右に浮動化して幅固定#sidebar { background-color:#FFFBC7; float:right; width:200px;}

#content { background-color:#FFDCC7; float:right; width:600px;}

方法B：ダブルフロート‣ 確認してみる → フッターの位置がおかしい…?

方法B：ダブルフロート‣ 浮動化の解除 (clear)

‣ ダブルフロートで左右の要素を浮動化した場合、後に続くコンテントは浮動化の解除を行う必要がある

‣ clear プロパティを使用‣ clear : left - 左に浮動化した要素を解除‣ clear : right - 右に浮動化した要素を解除‣ clear : both - 左右両方で浮動化した要素を解除

方法B：ダブルフロート‣ #footerで浮動化を解除する#footer { background-color:#C7E8FF; clear:right;}

方法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;}

方法B：ダブルフロート‣ 完成!! ：レイアウトの崩れることのない2コラムレイアウト

方法C：リキッドレイアウト

方法C：リキッドレイアウト‣ 方法Bのダブルフロートのサンプルは、幅が固定(800px)になっている

‣ 幅を可変にしても崩れないように変更してみる

‣ Webページの表示領域の幅を変更しても、従来のレイアウトを維持できるようにする手法を「リキッドレイアウト」と呼ぶ

方法C：リキッドレイアウト‣ 方法Bを改造してリキッドレイアウトにしてみる

‣ ポイント‣ 全ての要素の幅を、相対値(%)で指定する‣ 2コラムの要素を左右に浮動化する(float:left, float:right)‣ 左右に浮動化した要素の幅の合計を、100%より小さくする

‣ 例えば、‣ sidebar - width : 20%‣ content - width : 79%‣ 合計 99%

方法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%;}...

方法C：リキッドレイアウト‣ #sidebarと#containerを左右にfloatして相対幅に

#sidebar { background-color:#FFFBC7; float:left; width:20%;}#content { background-color:#FFDCC7; float:right; width:79%;}

方法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%;}

方法C：リキッドレイアウト‣ 完成!! ウィンドウ幅を変更しても崩れない

cssレイアウト - 千葉商科大 web表現

Technology