http://www.sw.it.aoyama.ac.jp/2006/PB1/lecture5.html
duerst@it.aoyama.ac.jp, O 棟 529号室
© 2006 Martin J. Dürst 青山学院大学
C:¥FileBox
の中に演習・宿題の結果を次の通りに入れてください。XML
の中のスタイルシートの名前を適切に合わせてください。
example4.xml
にして下さい。example4.css
にして下さい。example4fix.xml
にして下さい。example4fix.css
にして下さい。<手紙> という文書に色々スタイルを追加しましたが、まだまだ手紙らしくないところがあるでしょう。
他にスタイル指定として欲しい物は何なのでしょうか考えて、次回に提案して下さい。
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 の禅の楽園?)
(日本語訳)
今日習った CSS で「手紙」のスタイルシートを更に良くする。
最高のスタイルシートを目指してください。
ある一つ本についての情報を集めて、XML にしてください。色々な本を例えばウェブページで紹介したいことを想定してください。
これからこの情報を授業でシェアしますので、それを配慮して本を選んでください。
二人以上同じ本についてデータを集めると減点される。
本についてのデータ: