プログラミング基礎 I

第八回 (2011年 5月 30日)

XHTML と CSS

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

Martin J. Dürst

AGU

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

ミニテスト

今日の予定

前回の宿題

先週のまとめ

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 用の外部スタイルシート

XHTML の内部スタイルシート

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

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

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

style 属性

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

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

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

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

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

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

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

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

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

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

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

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

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