プログラミング基礎 I

第四回 (2006年 5月15日)

CSS の基本機能

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

Martin J. Dürst

duerst@it.aoyama.ac.jp, O 棟 529号室

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

目次

• CSS の単位
• 色や書体の指定
• スタイルの継承
• 箱モデル

先週のまとめ

• スタイルシートで XML 文書の見せ方を定義・変更できる
• CSS はウェブに一番多く使われているスタイルシート言語である
• CSS の規則の書き方は次の通り:
  selector { property: value; }
選択子 { 特性: 特性値; }

先週の演習の教訓

• 空白のスタイルシートだと要素の内容がただだらだらと続いているだけ
  ⇒ display: block; で段落の区切りを決める
• IE は日本語の要素名をうまく処理できない
  ⇒ Opera を使用する
• スタイルシートに全角スペースがあると動作しない
  ⇒ Notepad2 で「表示」→「空白表示」で確認が可能
• ファイルをダブルクリックすると予想外のソフトが出る
  ⇒ ダブルクリックしない

先週の宿題: 演習 2/3: スタイルの指定

今日紹介した CSS の特性を使って、先週の XML 文書にふさわしい、面白いスタイルをつけてください。

同じ構造の別の XML 文書を作って、同じスタイルシートを適用してください。

電子的提出

• XML 文書の名前を「example2.xml」にする。
• スタイルシートの名前を「example2.css」にする。
• XML 文書内にスタイルシートの名前も変更する。
• 二つのファイルを提出

CSS の長さの単位

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

色の指定

• 言葉で指定: 基本の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, #00FFFF

書体 (フォント) の指定

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

XML の構造: 親と子

• XML 要素が入れ子構造になっている
• この構造は「木」の形で書ける
• 情報テクノロジーの場合、木の根は上で、下へ延びる
• 要素の関係は「親」、「子」、「孫」、「祖先」などの言葉で表す

スタイルの継承

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

CSS の箱モデル

(box model)

• 表示される物は全て「箱」に入っていると考えられている
• inline 箱と block 箱がある
• 箱の内容の周りに中から外へ次の物がある:
  • padding (padding-top, padding-rigth, padding-bottom, padding-left):
    幅しか指定できない
  • border (幅 (border-width)、スタイル (border-style)、色 (border-color) が指定できる)
  • margin (margin-top, margin-rigth, margin-bottom, margin-left):
    幅しか指定できない

演習 1: XML 文書の作成

• <Letter> の <Text> 内を長くして、<paragraph> とかで段落に区切る。
  • 文書の意味は問わない。
  • 英語の要素名でも、日本語の要素名でもよい。
• 段落の中に特殊な部分 (例えば特に注意したい言葉とか文節など) を新しい要素で囲む。
• 少なくとも一か所その要素が二つ隣り合っているようにする。

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

演習一の文書に対して次のようにスタイルを指定してください。

段落は文字の大きさは 20pt、背景の色 #00bfff, padding 20%,
青の border 10%、margin は上下それぞれ 10pxで、左右は 2em.

注意する文節などは大きさは 120%、色は 赤、背景色は #ff69b4,
斜体の太文字、padding 10%, 赤の border 15%, margin 上下 10%、左右 30%

演習 3: 自由なスタイル

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

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

<手紙> という文書に色々スタイルを追加しましたが、まだまだ手紙らしくないところがあるでしょう。

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

次回のための準備

• 今日出来なかった演習を宿題として完成する
• 出来た文書を電子的に持ってくる
  (来週の授業に電子的に提出)