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

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

先週の復習‣ とりあえず、これだけは憶えたい！

プロパティー 値 内容

color 色の値 フォントの色

background-color 色の値 背景の色

font-size 長さの値 フォントの大きさ

font-weight 100～900, normal, bold, フォントの太さ

line-height 長さの値 行間の大きさ

text-align left, center, light, justify 行揃え

先週の復習‣ 色と長さの値

単位 値

色 • 色の名前 (red, blue, yellow, white...etc.)• 16進数でRGBの値 (#000000 ～ #ffffff)

長さ

• em：1文字分の大きさが1em• % ：パーセント指定• pt：ポイント (72pt = 1in)• px：ピクセル (画面上の最小単位)

ボックスモデル

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

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

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

ボックスモデル‣ Webページのほとんどの要素は、ボックス(長方形)の集合からなりたっている

‣ この最小単位を組み合わせて、レイアウトをしていく‣ この最小単位のボックスを、ボックスモデルという

‣ 重要となる要素は3つ！‣ margin‣ padding‣ border

‣ ボックスモデル

ボックスモデル

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

margin

padding

border

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

ボックスモデル‣ コンテント‣ 要素の内容そのもの

‣ border‣ 要素を取り囲む枠線

‣ padding‣ コンテントとボーダーまでの余白

‣ magin‣ 隣接する他のボックス要素とボーダーまでの余白

‣ padding、margin 余白のサイズを調整して、レイアウトを整えていく

‣ border の線の太さ、線の種類、色、を調整して枠線をデザインする

ボックスモデル‣ margin, padding, borderは、上下左右を個別に設定できる

プロパティ 適用される場所

margin-toppadding-topborder-top

上

margin-rightpadding-rightborder-right

右

margin-bottompadding-bottomborder-bottom

下

margin-leftpadding-leftborder-left

左

ボックスモデル‣ 上下左右を一括して設定することも可能‣ 余白の値は一般サイズ(em, pt, px, %など)で指定する‣ 複数の値をスペースで区切ってまとめて記述できる

値の記述数 設定される方向

1 上下左右をまとめて設定

2 上下、左右の順に設定

3 上、左右、下の順に設定

4 上、右、下、左の順で設定。(上から時計まわり)

ボックスモデル‣ borderのプロパティー‣ 幅 (width)、色 (color)、形 (style) を設定できる

プロパティ 設定できる値

border-width 大きさの単位

border-color 色の単位

border-style none, dotted, dashed, solid, double, groove, ridge, inset, outset

一括指定 width style color の順で設定する

より詳細なセレクタの指定‣ 文脈セレクタ‣ 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}

より詳細なセレクタの指定‣ 子孫要素に適用‣ 複数のセレクタを半角スペースで区切って列挙する‣ ある特定の要素タイプの子孫要素であるときにだけ適用される

‣ 直接の子要素にだけ適用‣ 複数のセレクタを">"で区切って列挙する‣ 直接の子要素にだけ適用される

‣ 兄弟要素に適用‣ 複数のセレクタを"+"で区切って列挙する‣ 同じ親要素を持つ「兄弟」要素にだけ適用される

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

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

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

疑似クラスセレクタ

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

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

出力メディアに応じた使いわけ‣ スタイルシートを表示するメディアに応じて振り分けることができる‣ link要素のmedia属性で設定する‣ CSSの"@media"というセレクタを用いても設定可能(CSS2以降)

‣ メディアの種類‣ all：全てのメディアに適用(デフォルト)‣ aural：音声読み上げに適用‣ handheld：PDAなどの携帯端末に適用‣ print：印刷出力に適用‣ screen：一般的なカラーモニタに適用‣ tv：テレビなどに適用

ポジショニング‣ ボックスの幅・高さや、テキストの回り込みなど設定できる‣ width：ボックスのコンテント部分の幅‣ 一般サイズ、auto

‣ height：ボックスのコンテント部分の高さ‣ 一般サイズ、auto

‣ float：テキストの回り込みの設定‣ left, right, none

‣ clear：テキス回り込みの解除‣ left, right, none, both

‣ position‣ top, bottom, left, right

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

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

‣ 段組に応用 → 次週以降に