Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
情報編集(Web)第7回:CSSレイアウト2013年5月21日東京藝術大学 芸術情報センター(AMC)担当:田所淳
本日の内容‣ ボックスモデルについて (復習)‣ CSSで段組レイアウトをする‣ CSSでページのフレームワークを作成する‣ まずはシンプルな2段組レイアウトに挑戦‣ ヘッダー‣ コンテント‣ サイドバー‣ フッター‣ ポピュラーな2つの方法‣...
ボックスモデル‣ CSSでは全ての要素を長方形のボックスを単位として考える‣ ブラウザの画面の中で積み木をしている感覚‣ いままで学んできたHTMLのほとんど要素(ブロックレベル要素)はその周囲に見えない長方形のボックスを持っていた‣ ボックス...
ボックスモデル‣ コンテント‣ 要素の内容そのもの‣ border‣ 要素を取り囲む枠線‣ padding‣ コンテントとボーダーまでの余白‣ magin‣ 隣接する他のボックス要素とボーダーまでの余白
ボックスモデル要素の内容 (コンテント)marginpaddingborder隣接するボックスとの境界
ボックスモデル‣ marginとpaddingの値の設定‣ 余白の値は一般サイズ(em, pt, px, %など)で指定する‣ 複数の値をスペースで区切ってまとめて記述できる‣ 値の記述数‣ 1:上下左右をまとめて設定‣ 2:上下、左右の順に設...
ボックスモデル‣ borderのプロパティ‣ 3つのプロパティを持つ‣ border-width:枠線の幅‣ border-color:枠線の色‣ border-style:枠線の種類‣ none、solid、double、dotted、das...
セレクタ詳細
セレクタ詳細‣ セレクタは、単に要素名を指定するだけでなく、様々な指定の方法が存在する‣ 最初から全部を記憶するのは大変ですが、ちょっとずつ身につけていきましょう
classとid‣ class属性‣ 要素名の後ろに"."をつけて、その後のクラス名をつける‣ クラス属性はHTMLのタグに「class="hoge"」という属性で指定される‣ id属性‣ 要素名の後ろに"#"をつけて、その後のクラス名をつける...
div と span‣ divとspanで選択範囲をまとめる‣ div要素やspan要素で複数の要素を囲むことによって、一定の範囲にまとめてスタイルを指定することができる‣ divやspan要素は、classやidによってCSSから識別する<d...
div と span‣ div要素 - 高度なスタイル指定の基本となる‣ ページ内の機能の応じてHTMLを区分分けする‣ ヘッダ‣ フッタ‣ メニューバー‣ サイドバー ...etc‣ 段組に応用
CSSレイアウト
CSSレイアウト‣ より高度なCSSの活用‣ CSSを利用したページ全体のレイアウト‣ いくつかの方法を紹介
ベースとなるHTMLの作成‣ ベースとなるHTMLファイルを下記からダウンロードします‣ 最低限のHTMLとCSSの設定があらかじめ行われています‣ ダウンロード先‣http://goo.gl/jWOzk
ベースとなるHTMLの作成<!DOCTYPE HTML><html><head><title>CSSレイアウトのテンプレート</title><meta charset="UTF-8" /><link href="css/style.css" r...
目標とするレイアウトのワイヤーフレーム‣ 目標とするレイアウトHeaderContent SidebarFooter
方法A:サイドバーの浮動化‣ CSSのfloatプロパティを利用して、段組を作成する方法‣ 各レイアウトのセグメントごとに、ブロックを作成‣ div要素を使用する‣ divに囲まれた内容をひとつのまとまりとして扱う‣ 4つのブロックに分けて、それ...
方法A:サイドバーの浮動化‣ body要素の中身を3つのid要素に分ける....(略)....<body><div id="header"><p>ヘッダー</p></div><div id="sidebar"><p>サイドバー</p></div...
方法A:サイドバーの浮動化‣ スタイルシートを作成‣ まずヘッダーとフッターのスタイルを定義する
方法A:サイドバーの浮動化‣ #headerと#footerに、スタイルを設定#header {padding: 20px;background: #ccc;}#footer {padding: 20px;background: #ccc;}
方法A:サイドバーの浮動化‣ サイドバーを浮動化する‣ floatプロパティを使用‣ 左右どちらかにサイドバーを配置する‣ HTMLファイル内では、sidebar要素は必ずcontent要素の前になくてはならない
方法A:サイドバーの浮動化‣ sidebarを浮動化する#header {padding: 20px;background: #ccc;}#sidebar {float: right;width: 30%;background: #999;}#...
方法A:サイドバーの浮動化
方法A:サイドバーの浮動化‣ まだちょっと変‣ メインコンテンツがサイドバーの下に回り込んでしまっている‣ contentの右側にマージンを指定することで解決できる‣ サイドバーの幅より かに広くcontent右のマージンをとることで、コラムの...
方法A:サイドバーの浮動化‣ サイドバーを浮動化する#header {padding: 20px;background: #ccc;}#sidebar {float: right;width: 30%;background: #999;}#co...
方法A:サイドバーの浮動化
方法B:ダブルフロート‣ 方法Aの欠点‣ サイドバーを浮動化する際には、必ずHTMLファイル上では、コンテンツより前に記述する必要がある部分‣ CSSが使用できない環境 (携帯、読み上げソフトの使用など)の場合、コンテンツより先にメニューが来て...
方法B:ダブルフロート‣ floatを用いて、この問題を解決する方法‣ ダブルフロート‣ 段組の左右を両方ともfloat属性で浮動化させる‣ HTMLの順番に影響されず、左右の配置をコントロールできる
方法B:ダブルフロート‣ サイドバーとメインコンテンツを入れ替える....(略)....<body><div id="header"><p>ヘッダー</p></div><div id="content"><p>メインコンテンツ</p></div...
方法B:ダブルフロート‣ CSSの変更‣ contentのfloat属性を設定:右 (right) に‣ contentの幅を設定 (70%)‣ sidebarのfloat属性を設定: 右 (right) に‣ sidebarの幅を設定 (30%)...
方法B:ダブルフロート#header {padding: 2%;background: #ccc;}#content{float: right;width: 70%;}#sidebar {float: right;width: 30%;back...
方法B:ダブルフロート
‣ さらに body の margin を 0 にする方法B:ダブルフロートbody {! margin:0;}#header {padding: 2%;background: #ccc;}#content{float: right;width...
方法B:ダブルフロート
‣ 各要素の余白(margin, padding)を微調整方法B:ダブルフロートbody {! margin:0;}#header {padding: 2%;background: #ccc;}#content{float: right;wid...
方法B:ダブルフロート
方法B:ダブルフロート‣ ようやく整ったレイアウトのページが出来た!‣ この方法が段組の基本‣ あとは、この組合せ
Upcoming SlideShare
Loading in …5
×

情報編集(Web) 第7回:CSSレイアウト

  • Be the first to comment

  • Be the first to like this

情報編集(Web) 第7回:CSSレイアウト

  1. 1. 情報編集(Web)第7回:CSSレイアウト2013年5月21日東京藝術大学 芸術情報センター(AMC)担当:田所淳
  2. 2. 本日の内容‣ ボックスモデルについて (復習)‣ CSSで段組レイアウトをする‣ CSSでページのフレームワークを作成する‣ まずはシンプルな2段組レイアウトに挑戦‣ ヘッダー‣ コンテント‣ サイドバー‣ フッター‣ ポピュラーな2つの方法‣ float‣ position
  3. 3. ボックスモデル‣ CSSでは全ての要素を長方形のボックスを単位として考える‣ ブラウザの画面の中で積み木をしている感覚‣ いままで学んできたHTMLのほとんど要素(ブロックレベル要素)はその周囲に見えない長方形のボックスを持っていた‣ ボックスの周囲の余白、枠線、背景に様々なプロパティを与えることで様々なスタイルを実現する
  4. 4. ボックスモデル‣ コンテント‣ 要素の内容そのもの‣ border‣ 要素を取り囲む枠線‣ padding‣ コンテントとボーダーまでの余白‣ magin‣ 隣接する他のボックス要素とボーダーまでの余白
  5. 5. ボックスモデル要素の内容 (コンテント)marginpaddingborder隣接するボックスとの境界
  6. 6. ボックスモデル‣ marginとpaddingの値の設定‣ 余白の値は一般サイズ(em, pt, px, %など)で指定する‣ 複数の値をスペースで区切ってまとめて記述できる‣ 値の記述数‣ 1:上下左右をまとめて設定‣ 2:上下、左右の順に設定‣ 3:上、左右、下‣ 4:上、右、下、左の順で設定。(上から時計まわり)
  7. 7. ボックスモデル‣ borderのプロパティ‣ 3つのプロパティを持つ‣ border-width:枠線の幅‣ border-color:枠線の色‣ border-style:枠線の種類‣ none、solid、double、dotted、dashed、groove、inset、outset、ridge
  8. 8. セレクタ詳細
  9. 9. セレクタ詳細‣ セレクタは、単に要素名を指定するだけでなく、様々な指定の方法が存在する‣ 最初から全部を記憶するのは大変ですが、ちょっとずつ身につけていきましょう
  10. 10. classとid‣ class属性‣ 要素名の後ろに"."をつけて、その後のクラス名をつける‣ クラス属性はHTMLのタグに「class="hoge"」という属性で指定される‣ id属性‣ 要素名の後ろに"#"をつけて、その後のクラス名をつける‣ クラス属性はHTMLのタグに「id="hoge"」という属性で指定される‣ 同じid属性はひとつのHTMLファイルの中で1回のみ使用可
  11. 11. div と span‣ divとspanで選択範囲をまとめる‣ div要素やspan要素で複数の要素を囲むことによって、一定の範囲にまとめてスタイルを指定することができる‣ divやspan要素は、classやidによってCSSから識別する<div class=”myclass”> ... </div><div id=”myid”> ... </div>.myclass {...}#myid {...}
  12. 12. div と span‣ div要素 - 高度なスタイル指定の基本となる‣ ページ内の機能の応じてHTMLを区分分けする‣ ヘッダ‣ フッタ‣ メニューバー‣ サイドバー ...etc‣ 段組に応用
  13. 13. CSSレイアウト
  14. 14. CSSレイアウト‣ より高度なCSSの活用‣ CSSを利用したページ全体のレイアウト‣ いくつかの方法を紹介
  15. 15. ベースとなるHTMLの作成‣ ベースとなるHTMLファイルを下記からダウンロードします‣ 最低限のHTMLとCSSの設定があらかじめ行われています‣ ダウンロード先‣http://goo.gl/jWOzk
  16. 16. ベースとなるHTMLの作成<!DOCTYPE HTML><html><head><title>CSSレイアウトのテンプレート</title><meta charset="UTF-8" /><link href="css/style.css" rel="stylesheet" media="all" /></head><body><div id="header">...</div><div id="sidebar">...</div><div id="content">...</div><div id="footer">...</div></body></html>
  17. 17. 目標とするレイアウトのワイヤーフレーム‣ 目標とするレイアウトHeaderContent SidebarFooter
  18. 18. 方法A:サイドバーの浮動化‣ CSSのfloatプロパティを利用して、段組を作成する方法‣ 各レイアウトのセグメントごとに、ブロックを作成‣ div要素を使用する‣ divに囲まれた内容をひとつのまとまりとして扱う‣ 4つのブロックに分けて、それぞれにid属性を指定する‣ header‣ sidebar‣ content‣ footer
  19. 19. 方法A:サイドバーの浮動化‣ body要素の中身を3つのid要素に分ける....(略)....<body><div id="header"><p>ヘッダー</p></div><div id="sidebar"><p>サイドバー</p></div><div id="content"><p>メインコンテンツ</p></div><div id="footer"><p>フッター</p></div></body>....(略)....
  20. 20. 方法A:サイドバーの浮動化‣ スタイルシートを作成‣ まずヘッダーとフッターのスタイルを定義する
  21. 21. 方法A:サイドバーの浮動化‣ #headerと#footerに、スタイルを設定#header {padding: 20px;background: #ccc;}#footer {padding: 20px;background: #ccc;}
  22. 22. 方法A:サイドバーの浮動化‣ サイドバーを浮動化する‣ floatプロパティを使用‣ 左右どちらかにサイドバーを配置する‣ HTMLファイル内では、sidebar要素は必ずcontent要素の前になくてはならない
  23. 23. 方法A:サイドバーの浮動化‣ sidebarを浮動化する#header {padding: 20px;background: #ccc;}#sidebar {float: right;width: 30%;background: #999;}#footer {padding: 20px;background: #ccc;}
  24. 24. 方法A:サイドバーの浮動化
  25. 25. 方法A:サイドバーの浮動化‣ まだちょっと変‣ メインコンテンツがサイドバーの下に回り込んでしまっている‣ contentの右側にマージンを指定することで解決できる‣ サイドバーの幅より かに広くcontent右のマージンをとることで、コラムの間に余白を生成する
  26. 26. 方法A:サイドバーの浮動化‣ サイドバーを浮動化する#header {padding: 20px;background: #ccc;}#sidebar {float: right;width: 30%;background: #999;}#content{margin-right: 32%;}#footer {padding: 20px;background: #ccc;}
  27. 27. 方法A:サイドバーの浮動化
  28. 28. 方法B:ダブルフロート‣ 方法Aの欠点‣ サイドバーを浮動化する際には、必ずHTMLファイル上では、コンテンツより前に記述する必要がある部分‣ CSSが使用できない環境 (携帯、読み上げソフトの使用など)の場合、コンテンツより先にメニューが来てしまう‣ 文書構造としてあまり良くない
  29. 29. 方法B:ダブルフロート‣ floatを用いて、この問題を解決する方法‣ ダブルフロート‣ 段組の左右を両方ともfloat属性で浮動化させる‣ HTMLの順番に影響されず、左右の配置をコントロールできる
  30. 30. 方法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>....(略)....
  31. 31. 方法B:ダブルフロート‣ CSSの変更‣ contentのfloat属性を設定:右 (right) に‣ contentの幅を設定 (70%)‣ sidebarのfloat属性を設定: 右 (right) に‣ sidebarの幅を設定 (30%)‣ footerの手前でコラム設定をクリアする必要がある‣ fotterのclear属性を設定:both
  32. 32. 方法B:ダブルフロート#header {padding: 2%;background: #ccc;}#content{float: right;width: 70%;}#sidebar {float: right;width: 30%;background: #999;}#footer {clear: both;padding: 2%;background: #ccc;}
  33. 33. 方法B:ダブルフロート
  34. 34. ‣ さらに body の margin を 0 にする方法B:ダブルフロートbody {! margin:0;}#header {padding: 2%;background: #ccc;}#content{float: right;width: 70%;}#sidebar {float: right;width: 30%;background: #999;}#footer {clear: both;padding: 2%;background: #ccc;}
  35. 35. 方法B:ダブルフロート
  36. 36. ‣ 各要素の余白(margin, padding)を微調整方法B:ダブルフロートbody {! margin:0;}#header {padding: 2%;background: #ccc;}#content{float: right;width: 66%;! padding:2%;}#sidebar {float: right;width: 26%;! padding: 2%;background: #999;}#footer {clear: both;padding: 2%;background: #ccc;}
  37. 37. 方法B:ダブルフロート
  38. 38. 方法B:ダブルフロート‣ ようやく整ったレイアウトのページが出来た!‣ この方法が段組の基本‣ あとは、この組合せ

×