CSS1-値の説明

1. プロパティの値の表記方法

プロパティの値の表記方法についての説明をします。結構解り難いですが、馴れればそうでもありませんし、W3Cの説明と同じ方法です。

値: N | NW | NE
値: [ <length> | thick | thin ]{1,4}
値: [<family-name> , ]* <family-name>
値: <url>? <color> [ / <color> ]?
値: <url> || <color>

<>（不等号内の文字）: 値の種類を示しています。一般的な種類は別途、特殊な場合は各プロパティで解説します。　ex)<length> , <color>
通常の文字列（不等号の無い文字）: 値そのものを示します。指定する際はそのまま標記しなければなりません。「/」「,」も含みます。　ex)thick , thin
並記された複数の値: 全てその順番に指定する必要があります。
| で区切られた値: 何れか１つのみを指定する必要があります。
|| で区切られた値: 少なくとも１つを任意の順序で指定する必要があります。
[] （大括弧内の値）: グループ化を示します。並記されている場合、最優先になります。
* （アスタリスク）: ０回以上の繰り返しを示します。
+ （プラス）: １回以上の繰り返しを示します。
? （クエスチョン）: オプション（１回以下の指定が可能）であることを示します。
{A,B} （中括弧）: A回以上、B回以下の繰り返しを示します。

2. 値の説明

2-1. 長さ (<length>)

長さは、小数点、正負を問わずに指定可能ですが、負の数値の使用は実装上推奨できません。また、０を採る場合は単位は指定する必要はありません。長さに対する単位は以下のようになっており、絶対値指定と相対値指定が可能です。

相対値指定

相対値には３種類の単位（指定方法）が存在します。

em: フォントの縦方向の長さを1em（エム）とする相対値
ex: フォントの「x-height」の長さを1ex（エックス）とする相対値
px: 画面の表示可能な最小の画素の大きさを1px（ピクセル）とする相対値

BODY { font-size : 12pt; }   /*BODY要素フォントサイズを12pt*/
H1 {   font-size :  2em; }   /*H1要素フォントサイズを12ptの２倍*/

相対値指定の場合、画面の他プリンタなどにも適用が簡単です。身近なところでは、フォントサイズについて考えてみると、例えば、BODY要素に12ptを指定していたとします。更にH1要素に16ptを指定し、表題として機能させていたとします。 12pt-24ptの差で表題と認識できていたとしても、仮にBODY要素を16ptに変更すると、16pt-24ptの差になり表題として認識がし辛くなります。バランスも悪いので（と仮定）、H1要素も32ptに変更しなければなりません。これでは、スタイル全体のフォントサイズを変更する必要があり、その変更はフォントサイズに止まらず、行間やインデントなど全ての変更が必要になります。その労力は大変なもので、これを相対値指定しておけば簡単に問題解決できるのです。 BODY要素には12pt、H1要素には2emとするだけで、12ptを16ptに変更すると、H1要素も24ptから32ptに自動的に変更されます。

一般的に相対値の指定を行う場合、その要素に対するフォントの大きさに対した相対値を採ります。ただし、フォントの相対値指定の場合は、親要素に対する相対値を採ります。

また、相対値指定した結果の継承については、その相対値指定した計算結果を継承します。決して、相対値を継承するものではありません。この考え方は、割合指定も同様です。

絶対値指定

出力先（画面やプリンタなど）の物理的な単位が解っている場合のみ使用可能で、以下のようなものがあります。

pt: ポイント(72pt=1in)
cm: センチメートル(1cm=10mm)
mm: ミリメートル
in: インチ(1in=25.4cm)
pc: パイカ(1pc=12pt)

BODY { font-size   : 12pt; }    /*BODY要素フォントサイズを12pt*/
P {    line-height : 1pc; }     /*P要素行間を1パイカ*/

指定したそのままが出力できない場合は、その近似値が出力されます。

[Go To Top]

2-2. 割合 (<percentage>)

長さは、小数点、正負を問わずに指定可能ですが、負の数値の使用は推奨されていません。また、数値の後に「%」を付け加えることで指定します。

ただし、割合指定が使用可能なプロパティは全てではありませんので、使用可能かどうかは各プロパティの説明を参照して下さい。

BODY { font-size : 12pt; }   /*BODY要素フォントサイズを12pt*/
H1 {   font-size : 150%; }   /*H1要素フォントサイズを12ptの150%の18pt*/

[Go To Top]

2-3. 色 (<color>)

色指定は、文字列（カラーネーム）かRGB値による指定を行います。正確には下表に基づきます。

項目	指定方法	例
#RGB	１６進数で１桁ずつ指定	#f00
#RRGGBB	１６進数で２桁ずつ指定	#ff0000
rgb(R,G,B)	１０進数で３つ(R,G,B)指定	rgb(255,0,0)
rgb(R,G,B)	割合で３つ(R,G,B)指定	rgb(100%,0%,0%)
カラーネーム	定義済みの文字列で指定	red

上の例は全て「赤」を意味しています。指定した数値が規定の範囲を超過する場合は、（実装上）その範囲外の数値を無視します。例えば、rgb(300,0,0)としてもrgb(255,0,0)とみなされます。

定義されているカラーネームは全部で１６色（aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow）です。ただし、一部のブラウザなどではこの他のカラーネームも使用できるようですが、これではユーザー環境に左右されるので推奨はできません。

[Go To Top]

2-4. URL (<url>)

関数的な標記方法で指定します。相対パスでも指定可能ですが、スタイルシートからの相対パスとして指定します。

BODY { background-image : url(./image/bgimage.gif); }  /*相対パスはスタイルシートからの相対位置*/

CSS1 Reference

値の説明