プログラミング基礎 I

第三回 (2012年 4月23日)

初めてのスタイルシート

http://www.sw.it.aoyama.ac.jp/2012/PB1/lecture3.html

Martin J. Dürst

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

目次

• 先週のまとめ
• スタイルシートの基礎
• スタイルシートの演習

来週の授業

注意: 4月30日 (昭和の日の振替日) は授業実施日

先週のまとめ

• XML の一番大切な「部品」は要素と属性
• XML 宣言で文字コードが指定可能
• 指定した文字コードと実際の文字コードが合わないとだめ (エラーまたは文字化け)
• 文字符号化と関係なく、ꯍ のようにユニコードの番号で世界の文字を XML 文書に記述可能
• 要素名や属性名にもローマ字以外の文字が使用可能

Moodle への登録

• Moodle には必ず登録
• 宿題は必ず提出

先週の宿題

宿題 1~4 の最終結果:

• <to> に自分の名前 (氏名) を番号で (例: ꯍ)
• <from> は Martin J. Dürst
• 残りの要素名、属性名、テキストは日本語
• 文字符号化は UTF-8
• XML 宣言は実際の文字符号化と一着
• ファイルの拡張子が .xml
• 結果が正しいかどうかを IE で確認

今までの XML の問題点

• 文書、データやその構造は記述可能
• 世界の様々な文字が扱える
• しかし、見栄えが悪い

⇒ 別の仕組みが必要

⇒ これはスタイルシート

スタイルシートの仕組み

• 同じデータは色々な風に表示したい
  • 印刷用
  • ウェブページ用
  • 携帯・スマートフォン用
  • 読み上げ用など
• 表示の詳細は流行によって変わる
• データの内容と見栄えを分けたい
• 見栄えの記述はスタイルシートで指定

スタイルシート言語 CSS

CSS - Cascading Style Sheets

1994 年から Håkon Wium Lie と Bert Bos が開発

1996 年12月: W3C が CSS 1 を勧告

1998 年 4月: W3C が CSS 2 を勧告 (日本語)

現在 CSS 2.1 と CSS3 が開発中

CSS の特徴

• 記述が簡単
• ウェブページを主な目的として、結果が柔軟に状況に対応
• 主に HTML 用に設計されたが、XML にも応用可能
• 指定の組み合わせ、スタイルシートの組み合わせが簡単
  例:
  • 会社全体のスタイルシート
  • 部署のスタイルシート
  • 一部のページ専用のスタイルシート
  • ページ固有のスタイル指定
  • ページの一部のスタイル指定

XML でスタイルシートを指定

• XML とスタイルシートはそれぞれ別のファイル
• XML でどのスタイルシートを使うかの指定が必要
• 指定は「処理命令」(PI, Processing Instruction) で行う
• 例:
  <?xml-stylesheet href="my-style.css" type="text/css"?>
  
• この処理命令は必ず最初の要素 (ルート要素) の前
• この処理命令以外、処理命令は使わない方がよい

CSS の指定の例 (1)

Title { color: blue; }

• Title: 指定を Title 要素に適用する
• color: 文字の色の指定
• blue: 青に指定

CSS の指定の例 (2)

Text { display: block; }

• Text: 指定をテキスト要素に適用する
• display: 表示の根本的な形状の指定
• block: 段落みたいな、まとまった表示

display 特性

表示の根本的な指定。主な値:

• block: 段落みたいなまとまった表示にする
• inline (初期値): 行の中に流し込む
• none: 表示しない (場所も取らない)

CSS の基本的な書き方

スタイル指定一つ一つは次のように書く:

selector { property: value; }

• selector (セレクタ、選択子): 文書のどの部分に指定を適用するのか
• property (name) (プロパティ、特性(名)): どういう種類の指定を適用するのか
• (property) value (値、特性値): 指定の値

他によく使う特性

• font-family: serif (明朝など), sans-serif (ゴシックなど) など
• font-size: small, medium, large 等、文字の大きさ
• color: red, green, blue 等、文字などの色
• background-color: 同上、背景の色
• text-align: left (左揃え), right (右揃え), center (中央そろえ), justify (両端揃え)

CSS の指定をまとめて書く

• 同じ特性の場合、選択子を「,」で区切って指定
  例: Title, Text { display: block; }
• 同じ選択子に複数の特性を指定
  例: Title { display: block; color: blue; }
• 両方のやり方の組み合わせ
  例: Title, Text { display: block; color: blue; }

CSS の読みやすい書き方

悪い例:

Title,Text{color:blue;display:block;text-align:justify}

よい例:

Title, Text { color: blue; display: block; text-align: justify; }

又は:

Title, Text {
    color:      blue;
    display:    block;
    text-align: justify;
}

XML の読みやすい書き方

<?xml version="1.0" ?>
<Letter date="2012-04-09">
<to>Students</to><from
>Martin</from>
<Title>Reminder</Title>
<Text>Please don't forget
your homework.</Text>
</Letter>

<?xml version="1.0" ?>
<Letter date="2012-04-09">
    <to>Students</to>
    <from>Martin</from>
    <Title>Reminder</Title>
    <Text>Please don't forget
        your homework.</Text>
</Letter>

CSS で日本語を使うには

• XML と同様に文字符号化の指定が必要
• 指定は次の通り:
@charset "UTF-8";
• UTF-8 の時も必ず指定が必要
• 指定の場所はスタイルシートの先頭

演習 1: 空のスタイルシート

• 空のスタイルシートを作成 (名前は my-style.css)
• 第一回の演習の XML の例にスタイルシート処理命令を追加
  (my-style.css の使用を指定)
• IE や Opera で XML を開いて、次の質問に答える:
  • スタイルシート無しと比べて何が変わったか
  • 要素の内容はどう表示されるか
  • 属性値はどう表示されるか
  • 要素名や属性名はどう表示されるか

演習 2: スタイルの指定

今日紹介した CSS の特性を使って、第一回の演習の XML 文書にふさわしい、面白いスタイルをつけてください。

ヒント 1: 紙の手紙の見栄えを考える

ヒント 2: Notepad2 でスタイルシートを早めに .css の拡張子で保存すると見やすい

ヒント 3: スタイルシートの更新の時は「シフト」を押しながら「更新」した方がよい

演習 3: スタイルの再利用

同じ構造の別の XML 文書を作って、同じスタイルシートを適用してください

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

締切: 2012年 4月27日 (金) 22:00

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

提出の内容: 演習 2 で作ったスタイルシート (ファイル名は my-style.css, XML は提出不要)