プログラミング基礎 I

第三回 (2008年 4月 28日)

初めてのスタイルシート

http://www.sw.it.aoyama.ac.jp/2008/PB1/lecture3.html

Martin J. Dürst

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

先週のまとめ

XML の一番大切な「部品」は要素と属性
XML 宣言で文字符号化が指定できる
指定した文字符号化と実際の文字符号化が合わないとだめ (文字化け)
文字符号化と関係なく、ꯍ のようにユニコードの番号で世界の文字を XML 文書に書き込める
要素名や属性名にもローマ字以外の文字が使える
XML の一番大切な「部品」は要素と属性

Moodle への登録

Moodle には必ず登録
宿題は必ず出す

先週の宿題

宿題 1~4 の最終結果:

<to> に自分の名前 (氏名) が番号 (例: ꯍ)
<from> は Martin J. Dürst
残りの要素名、属性名、テキストは日本語
文字符号化は UTF-8
XML 宣言は実際の文字符号化に一着
ファイルの拡張子が .xml
結果が正しいかどうかを IE で確認

スタイルシートの役割

XML はデータの記述
同じデータは色々な風に表示したい (例: 印刷用、ウェブページ用、超小型ウェブページ用、読み上げ用など)
表示の詳細は流行によって変わることもある
データの内容と見栄えを別々に指定したい
見栄えの記述はスタイルシートで行う

スタイルシート言語 CSS

CSS - Cascading Style Sheets

1994 年から Håkon Wium Lie と Bert Bos が開発

1996 年12月: W3C が CSS1 を勧告

1998 年 4月: W3C が CSS2 を勧告 (日本語)

現在 CSS2.1 と CSS3 が開発中

CSS の特徴

記述が簡単
ウェブページを主な目的として、結果が柔軟に状況に対応
主に HTML 用に設計されていたが、XML にも応用
指定の組み合わせ、スタイルシートの組み合わせが簡単
例:
- 会社全体のスタイルシート
- 部署のスタイルシート
- 一部のページ専用のスタイルシート
- ページ固有のスタイル指定
- ページの一部のスタイル指定

XML でスタイルシートを指定

XML でどのスタイルシートを使うかを指定しないといけない
指定は「処理命令」(PI, Processing Instruction) で行う
例:
<?xml-stylesheet href="my-style.css" type="text/css"?>
この処理命令は最初の要素 (ルート要素) の前でないといけない
この処理命令以外、処理命令は使わない方がよい

CSS の基本的な書き方

スタイル指定一つ一つは次のように書く:

selector { property: value; }

selector (セレクタ、選択子): 文書のどの部分に指定を適用するのか
property (プロパティ、特性(名)): どういう種類の指定を適用するのか
value (値、特性値): 指定の値

CSS の指定の例

Text { display: block; }

Text: 指定をテキスト要素に適用する
display: 表示の根本的な指定
block: 段落みたいなまとまった表示にする

`display` 特性

表示の根本的な指定。主な値:

block: 段落みたいなまとまった表示にする
inline: (初期値): 行の中に流し込む
none: 表示しない (場所も取らない)

他によく使う特性

font-family: serif (明朝など), sans-serif (ゴシックなど) など
font-size: small, medium, large 等、文字の大きさ
color: red, green, blue 等、文字などの色
background-color: 同上、背景の色
text-align: left (左揃え), right (右揃え), center (中央そろえ), justify (両端揃え)

CSS の指定をまとめて書く

同じ特性の場合、選択子を , で区切って指定できる。例:
Title, Text { display: block; }
同じ選択子に複数の特性が指定できる。例:
Title { display: block; color: red; }
両方のやり方を組み合わせられる。例:
Title, Text { display: block; color: red; }

CSS で日本語を使うには

XML と同様に文字符号化を指定しないといけない
指定はつぎの通り:@charset "UTF-8";
UTF-8 の時も必ず指定しないといけない
スタイルシートの先頭に指定しないといけない

演習 1: 空のスタイルシート

空のスタイルシートを作成 (拡張子は .css)
先週やその前の XML の例にスタイルシート PI を追加
IE で XML を開く:
- 以前と何が変わったか
- 要素の内容はどう表示されるか
- 属性値はどう表示されるか
- 要素名や属性名はどう表示されるか

演習 2: スタイルの指定

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

ヒント: スタイルシートの更新の時は「シフト」を押しながら「更新」した方がよい

ヒント: CSS ファイルの拡張子は .css。notepad2 で早めに保存すると見やすくなる。

演習 3

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

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

締切: 2008年 5月2日 (金曜日) 22:00

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

提出の内容: 演習 2 でできたスタイルシート