プログラミング基礎 I

第三回 (2011年 4月25日)

初めてのスタイルシート

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

Martin J. Dürst

AGU

© 2006-11 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 文書にふさわしい、面白いスタイルをつけてください。

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

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

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

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

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

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

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

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

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