プログラミング基礎 I

第九回 (2008年 6月16日)

XHTML と CSS

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

Martin J. Dürst

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

今日の予定

ミニテスト
先週の宿題とまとめ
XHTML 用スタイル設定:
- 外部スタイルシート (external stylesheet)
- 内部スタイルシート (internal stylesheet)
- style 属性
XHTML 用選択子 (selector)
- クラス (class) 選択子
- 識別子 (id) 選択子

ミニテスト

先週の宿題

自分が作りたい本格的な Web ページの内容を考えてください。
授業中の他の学生に見せてもいい内容にしてください。
良い Web ページはどういう Web ページなのかを考えてください。

先週のまとめ

XHTML は HTML を、XML の文法を緊密に守るように作り直したもの
XHTML の外枠は XML 宣言、DOCTYPE 宣言、そして XHTML 名前空間のついた <html> 要素からなる
名前空間 (namespace) は同じ名前の要素・属性 (同名異義要素・属性) を区別する
XHTML の文書は <head> (Web ページについての情報) と <body> (Web ページ本体) からなる
<head> には <title> が不可欠
<body> の主な要素は <div>, <p>, <h1> から <h6>, <ul>, <ol>, <dl> など

XHTML の外枠の例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>

XHTML 用の外部スタイルシート

一般の XML ファイルの場合にはスタイルシート処理命令を使う:
<?xml-stylesheet href="mystyle.css" type="text/css"?>
XHTML の場合には <head> 内の <link> 要素を使う (複数可):
<link rel="stylesheet" href="mystyle.css" type="text/css" />

XHTML の内部スタイルシート

<head> 内の <style> 要素を使う:

<style type='text/css' media='screen, print'>
    h1 { color: green; }
    p  { color: blue; }
</style>

注意: 内部より外部のスタイルシートが好ましい

`style` 属性

<html>, <body>, そして <body> 内の要素に style 属性がある
style 属性の中身はスタイル規則の { } の中身と同じ (選択子は不要)

<p style="color: blue; border: solid red;"
   >This text will be blue,
    with a red border!</p>

注意: スタイル属性よりスタイルシートでの指定が好ましい

XHTML の `class` 属性

XHTML の要素が限定されているが、XML みたいにもっと自由度が欲しい
そのために XHTML に class 属性がある
class 属性によって、XHTML の要素を更に使い分けることができる
class 属性に複数のクラスを列挙できる
例: <p class='warning important'>This is an important warning.</p>
クラスの名前は見栄えではなく、構造、内容の意味の方がよい:
悪い例: class='red'
良い例: class='warning'

CSS のクラス選択子

class をスタイルの出発点にも使える

CSS のクラス選択子は . で開始:

.warning { color: red; }
.important { font-size: 200%; }

クラス選択子は他の選択子と組み合わせ可能:

p.warning { color: red; }
h1.warning { color: purple; }

XHTML の `id` 属性

一つだけの要素を識別したいときがある
XHTML に id 属性が使える
同じ id 属性値はある Web ページ内に一回しか使えない
例: <div id='header'></div>
属性値としてよく使うもの:
- 番号みたいなもの (例: ab2349874)
- ページ内の役割を示す名前 (例: header)
- 要素の内容に関するもの
識別子は構造、内容の意味に近い方がよい:
悪い例: id='top'
良い例: id='navigation'

CSS の識別子選択子

CSS の識別子選択子は # で開始:

#navigation { float: left; color: blue; }
#ab2349874  { font-size: 120%; }

識別子選択子は他の選択子と組み合わせ可能:

div#navigation { float: left; }

まとめ: XHTML でのスタイル設定

上向き (bottom-up) スタイル設計の流れ:

style 属性
内部スタイルシート (internal stylesheet)
- クラス (class) 選択子
- 識別子 (id) 選択子
外部スタイルシート (external stylesheet)

演習 1: XHTML のスタイル設定を試す

簡単な Web ページを使って、XHTML の様々なスタイル設定の方法を試してみて下さい:

style 属性、内部スタイルシート、外部スタイルシート、 class 属性・指定、id 属性・指定

(投稿不要)

演習 2: 本格的な Web ページとスタイル

本格的な Web ページを作って、スタイルを用意してください。

アップロードの都合のため、内部スタイルシートを使ってください。

授業中の他の学生に見せてもいい内容にしてください。

授業で習ってない要素は使う必要がない。

6月20日 (金曜日) の 22:00 までに Moodle に投稿。