http://www.sw.it.aoyama.ac.jp/2008/PB1/lecture5.html
duerst@it.aoyama.ac.jp, O 棟 529号室
© 2006-8 Martin J. Dürst 青山学院大学
<手紙> という文書に色々なスタイルを追加しましたが、まだまだ手紙らしくないところがあるでしょう。
他にスタイル指定として欲しい物は何なのでしょうか考えて、次回に提案して下さい。
border-top-color
などの属性で細かく指定すると大変。border-color
で色々な組み合わせの指定ができる:
border-color: red; /* 四辺同じ色 */border-color: red green; /*
上辺と下辺が赤、右辺と左辺が緑 */border-color: red green blue; /*
上辺が赤、下辺が青、右辺と左辺が緑 */border-color: red green blue yellow; /*
上右下左はそれそれ赤緑青黄 */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); }
複数のスタイルシートを指定できる:
media
を指定するとスタイルシートの用途が限定される:<?xml-stylesheet href="my-style.css"
type="text/css" media="print"?>screen (普通の PC
など)、print (印刷)、projection
(スライド)、braille (点字) などがあるalternate="yes" と title
を指定するとブラウザによってスタイルシートが選べる:<?xml-stylesheet href="my-style.css"
type="text/css" alternate='yes' title='fancy'?>(現在一部ブラウザのみで実装)
改ページは印刷用やスライド用のスタイルシートの場合に便利 (ページ毎スライドになる)
page-break-before 属性などで指定。値の種類:
auto: 成り行きで改ページalways: 必ず改ページavoid: 絶対改ページしないleft:
必ず新しいページが左に来る様に改ページright:
必ず新しいページが右に来る様に改ページCSS Zen Garden (CSS の禅の楽園?)
(日本語訳)
W3C の CSS Validation Service: http://jigsaw.w3.org/css-validator/
手元のあるファイルをチェックするには「アップロード」が便利
締切: 2008年 5月23日 (金曜日) 22:00
提出方法: Moodle にアップロード
提出の内容: スタイルシート、名前は
letter-style2.css にすること
今日習った CSS で「手紙」のスタイルシートを更に良くする。
最高のスタイルシートを目指してください!
締切: 2008年 5月23日 (金曜日) 22:00
提出方法: Moodle にアップロード
提出の内容: XML ファイル、名前は mybooks.xml
にすること
自分が好きなある一つの本についての情報を集め、XML にする。
データの様々な使い方を想定して、できるだけ沢山の項目を含める。
これからこの情報を授業でシェアしますので、それを配慮して本を選ぶ。
提出前に Opera (又は IE) で正しい XML かどうかを必ず確認する。
二人以上同じ本についてデータを集めると減点される。
データ項目の例 (必ず純粋なデータ項目と文書を両方含めること):