プログラミング基礎 I

第三回 (2011年 4月25日)

初めてのスタイルシート

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

Martin J. Dürst

先週のまとめ

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 が CSS 1 を勧告

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

現在 CSS 2.1 と CSS3 が開発中

CSS の特徴

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

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

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

CSS の基本的な書き方

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

selector { property: value; }

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

CSS の指定の例 (1)

Title { color: blue; }

Title: 指定を Title 要素に適用する
color: 文字の色の指定
blue: 青に指定

CSS の指定の例 (2)

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: blue; }
両方のやり方を組み合わせられる。例:
Title, Text { display: block; color: blue; }

CSS で日本語を使うには

XML と同様に文字符号化の指定が必要
指定は次の通り:@charset "UTF-8";
UTF-8 の時も必ず指定が必要
指定の場所はスタイルシートの先頭

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

空のスタイルシートを作成 (名前は my-style.css)
第一回の演習の XML の例にスタイルシート処理命令を追加
IE や Opera で XML を開いて、次の質問に答える:
- スタイルシート無しと比べて何が変わったか
- 要素の内容はどう表示されるか
- 属性値はどう表示されるか
- 要素名や属性名はどう表示されるか

演習 2: スタイルの指定

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

ヒント 1: 紙の手紙の見栄えを考える

ヒント 2: Notepad2 でスタイルシートを早めに .css の拡張子で保存すると見やすい

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

演習 3: スタイルの再利用

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

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

締切: 2011年 4月29日 (金) 22:00

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

提出の内容: 演習 2 で作ったスタイルシート (ファイル名は my-style.css, XML は提出不要)