プロパティの値の表記方法についての説明をします。 結構解り難いですが、馴れればそうでもありませんし、W3Cの説明と同じ方法です。
長さは、小数点、正負を問わずに指定可能ですが、負の数値の使用は実装上推奨できません。 また、0を採る場合は単位は指定する必要はありません。 長さに対する単位は以下のようになっており、絶対値指定と相対値指定が可能です。
相対値には3種類の単位(指定方法)が存在します。
BODY { font-size : 12pt; } /*BODY要素フォントサイズを12pt*/ H1 { font-size : 2em; } /*H1要素フォントサイズを12ptの2倍*/
相対値指定の場合、画面の他プリンタなどにも適用が簡単です。 身近なところでは、フォントサイズについて考えてみると、例えば、BODY要素に12ptを指定していたとします。 更にH1要素に16ptを指定し、表題として機能させていたとします。 12pt-24ptの差で表題と認識できていたとしても、仮にBODY要素を16ptに変更すると、16pt-24ptの差になり表題として認識がし辛くなります。 バランスも悪いので(と仮定)、H1要素も32ptに変更しなければなりません。 これでは、スタイル全体のフォントサイズを変更する必要があり、その変更はフォントサイズに止まらず、行間やインデントなど全ての変更が必要になります。 その労力は大変なもので、これを相対値指定しておけば簡単に問題解決できるのです。 BODY要素には12pt、H1要素には2emとするだけで、12ptを16ptに変更すると、H1要素も24ptから32ptに自動的に変更されます。
一般的に相対値の指定を行う場合、その要素に対するフォントの大きさに対した相対値を採ります。 ただし、フォントの相対値指定の場合は、親要素に対する相対値を採ります。
また、相対値指定した結果の継承については、その相対値指定した計算結果を継承します。決して、相対値を継承するものではありません。 この考え方は、割合指定も同様です。
出力先(画面やプリンタなど)の物理的な単位が解っている場合のみ使用可能で、以下のようなものがあります。
BODY { font-size : 12pt; } /*BODY要素フォントサイズを12pt*/ P { line-height : 1pc; } /*P要素行間を1パイカ*/
指定したそのままが出力できない場合は、その近似値が出力されます。
長さは、小数点、正負を問わずに指定可能ですが、負の数値の使用は推奨されていません。 また、数値の後に「%」を付け加えることで指定します。
ただし、割合指定が使用可能なプロパティは全てではありませんので、使用可能かどうかは各プロパティの説明を参照して下さい。
BODY { font-size : 12pt; } /*BODY要素フォントサイズを12pt*/ H1 { font-size : 150%; } /*H1要素フォントサイズを12ptの150%の18pt*/
色指定は、文字列(カラーネーム)かRGB値による指定を行います。正確には下表に基づきます。
項目 | 指定方法 | 例 |
#RGB | 16進数で1桁ずつ指定 | #f00 |
#RRGGBB | 16進数で2桁ずつ指定 | #ff0000 |
rgb(R,G,B) | 10進数で3つ(R,G,B)指定 | rgb(255,0,0) |
rgb(R,G,B) | 割合で3つ(R,G,B)指定 | rgb(100%,0%,0%) |
カラーネーム | 定義済みの文字列で指定 | red |
上の例は全て「赤」を意味しています。指定した数値が規定の範囲を超過する場合は、(実装上)その範囲外の数値を無視します。 例えば、rgb(300,0,0)としてもrgb(255,0,0)とみなされます。
定義されているカラーネームは全部で16色(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow)です。 ただし、一部のブラウザなどではこの他のカラーネームも使用できるようですが、これではユーザー環境に左右されるので推奨はできません。
関数的な標記方法で指定します。相対パスでも指定可能ですが、スタイルシートからの相対パスとして指定します。
BODY { background-image : url(./image/bgimage.gif); } /*相対パスはスタイルシートからの相対位置*/