プログラミング基礎 I

第五回 (2008年 5月19日)

CSS の高度な使い方

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

Martin J. Dürst

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

AGU

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

目次

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

<手紙> という文書に色々なスタイルを追加しましたが、まだまだ手紙らしくないところがあるでしょう。

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

複数の値を時計回りに設定

border-top-color などの属性で細かく指定すると大変。border-color で色々な組み合わせの指定ができる:

border-style, border-width, padding, margin も同様

複数の値をまとめて設定

border-top-width, border-top-style, border-top-color をまとめて設定できる:

border-top: 3pt solid red;

border-right, border-bottom, border-left も同様

border で四辺を同時に同じように設定できる

font も似たように使える。仕様書参照

内容の追加

(現在一部ブラウザのみで実装)

<宛先> の前に To: 等を追加したいときがある。

選択子: 宛先:before 又は 宛先:after

特性と特性値: content: "To: ";

宛先:before { content: "To: "; }

属性値の表示

(現在一部ブラウザのみで実装)

属性値は普段は表示されないが、表示したいときがある。

属性値は次のように表示できる:

content: attr(date);

応用例:

Letter:before { content: "Date sent: ", attr(date); }

複数のスタイルシートの使用

複数のスタイルシートを指定できる:

スタイルシートの選択

スタイルシートでの改ページの指定

(現在一部ブラウザのみで実装)

改ページは印刷用やスライド用のスタイルシートの場合に便利 (ページ毎スライドになる)

page-break-before 属性などで指定。値の種類:

CSS の本当に高度な使い方

CSS Zen Garden (CSS の禅の楽園?)

(日本語訳)

CSS の検証

W3C の CSS Validation Service: http://jigsaw.w3.org/css-validator/

手元のあるファイルをチェックするには「アップロード」が便利

今までできること

次のステップ

演習 1: 高度な CSS

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

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

提出の内容: スタイルシート、名前は letter-style2.css にすること

今日習った CSS で「手紙」のスタイルシートを更に良くする。

最高のスタイルシートを目指してください!

演習 2: 本の情報

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

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

提出の内容: XML ファイル、名前は mybooks.xml にすること

自分が好きなある一つの本についての情報を集め、XML にする。

データの様々な使い方を想定して、できるだけ沢山の項目を含める。

これからこの情報を授業でシェアしますので、それを配慮して本を選ぶ。

提出前に Opera (又は IE) で正しい XML かどうかを必ず確認する。

二人以上同じ本についてデータを集めると減点される。

データ項目の例 (必ず純粋なデータ項目と文書を両方含めること):