KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/7th/CSS の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/InfoDesignB2004/7th/CSS へ行く。

*CSS [#nbb91495]

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

CSSは、W3Cが策定しており、
1996年にCSS Level 1 (CSS1) が、1998年にCSS Level 2 (CSS2) の
2つが勧告されています。
実際に利用されているのはCSS1で、
CSS2は徐々に利用が広まっています。

この授業では、CSS1を中心に、
実用性のあるものを取り上げていきます。

**CSSの基本的な設定 [#n6641c37]
CSSでは、スタイルを指定する対象（構成要素など）を選び、
スタイルの種類や値を設定します。
次のように、記述します。

#pre(novervatim){{
COLOR(red):セレクタ {プロパティ:値}
</pre>
}}

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

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

***複数のプロパティを設定する [#ac24ba13]
複数のプロパティを設定する場合は、
「;」（セミコロン）で区切って指定できます。
複数の行で書いてもかまいません。
その場合は、それぞれのプロパティの行末に
「;」を入力するのを忘れないでください。

たとえば、次は「strong要素に、文字を赤くして、フォントサイズを大きくする」
という指定ですが、どちらも同じように表示されます。
#pre(novervatim){{
strong {COLOR(red):font: #ff0000; font-size: largeCOLOR(black):}
</pre>
}}

#pre(novervatim){{
strong {
COLOR(red):  font: #ff0000;
COLOR(red):  font-size: large;
}
</pre>
}}

***複数の要素に同じスタイルを設定する [#q2df153f]
複数の要素に、同じスタイルを設定する場合は、
セレクタで「,」を使って複数の要素を指定します。

たとえば、次は「h1要素とh2要素に、文字を青くする」
という指定です。
#pre(novervatim){{
COLOR(red):h1, h2 COLOR(black):{color: #0000ff}
</pre>
}}


&br;
&navi2(Lecture/InfoDesignB2004/7th,next);進んでください。
----
#navi2(Lecture/InfoDesignB2004/7th,prev,toc,next)

}}