1. 情報編集(Web)
第６回：CSS入門 - ２
ボックスモデルを理解する
2013年5月14日
東京藝術大学 芸術情報センター(AMC)
担当：田所淳

2. 先週の復習
CSSによる文字のデザイン

3. 先週の復習
‣ とりあえず、これだけは憶えたい！
プロパティー 値 内容
color 色の値 フォントの色
background-color 色の値 背景の色
font-size 長さの値 フォントの大きさ
font-weight
100∼900,
normal, bold,
フォントの太さ
line-height 長さの値 行間の大きさ
text-align left, center, light, justify 行 え

4. 先週の復習
‣ 色と長さの値
単位 値
色
• 色の名前 (red, blue, yellow, white...etc.)
• 16進数でRGBの値 (#000000 ∼ #ffffff)
長さ
• em：1文字分の大きさが1em
• % ：パーセント指定
• pt：ポイント (72pt = 1in)
• px：ピクセル (画面上の最小単位)

5. ボックスモデル

6. ボックスモデル
‣ CSSでは全ての要素を長方形のボックスを単位として考える
‣ ブラウザの画面の中で積み木をしている感覚
‣ いままで学んできたHTMLのほとんどタグ(ブロックレベル要
素)は、その周囲に見えない長方形のボックスを持っていた
‣ ボックスの周囲の余白、枠線、背景に様々なプロパティを与え
ることで様々なスタイルを実現する

7. ボックスモデル
‣ 例えば、東京芸術大学のトップページもボックス(長方形)の集
合から構成されている

8. ボックスモデル
‣ Webページのほとんどの要素は、ボックス(長方形)の集合か
らなりたっている
‣ この最小単位を組み合わせて、レイアウトをしていく
‣ この最小単位のボックスを、ボックスモデルという
‣ 重要となる要素は3つ！
‣ margin
‣ padding
‣ border

9. ‣ ボックスモデル
ボックスモデル
要素の内容 (コンテント)
margin
padding
border
隣接するボックスとの境界

10. ボックスモデル
‣ コンテント
‣ 要素の内容そのもの
‣ border
‣ 要素を取り囲む枠線
‣ padding
‣ コンテントとボーダーまでの余白
‣ magin
‣ 隣接する他のボックス要素とボーダーまでの余白
‣ padding、margin 余白のサイズを調整して、レイアウトを
整えていく
‣ border の線の太さ、線の種類、色、を調整して枠線をデザイ
ンする

11. ボックスモデル
‣ margin, padding, borderは、上下左右を個別に設定できる
プロパティ 適用される場所
margin-top
padding-top
border-top
上
margin-right
padding-right
border-right
右
margin-bottom
padding-bottom
border-bottom
下
margin-left
padding-left
border-left
左

12. ボックスモデル
‣ 上下左右を一括して設定することも可能
‣ 余白の値は一般サイズ(em, pt, px, %など)で指定する
‣ 複数の値をスペースで区切ってまとめて記述できる
値の記述数 設定される方向
1 上下左右をまとめて設定
2 上下、左右の順に設定
3 上、左右、下の順に設定
4 上、右、下、左の順で設定。(上から時計まわり)

13. ボックスモデル
‣ borderのプロパティー
‣ 幅 (width)、色 (color)、形 (style) を設定できる
プロパティ 設定できる値
border-width 大きさの単位
border-color 色の単位
border-style
none, dotted, dashed, solid, double, groove, ridge,
inset, outset
一括指定 width style color の順で設定する

14. より詳細なセレクタの指定
‣ 文脈セレクタ
‣ li em {color: #369;}
‣ li < em {color: #369;}
‣ h2 + p {color: #369;}
‣ classとid
‣ p.note {color: red;}
‣ p#note1 {color:red;}
‣ 疑似クラスセレクタ
‣ a:link {color: #00f}
‣ a:visited {color: #999}
‣ a:hover {color: #f90}

15. より詳細なセレクタの指定
‣ 子孫要素に適用
‣ 複数のセレクタを半角スペースで区切って列挙する
‣ ある特定の要素タイプの子孫要素であるときにだけ適用さ
れる
‣ 直接の子要素にだけ適用
‣ 複数のセレクタを">"で区切って列挙する
‣ 直接の子要素にだけ適用される
‣ 兄弟要素に適用
‣ 複数のセレクタを"+"で区切って列挙する
‣ 同じ親要素を持つ「兄弟」要素にだけ適用される

16. classとid
‣ class属性
‣ 要素名の後ろに"."をつけて、その後のクラス名をつける
‣ クラス属性はHTMLのタグに「class="hoge"」という属
性で指定される
‣ id属性
‣ 要素名の後ろに"#"をつけて、その後のクラス名をつける
‣ クラス属性はHTMLのタグに「id="hoge"」という属性で
指定される
‣ 同じid属性はひとつのHTMLファイルの中で1回のみ使用
可

17. 疑似クラスセレクタ
‣ 疑似クラスセレクタ
‣ 名前や属性には関係なく、状況によって変化するセレクタ
‣ a要素のリンク設定が代表的
‣ :link →未訪問のURIへのリンク
‣ :visited →訪問済のURIへのリンク
‣ :actice →選択中のリンク
‣ :hover →現在マウスがその上に来ている要素

18. スタイルの設計
‣ 効果的なスタイルの設計
‣ CSS読み込みの優先順位を利用して管理のし易いスタイルを
設計する
‣ サイト全体の共通スタイル
‣ プロジェクトのスタイル
‣ その文書特有のスタイル
‣ 特定の要素固有のスタイル

19. 出力メディアに応じた使いわけ
‣ スタイルシートを表示するメディアに応じて振り分けることが
できる
‣ link要素のmedia属性で設定する
‣ CSSの"@media"というセレクタを用いても設定可能
(CSS2以降)
‣ メディアの種類
‣ all：全てのメディアに適用(デフォルト)
‣ aural：音声読み上げに適用
‣ handheld：PDAなどの携帯端末に適用
‣ print：印刷出力に適用
‣ screen：一般的なカラーモニタに適用
‣ tv：テレビなどに適用

20. ポジショニング
‣ ボックスの幅・高さや、テキストの回り込みなど設定できる
‣ width：ボックスのコンテント部分の幅
‣ 一般サイズ、auto
‣ height：ボックスのコンテント部分の高さ
‣ 一般サイズ、auto
‣ float：テキストの回り込みの設定
‣ left, right, none
‣ clear：テキス回り込みの解除
‣ left, right, none, both
‣ position
‣ top, bottom, left, right

21. div と span
‣ divとspanで選択範囲をまとめる
‣ div要素やspan要素で複数の要素を囲むことによって、一定
の範囲にまとめてスタイルを指定することができる
‣ 高度なスタイル指定の基本となる
‣ ページ内の機能の応じてHTMLを区分分けする
‣ ヘッダ
‣ フッタ
‣ メニューバー
‣ サイドバー ...etc
‣ 段組に応用 → 次週以降に