プログラミング基礎 I

第十回 (2012年 6月11日)

クラス、id、ハイパーリンク

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

Martin J. Dürst

AGU

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

今日の予定

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

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

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

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

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

前回のまとめ: XHTML と CSS

XHTML の class 属性

CSS のクラス選択子

class はスタイルの出発点にも使用可能

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

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

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

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

XHTML の id 属性

CSS の id 選択子

CSS の id 選択子は # で開始:

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

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

div#navigation { float: left; }

CSS の子孫選択子

(descendant selector)

子孫選択子は空白 ( ) で記述

<h2> の中の <a> 要素のスタイル (<a> は <h2> の子孫):

h2 a { color: blue; }

組み合わせの例:

#header h2 .warning { color: purple; }

(注: h2.warning と h2 .warning は別)

XHTML と CSS のまとめ

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

画像の指定

例: <img src='fuji.jpg'
alt='冬の富士山と河口湖' />

ハイパーリンクの指定

例: <a href='http://www.aoyama.ac.jp'
>青山学院大学</a>

Web アドレス (URI)

URI: Uniform/Universal Resource Identifier
(RFC 3986)

URI の種類:

URI の構造

scheme://domain.name/path1/path2/path3/document.ext?query=string#fragment

path1 から query=string まではサーバが勝手に決められる

IRI

IRI: Internationalized Resource Identifier (RFC 3987)

ローマ字だけではなく、漢字なども使用可能
(現在ほとんど全てのブラウザで対応済)

IRI の例: http://ja.wikipedia.org/wiki/青山学院大学

(URI で書くと次になる: http://ja.wikipedia.org/wiki/%E9%9D%92%E5%B1%B1%E5%AD%A6%E9%99%A2%E5%A4%A7%E5%AD%A6)

ドメイン名の国際化の例: http://恵比須駅.jp

素片識別子

(fragment identifier)

<a> と <img> の違い

ページ内の画像の配置用スタイル

演習: スタイルとリンクを生かしたウェブページ

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

先週までに作った本格的な Web ページにスタイルとリンクを追加: