プログラミング基礎 I

第九回 (2006年 6月 19日)

XHTML と CSS

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

Martin J. Dürst

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

先週のミニテスト

先週の宿題

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

先週のまとめ

XHTML は HTML を XML の文法を緊密に守るように作り直したもの
XHTML の外枠は XML 宣言、DOCTYPE 宣言、そして XHTML 名前空間のついた <html> 要素からなる
名前空間 (namespace) は同じ名前の要素・属性 (同名異義要素・属性) を区別する
XHTML の文書は <head> (Web ページについての情報) と <body> (Web ページそのもの) からなる

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>

`<h1>` から `<h6>`

<h1> は大見出し (大体一ページあたり一個)
<h2> は中見出し
<h3> は小見出し
<h4>~<h6> はそれより小さい見出し

`<p>` と `<div>` の理想な使用例

<div>
  <h1>Chapter 1</h1>
  <p>This is the intro to Chapter 1</p>
  <div>
    <h2>Section 1.1</h2>
    <p>Text of Section 1.1</p>
    <p>More text...</p>
  </div>
  <div>
    <h2>Section 1.2</h2>
    <p>Text for Section 1.2...</p>
  </div>
</div>

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

一般の XML ファイルの場合にはスタイルシート処理命令を使う:
<?xml-stylesheet href="mystyle.css" type="text/css"?>
XHTML の場合には <head> 内の <link> 要素を使う (複数可):
<link href="mystyle.css" rel="stylesheet" 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 の殆どの要素に class 属性が使える
class 属性の値として複数のクラスを空白で分けて列挙できる
例: <p class='warning important'>This is an important warning.</p>
class 属性によって、XHTML の要素を更に使い分けることができる
クラスの名前はできるだけ見栄えではなく、構造、内容の意味に近いものにした方がよい:
悪い例: class='red'
良い例: class='warning'

CSS のクラス選択子

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, navigation)
- 要素の内容に関するもの
質別子はできるだけ見栄えではなく、構造、内容の意味に近いものにした方がよい:
悪い例: id='top'
良い例: id='navigation'

CSS の識別子選択子

CSS の識別子選択子は # から始まる:

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

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

div#navigation { float: left; }

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

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

外部スタイルシート、内部スタイルシート、style 属性、クラス指定、識別子指定

(投稿不要)

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

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

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

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

6月25日 (日曜日) の 23:55 までに Moodle に投稿。