プログラミング基礎 I

第四回 (2012年 4月30日)

CSS の基本機能

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

Martin J. Dürst

前回のまとめ

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

先週の演習の教訓

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

色の指定

特性は 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, 1,..., 9, A, B, C, D, E, 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%

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

長さが使用可能な特性

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

XML の木構造: 親と子

XML 要素が入れ子構造になっている
要素の関係は「親」、「子」、「孫」、「子孫」、「祖先」などの言葉で表す
ある要素 <a> に (直接) 入れ子になっている要素  の場合 (<a>.........</a>)、
<a> は  の「親」、 は <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

締切: 2012年 5月4日 (金) 22:00

提出物: スタイルシートのみ (名前は必ず letter-style.css)

提出先: Moodle

演習 2: 自由なスタイル

演習 1 の例を改良して、もっと面白くて綺麗なスタイルを作成してください。