プログラミング基礎 I

第九回 (2007年 6月18日)

XHTML と CSS

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

Martin J. Dürst

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

AGU

© 2006-7 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 の class 属性

CSS のクラス選択子

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

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

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

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

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

XHTML の id 属性

CSS の識別子選択子

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

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

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

div#navigation { float: left; }

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

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

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

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

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

(投稿不要)

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

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

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

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

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

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