プログラミング基礎 I

第四回 (2007年 5月14日)

CSS の基本機能

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

Martin J. Dürst

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

AGU

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

目次

先週のまとめ

先週の演習の教訓

色の指定

書体 (フォント) の指定

CSS の長さの単位

長さの単位の例: 20pt, 1.2em, 150%

長さの単位の例: 20pt, 1.2em, 150%

長さの単位の例: 20pt, 1.2em, 150%

違う大きさの文字のところに font-size を適応

長さの使用できる特性

XML の木構造: 親と子

スタイルの継承

CSS の箱モデル

(box model)

箱モデルの図

箱モデルの図: 外側は margin、その内側に border、その内側 (文書などに一番近いところに) padding

演習 1: 特定なスタイルの指定

文書 bookletter.xml に対して次のようにスタイルを指定してください。

段落 (<text>) は文字の大きさは 20pt、背景の色 #00bfff, padding 20%,
青の border 10%、margin は上下それぞれ 10pxで、左右は 2em.

注意する文節など (<special>) は大きさは 120%、色は 赤、背景色は #ff69b4,
斜体の太文字、padding 10%, 赤の border 15%, margin 上下 10%、左右 30%

演習 2: 自由なスタイル

演習 1 の例をベースに、もっと面白くて綺麗なスタイルにする。

スタイルシートの名前は必ず letter-style.css

演習 3: 他のスタイル指定

他にスタイル指定として欲しい物は何なのでしょうかを考えて、次回に提案して下さい。

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

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

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

提出の内容: 演習 2 でできたスタイルシート letter-style.css