CSS文法[数値と数字]
CSSスタイルシート文法[数値と数字]
CSSの値[数字と数値]は
CSSの数字と数値の扱いは以下の通りです。
※このページは、W3Cの4 CSS2 syntax and basic data types[英文]を当サイト管理人が2008年08月25日、意訳したものですが、構文解釈の違いや翻訳の違いが含まれるかもしれません。正式文書はW3C 各種仕様書(英語版)である事を予めご了承ください。
値
数値と数字
値の中には数値や数字がありますが、CSSでは、10進数表記に限定されると明記されています。
数値は、1つまたは1つ以上の0から9までの数字で数字は、ゼロまたは1つ以上の数字と数字と数字に続く . ドットに続き、1つ以上の数字が続くもの(1.2のような小数点も可)です。
数値と数字は、その前に[+]や[-]を伴って示されるかもしれません。
長さ
縦方向、横方向の計測上の長さ。
長さは、lengthという形式で場合によっては[+]や[-]を伴って([+]が既定)指示文字の直後につづけて数字を入れ、その直後にユニット識別子である[px]や[deg]といった単位を記述しますが、数字が[0]の場合に限りユニット識別子を省略する事もできます。
但し、プロパティとしては正しくてもプロパティを認識できない場合もあるという書式設定上の限界がありますが、その場合には、極力近い値がサポートされる事になっています。
長さには他と比較してどのくらいかという相対値と直接的な値である絶対値という2種類があります。
相対値指定
長さの単位で実は相対値で表されている単位として[em][ex][px]などがありますが、[em]はフォントに対する相対値、[ex]は[x-height](小文字のxの高さと同等といわれますが、xの高さに依存しているわけではなく他のフォントも定義されています)、[px]は、端末の設定に対する相対値です。
例えば、[em]は
|
◆[em]の場合 h1 { line-height: 1.2em } は、H1の既定のフォントサイズと比較して120%の比率の「行の高さ」を表し、 H1 { font-size: 1.2em } は、H1の既定のフォントサイズと比較して120%の比率の「フォントサイズ」を表します。 |
また、[px](Pixel／ピクセル)はコンピュータのディスプレイなどに依存していてピクセル密度はプリンタなどで出力する際にもディスプレイの設定を確認してから再計算しなければならないという難解なものです。
どのくらい難解かというと、例えばピクセルによる参照は、腕の長さ(28インチの喩)の距離から見た90dpi[90dot/inch][90dot per inch]のピクセル密度の場合の1ピクセルに対するディスプレイ上の見た目の角度(約0.0227度)です。
腕の長さ(28インチの喩)の距離を置いてみた1ピクセルというのは約2.8mm(1/90inch)に相当します。
レーザープリンタで印刷された時、55cm(21inch)よりも細かい読解をしなければいけない事を意味し、この時１ピクセルは約0.21mmです。
300dpiプリンタでは丸め処理されて3ドット(0.25mm)、600dpiでは、丸め処理されて5ドットになります。
ピクセル単位で描かれた画像を見た効果とプリンタなどの出力装置の解像度の効果を持つ2枚の画像があった時、前者の画像は、距離を置いて例えば、71cm(28inch)離れたところから見た時には0.28mmで、3.5m(12feet)離れたところから見た時には1.4mmという解像度を求められる事になります(見る距離によってサイズが異なる上、離れるほど1ピクセルのサイズは大きくなる)。
後者の出力装置の解像度の場合には、例えば、低解像度のディスプレイでは、縦横1ピクセルの四角を1ドットで表し、400dpiの高解像度のプリンタだと、1ピクセル角の四角を16ドットで埋めるので見た目がなめらかになります。
この為、子要素で相対値をピクセルで設定した場合にも親要素の値を引き継ぐわけではなく、端末の値を引き継ぐ事になります。
絶対値指定
絶対値指定をする場合には、[in]/inches、[cm]/centimeters、[mm]/millimeters、[pt]/points、[pc]/picasを利用します。
サポートできない単位がある場合にはユーザーエージェントは近いサイズにしなければいけないとされています。
比率
比率の値は、[+][-]が付く場合は、その直後に、つかない場合は10進数表記の数字で始まり、続けて[%]を記述します。
比率の値は、常に例えば長さなどの他の値の相対値となり、それぞれのプロパティでは参照される値自体も比率で表現されていてもよく(120%の130%など)、その値が同じ要素の他のプロパティであったり、親要素など先祖のプロパティであったり、前後関係(囲まれているボックス)の値である事もあり得ます。
比率の値がルート要素のプロパティとして設定されている場合や比率が同じプロパティの値を引き継いだ参照として定義されていたり、結果の値がそのプロパティの既定値の比率という事もあり得ます。
例えば、以下の異なるプロパティ間でも
|
◆[em]の場合 p { font-size: 10pt } p { line-height: 120% } /*font-sizeの120%の行の高さ*/ |
[font-size]の値が[line-height]で参照され、行の高さを比率で表現する事ができます。
>> URL+URN=URI
CSS/スタイルシート情報
