*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/InfoDesignB2005/6th,next);進んでください。 ---- #navi2(Lecture/InfoDesignB2005/6th,prev,toc,next) }} |