Cascading Style Sheets解説

Properties・値の読み方

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

|

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

例

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

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

||

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

例

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 }
/* 同じ指定を2回してしまっている。 */

[ ]

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

例

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

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

< >

書く値の説明です。

例

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

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

*

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

例

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

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

「 ? 」

0回もしくは1回だけ記述します。

例

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」が省略（0回指定）されています。 */
/* ちなみに「font-size」と「font-family」は省略できません。 */

{ A , B }

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

例

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

/* この場合、以下の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)]