プログラミング基礎 I

第四回 (2008年 5月12日)

CSS の基本機能

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

Martin J. Dürst

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

AGU

© 2006-8 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 に対して letter-style.css というスタイルシートを付けて、次のようにスタイルを指定してください。

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

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

演習 2: 自由なスタイル

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

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

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

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

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

締切: 2008年 5月16日 (金曜日) 22:00

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

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