プログラミング基礎 I

第九回 (2012年 6月 4日)

XHTML と CSS

http://www.sw.it.aoyama.ac.jp/2012/PB1/lecture9.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> と <body>
<head>: Web ページについての情報、<title> が不可欠
<body>: Web ページ本体、主な要素は <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月8日 (金曜日) の 22:00 までに Moodle に投稿。