KAWANO's PukiWiki Plus! - Lecture/JouhouC2007/6th/review の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/JouhouC2007/6th/review へ行く。

TITLE:前回の復習
*前回の復習 [#k959e80e]

**前回の内容 [#z94576bf]
前回は、CSS (Cascading Style Sheet)を使った、
Webページの表現を実習しました。

**おさらい: CSSとは [#ze27efd4]
***情報の「かたち」と「視覚」のデザイン [#s8260148]
HTML (Hyper Text Markup Language) とは、
「見出し」や「段落」といった文書の構成要素を、
タグを使って文書に指定する、
「''情報のかたち''」を表現するための、道具でした。

しかし、HTMLは、もともと構造を表現するものであり、
表現（視覚的なデザイン）には機能的な限界があります。

そこで、「情報のかたち＝構成要素」を
具体的にどう表現するかを指定するために、
''「スタイルシート」''という技術があります。
スタイルシートを使えば、次のようなメリットがあります。
--ひとつの文書を「構造」と「表現」に分けて管理できる
--複数の文書のデザインを統一できる
--多彩な表現が可能になり、作者の意図した表現を提供できる

***CSS [#l6f49fd9]
HTMLで、
スタイルシート（情報のかたちの表現）をする方法として、
''CSS (Cascading Style Sheet)'' があります。

CSSでは、スタイルを指定する対象（構成要素など）を選び、
スタイルの種類や値を設定します。
次のように、記述します。
#pre(novervatim){{
COLOR(red):セレクタ {プロパティ:値}
}}

「''セレクタ''」とは、
スタイルを指定する要素を指定する部分です。
「{...}」のカッコ内で指定したスタイルが適用されます。
「''プロパティ''」とは、
適用するスタイルの種類です。
色やフォントなどの種類を指定します。
「:」（コロン）で区切って、設定する「''値''」を指定します。

たとえば、次はh1要素に「文字を赤くする」というスタイルを指定するものです。
#pre(novervatim){{
COLOR(red):h1 {color: #ff0000}
}}



&br;
&navi2(Lecture/JouhouC2007/6th,next);進んで、
今回の内容を見てください。
----
#navi2(Lecture/JouhouC2007/6th,toc,next)