プログラミング基礎 I

第五回 (2011年 5月 9日)

CSS の高度な使い方

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

Martin J. Dürst

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

目次

• 前回の演習
• 複数の特性をまとめて指定
• 内容の追加と属性の表示
• 複数のスタイルシートの使い分け
• これからの展望

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

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

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

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

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 も似たように使える (仕様書参照)

重複する指定の効果

• 重複する指定の場合あとのものが有効
• 重複の利用によって完結になる指定の例:

  border: 3pt solid red; border-top-color: blue; border-bottom-style: dashed; border-right-width: 10pt;

複数のスタイルシートの組み合わせ

• 複数の <?xml-stylesheet 処理命令:
  • 全部の指定が順番に適用
  • 重複の場合、後ほどの指定が有効
• スタイルシート (.css) で @import:
  • スタイルシートの先頭で他のスタイルシートを「輸入」
  • @import url(http://www.example.org/styles/bluish.css)
    
  • 重複の場合、「輸入する方」のスタイルシートの指定が有効
• 応用: 特有のスタイルから一般のスタイルを「輸入」

複数のスタイルシートの使い分け

<?xml-stylesheet 処理命令の属性により、スタイルシートが使い分け可能:

• media を指定するとスタイルシートの用途が限定:
  <?xml-stylesheet href="my-print-style.css"
type="text/css" media="print"?>
  値としては screen (普通の PC など)、print (印刷)、projection (スライド)、braille (点字) など
• alternate="yes" と title を指定するとブラウザによってスタイルシートが選択可能:
  <?xml-stylesheet href="my-style-fancy.css"
type="text/css" alternate='yes' title='fancy'?>

スタイルシートの選択

• F11 でスライドモードに切り替える (主に Opera)
• Shift-P などで印刷プレビューができる
• 表示→スタイルで色々なスタイルシートを選べる

内容の追加

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

応用例: <to> の前に「宛先: 」等を追加した

選択子: to:before 又は to:after

特性と特性値: content: "宛先: ";

具体例: to:before { content: "宛先: "; }

属性値の表示

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

属性値は次のように表示可能:

content: attr(date);

応用例:

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

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

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

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

page-break-before 特性などで指定

特性値の種類:

• auto: 成り行きで改ページ
• always: 必ず改ページ
• avoid: 絶対改ページしない
• left: 必ず新しいページが左に来る様に改ページ
• right: 必ず新しいページが右に来る様に改ページ

CSS の本当に高度な使い方

CSS Zen Garden (CSS の禅の楽園)

(日本語訳)

CSS の検証

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

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

今までできること

• XML でデータの構造と「意味」の自由な記述
• 純粋なデータ項目と文書の混在
• CSS でデータの見せ方の記述

次のステップ

• データ交換のための XML 文書の構造の決め方
• XML 文書の構造の記述 (DTD)
• XML 文書が DTD に合うかどうかの検証

演習 1: 高度な CSS

• 2011年 5月13日 (金曜日) 22:00 までに Moodle にアップロード
• 提出の内容: スタイルシート、名前は必ず letter-style2.css
• 今日習った CSS で「手紙」のスタイルシートを更に改良
• 最高のスタイルシートを目指してください!

演習 2: 本の情報

• 2011年 5月13日 (金曜日) 22:00 までに Moodle にアップロード
• 提出の内容: XML ファイル、名前は必ず mybook.xml
• 自分が好きなある一つの本についての情報を集め、XML で記述
• データの様々な使い方を想定し、できるだけ多くの項目を記述
• これからこの情報を授業で共有するので、それに配慮した本を選択
• 提出前に Opera (又は IE) で正しい XML かどうかを必ず確認
• 二人以上同じ本についてデータを集めると減点
• データ項目の例 (必ず純粋なデータ項目と文書を両方含めること):
  • 著者、題名、出版社、ページ数、値段など
  • 何年何月に第何版で何部印刷など
  • キーワード、概要、目次など
  • 本の紹介・評価 (点数、文書など、短い引用、強調などを含む)