Cascading Style Sheets解説

プロパティ・値の読み方

各プロパティの値にはいくつかの記号が使われています。ここでは、それら記号が持つ意味について説明します。

「 | 」

グループのうち、どれか一つだけ記述できます。

例

text-align　水平位置揃え
値：
   left | right | centyer | justify

正：H1 { text-align : right }
誤：H1 { text-align : right justify } /* 複数指定は出来ません。 */

「 || 」

グループから複数記述できます。書く順序は自由ですが、同じ指定を２度以上書いてはいけません。

例

border-top　上部ボーダー
border-right　右側ボーダー
border-bottom　下部ボーダー
border-left　左側ボーダー
値：
   <border-width> || <border-style> || <border-color>

正：DL { border-top : thin solid #606060 }
誤：DL { border-top : thin solid thin }
/* 同じ指定を２回してしまっている。 */

「 [ ] 」

グループの範囲を示します。

例

text-decoration　テキスト装飾
値：
   none | [ underline || overline || line-through || blink ]

正：STRONG { text-decoration : underline overline }
誤：STRONG { text-decoration : underline none underline }
/* 同じ指定を２回してしまっている。また、「none」と「underline」は同時に指定できません。 */

「 < > 」

書く値の説明です。

例

border　ボーダーの一括指定
値：
   <border-width> || <border-style> || <border-color>

DL { border : thin solid #606060 }
/* この場合、「border-width」「border-style」「border-color」の各プロパティの値を記述します。 */

「 * 」

０回以上繰り返して記述できます。

例

font-family　フォントファミリー
値：
   [[<family-name>|<generic-family>],]* [<family-name>|<generic-family>]

P { font-family : "Arial" , "Verdana" , sans-serif }
/* ２回繰り返し記述した後（"Arial"と"Verdana"）、右側のグループとして sans-seerif を記述。 */
P { font-family : "Arial" }
/* この場合、左側のグループを０回記述している事になります。 */

「 ? 」

０回もしくは１回だけ記述します。

例

font　一括指定
値：
   [ <font-style> || <font-variant> || <font-weight> ]?
   <font-size> [ / <line-height> ]? <font-family>

P { font : italic medium sans-serif }
/* この例では、「font-variant」「font-weight」「line-height」が省略（０回指定）されています。 */
/* ちなみに「font-size」と「font-family」は省略できません。 */

「 { A , B } 」

A回以上B回以内の回数だけ記述できます。

例

border-color　ボーダーの色
値：
   <color>{1,4}

/* この場合、以下の４つの記述が許されます。 */
P { border-color : #008080 }
P { border-color : #008080 #C0C0C0 }
P { border-color : #008080 #C0C0C0 #000000 }
P { border-color : #008080 #C0C0C0 #000000 #FFFFFF }

[Back(b)][Cover(c)]