プログラミング基礎 I

第四回 (2011年 5月 2日)

CSS の基本機能

http://www.sw.it.aoyama.ac.jp/2011/PB1/lecture4.html

Martin J. Dürst

© 2006-11 Martin J. Dürst 青山学院大学

目次

• 色や書体の指定
• 長さの単位
• XML の木構造
• スタイルの継承
• 箱モデル

前回のまとめ

• スタイルシートで XML 文書の見栄えが定義・変更可能
• XML 用のスタイルシートは別ファイル
  (XML ファイル内に <?xml-stylesheet... 処理命令で指定)
• CSS はウェブで一番多く使われているスタイルシート言語
• CSS ファイルの拡張子は .css
• CSS の規則の書き方は次の通り:
  

  Text { color: blue; }
selector { property: value; }
選択子 { 特性: 特性値; }

先週の演習の教訓

• XML 文書とスタイルシートは別ファイル (ファイルは合計二つ!)
• 空白のスタイルシートだと要素の内容がだらだらと続いているだけ
  ⇒ display: block; で段落に指定
• 段落の間の文書は段落に見えても text-align などの段落用の指定が無効
• スタイルシートに全角スペースがあると効果なし
  ⇒ Notepad2 で「表示」→「空白表示」で確認 (小さい赤い点が半角スペース)
• ファイルをダブルクリックすると予想外のソフトが出る
  ⇒ ダブルクリックしない

CSS の書き方

悪い例:

Title,Text{color:blue;display:block;text-align:justify}

よい例:

Title, Text { color: blue; display: block; text-align: justify; }

又は:

Title, Text {
    color:      blue;
    display:    block;
    text-align: justify;
}

色の指定

• 特性は color (文字などの色) と background-color (背景色)
• 言葉で指定: 基本の16 色: black, green, silver, lime, gray, olive, white, yellow, maroon, navy, red,
  blue, purple, teal, fuchsia, aqua
• 主なブラウザはもっと沢山の色名をサポート
• RGB で指定:
  • RGB: Red (赤), Green (緑), Blue (青) は加法混色の三原色
  • 一色の指定は 16進数の一桁 (0-F) もしくは二桁: (00-FF)
  • 指定の先頭に「#」が必要
  • 例: #F00 (R 満杯、G/B ゼロ→赤), #00FFFF

書体 (フォント) の指定

• font-family: serif (明朝など), sans-serif (ゴシックなど)、名前での指定も可
  (例: "Heisei Mincho W3"), 複数の指定をコンマで区切るとブラウザが最初に見つける指定を使う
• font-size: 書体・文字の大きさ
• font-style: normal (普通)、italic (用意された斜体)、oblique (計算された斜体)
• font-weight: normal, bold (太文字), bolder, lighter, 100, 200,..., 900
  (普通のブラウザはそこまで区別しない)

CSS の長さの単位

• 相対単位
  • em: 大文字の「M」の高さ
  • ex: 小文字の「x」の高さ
  • px: ピクセル (画素)
• パーセンテージ
  例: line-height: 120%; /* 行幅は書体の 120% */
  例: margin-width: 10%; /* 枠の幅は内容の幅の 10% */
• 絶対単位 (非推薦)
  • cm、mm
  • in (inch)、pt (point, inch の1/72, 印刷業界でよく使われる)

長さの単位の例: 20pt, 1.2em, 150%

長さの単位の例: 20pt, 1.2em, 150%

長さの単位の例: 20pt, 1.2em, 150%

違う大きさの文字の場所に font-size を適応した例

長さが使用可能な特性

• font-size: 文字の大きさ
• line-height: 行の高さ (行間を含む)
• width: あるものの幅
• height: あるものの高さ

XML の木構造: 親と子

• XML 要素が入れ子構造になっている
  
• 要素の関係は「親」、「子」、「孫」、「子孫」、「祖先」などの言葉で表す
• ある要素 <a> に (直接) 入れ子になっている要素 <b> の場合 (<a>...<b>...</b>...</a>)、
  <a> は <b> の「親」、<b> は <a> の「子」という
• この構造は「木」の形で書ける
• 情報テクノロジーの場合、木の根は上で、木が下へ伸びる

スタイルの継承

• CSS の多くの特性が XML の構造に従って継承される
• 例: Letter { color: red; }
  で手紙全体 (全ての子要素を含む) を赤にする
• 直接の指定があれば継承はしない
• 例: from { color: green; }
  で Letter の red の指定は効かなくなる
• 継承されない特性がある (例: display)

CSS の箱モデル

(box model)

• 表示されるものは全て「箱」に入っていると考えられている
• block 箱と inline 箱がある
• 箱の内容の周りに中から外へ次のものがある:
  • padding (padding-top, padding-right, padding-bottom, padding-left):
    幅しか指定できない
  • border (幅 (border-width)、スタイル (border-style)、色 (border-color) が指定可能
  • margin (margin-top, margin-right, margin-bottom, margin-left):
    幅しか指定できない
• 注: border-style の初期値は none なので、例えば solid に設定しないと枠が見えない

箱モデルの図

演習 1: 特定なスタイルの指定

文書 bookletter.xml に対して letter-style.css というスタイルシートを付けて、次のようにスタイルを指定してください。

段落 (<text>) は文字の大きさ 20pt、行幅 140%、背景の色 #00bfff, padding 0.5em,
青の border 0.1em、margin は上下それぞれ 10pxで、左右は 2em

注目したい単語 (<special>) は文字の大きさ 110%、色は 赤、背景色は #ff69b4,
斜体の太文字、padding 0.1em, 赤の border 5px, margin 上下 0.4ex、左右 0.4em

演習 2: 自由なスタイル

演習 1 の例をベースに、もっと面白くて綺麗なスタイルにする。

スタイルシートの名前は必ず my-style.css

演習 3: 他のスタイル指定

他にスタイル指定として欲しい物は何なのでしょうかを考えて、次回に提案して下さい。

演習問題・宿題のアップロード

締切: 2011年 5月 6日 (金曜日) 22:00

提出方法: Moodle にアップロード

提出の内容:

1. 演習 1 で作成したスタイルシート (ファイル名は letter-style.css)
2. 演習 2 で作成したスタイルシート (ファイル名は my-style.css)