プログラミング基礎 I

第八回 (2011年 5月 30日)

XHTML と CSS

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

Martin J. Dürst

ミニテスト

今日の予定

ミニテスト
前回の宿題とまとめ
XHTML 用スタイル設定:
- 外部スタイルシート (external stylesheet)
- 内部スタイルシート (internal stylesheet)
- style 属性

前回の宿題

自分が作りたい本格的な 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 でのスタイル設定

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

style 属性
内部スタイルシート (internal stylesheet)
外部スタイルシート (external stylesheet)

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

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

style 属性、内部スタイルシート、外部スタイルシート (投稿不要)

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

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

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

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

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

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