プログラミング基礎 I

第三回 (2009年 4月27日)

初めてのスタイルシート

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

Martin J. Dürst

AGU

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

目次

先週のまとめ

Moodle への登録

先週の宿題

宿題 1~4 の最終結果:

今までの XML の問題点

⇒ 別の仕組みが必要

⇒ これはスタイルシート

スタイルシートの仕組み

スタイルシート言語 CSS

CSS - Cascading Style Sheets

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

1996 年12月: W3CCSS 1 を勧告

1998 年 4月: W3CCSS 2 を勧告 (日本語)

現在 CSS 2.1 と CSS3 が開発中

CSS の特徴

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

CSS の基本的な書き方

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

selector { property: value; }

CSS の指定の例 (1)

Title { color: blue; }

CSS の指定の例 (2)

Text { display: block; }

display 特性

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

他によく使う特性

CSS の指定をまとめて書く

CSS で日本語を使うには

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

演習 2: スタイルの指定

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

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

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

演習 3

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

ヒント: 第一回で作った英語の XML と第二回で作った日本語の XML の両方に同じスタイルシートを使ってもよい

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

締切: 2009年 5月1日 (金曜日) 22:00

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

提出の内容: 演習 2 で作ったスタイルシート (XML は提出しない)