プログラミング基礎 I

第三回 (2007年 5月 7日)

初めてのスタイルシート

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

Martin J. Dürst

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

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

目次

• 先週のまとめと宿題の提出
• スタイルシートの基礎
• スタイルシートの演習

先週のまとめ

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

Moodle への登録

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

先週の宿題

宿題 1~4 の最終結果:

• <to> に自分の名前 (氏名) が番号 (例: &#xABCD;) で書かれていますか。
• <from> は Martin J. Dürst になっていますか。
• 残りの要素名、属性名、テキストは日本語になっていますか。
• 文字符号化は UTF-8 になっていますか。
• XML 宣言は実際の文字符号化に合っていますか。
• 文書を拡張しましたか (テクストの追加、属性の追加、要素の追加)。
• 結果が正しいかどうかを IE で確認しましたか。
• ファイルの拡張子が .xml ですか。

スタイルシートの役割

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

スタイルシート言語 CSS

CSS - Cascading Style Sheets

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

1996 年12月: W3C が CSS1 を勧告

1998 年 5月: 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 文書を作って、同じスタイルシートを適用してください

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

締切: 2007年 5月13日 (水曜日) 22:00

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

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