単位
ここでは、主に使われている単位について、まとめて解説します。
長さの単位
任意の正負符号(デフォルトはプラス)の後に、数値、単位識別子('px'や'pt'等)と続きます。
絶対値が1未満の場合、頭の"0"は省けます。つまり、"0.5"は".5"と書いても良いのです。長さが"0"なら単位識別子は省略出来ます。しばしば単位のない数値のみの記述を見かけますが、それらは間違いです。デフォルトの単位は存在しません。UAによっては誤記と見なされ、無視されます。
単位識別子についてですが、絶対単位と相対単位の2種類に大きく分かれます。
絶対単位というのは、簡単に言うと物差しで測るのです。ですから、ディスプレイで表示されているものを測っても、紙に印刷されているものを測っても、長さは同じです。
絶対単位に分類されている単位は、以下の通りです。
- in
- インチ -- 1inは25.4mmに相当
- cm
- センチメートル -- 1cmは10.0mmに相当
- pc
- パイカ -- 1pcは約4.23mmに相当
- mm
- ミリメートル
- pt
- ポイント -- 1ptは約0.353mmに相当
幾つか使い方の例を挙げてみましょう。
h1 { margin: 0.5in } /* インチ */
h2 { line-height: 3cm } /* センチメートル */
h3 { word-spacing: 4mm } /* ミリメートル */
h4 { font-size: 12pt } /* ポイント */
h4 { font-size: 1pc } /* パイカ */
相対単位は、物差し以外のもので測ります。
- em
- エム -- 当該要素の'font-size'の値を参照します。'font-size'自身にこの単位を用いた場合は親要素の'font-size'の算出値を参照します。親要素も無い場合は、UAのデフォルトの値を参照します。文字の大きさに合わせて調整したい時に有用です。"2em"とすると、文字の高さが親要素の2倍(面積的には4倍)になります。
- ex
- エックス -- 関連要素のフォントの小文字'x'の高さを参照します。小文字の大きさに合わせて調整したい場合に有用です。大雑把に説明すると、"2ex"が大体"1em"に当たります。仕様書内で問題が生じていますので、それが解決するまでこの単位は極力使用しないようにしたほうが良いです。
- px
- ピクセル -- 閲覧しているデバイスの解像度を参照します。
pxについては、出力デバイスの画素濃度(ppi値・dpi値)が典型的なコンピュータ画面のそれと著しく異なる場合は、UA側で値を調節するべき
とされています。調節時の参照先には、ユーザからの距離が腕の長さ程度で、画素濃度96dpiのデバイスに於ける、1px分の画角を用いる事
が推奨されています(正誤表で画素濃度90dpiのデバイスに於ける画角
、つまり0.0227度では無く0.0213度と修正されました)。要は「適度に調節せぇ」という事です。ですので、高解像度のデバイスや、逆に低解像度のデバイスで出力する場合でもあまり大きな誤差は生じませんし、生じてはいけません。相対単位でありながら、半ば絶対単位なのです。
- 関連プロパティ
パーセンテージ
形式は、任意の正負符号(デフォルトはプラス)の後に、数値、最後に単位'%'を付けます。プロパティによって参照する値が違いますので、詳細は各々のプロパティの表をご覧ください。
URL(URI)
HTML4になってからURLでは無くURIと呼ぶ事が推奨されるようになりました。が、著者は慣れ親しんだURLというほうを使います。
HTMLの知識がある程度あれば、URLの書き方もある程度ご存じだと思いますので、説明は省きます。
詳しい事が知りたいのでしたら、URLについては[RFC1738](日本語訳)や[RFC1808]を、URIについては[URI]や[RFC2396](日本語訳)等を読んでください。そこまでしなくても、パスについてだけでも十分かとも思いますが。ほかにもURL中のチルダにまつわる話、ほかの[URIとURLの違い]、URIとファイルディレクトリの[URIとURL]、Uniform Resource Identifiers辺りが役に立つのでは無いかと思います。
形式は、"url("と来て一重か二重引用符で括ったリソースのURL、最後は")"で閉じます。引用符は省略可能です。結果的に以下の3種類となります。
url("http://www.bg.com/pinkish.gif")
url('http://www.bg.com/pinkish.gif')
url(http://www.bg.com/pinkish.gif)
(の後ろと)の前には好きに空白類を入れて構いません。
HTML同様に、絶対パス以外に相対パスで書く事も出来ます。
body { background: url("yellow.jpg") }
CSSでの基準ディレクトリは、ソース文書のディレクトリでは無くスタイルシート自身のディレクトリです。CSSだけ別ディレクトリで保管しようと思っている人は要注意です。
カウンタ
カウンタのページで別途説明していますので、飛ばします。
色
CSSでは、4種類の色の表記方法が良いされています。それぞれのメリット・デメリットを理解し、自分に合った組み合わせでお使いください。
キーワード
普通に色の名前書き込むやり方です。使用可能なキーワードについてはカラー・チャートをご覧ください。
分かりやすい反面、定義されている色は16色 プラス システム色のみで、あとはUAの独自拡張となります。その定義色も、もとの文書の言語に依存します。つまり、HTML・XHTMLではきちんと定義されていますが、XMLでは定義されていない為、どのような色になるかわかりません。
システム色は、このキーワードを通してしか参照出来ません。
#RRGGBB
#2F8A44 という具合に、16進法の6桁の数字で色を指定する方法です。16進法というのは、0, 1, 2, ..9, A, ..F, 10, 11, ..FE, FF, 100 という具合に増えていく数え方です。
最初の2桁、2F の部分が赤の量、次の2桁、8A の部分が緑の量、最後の2桁、44 の部分が青の量を表します。量は光で考えます。00 がなんにもなしで、FF が満タンを示します。つまり、#000000 が真っ黒で、#FFFFFF が真っ白です。各色256段階表現出来ますから、合計24bit色(16,777,216色)、Windowsでいうところの"TrueColor"クラスの色をすべて表現出来ます。
HTMLの色指定に慣れ親しんでいる人なら、この表記方法が一番分かりやすいかもしれません。
参考になるかどうかは分かりませんが、以下に簡単な色見本を付しておきます。
#RGB
#RRGGBB の簡略表記の方法です。それぞれの色の量を16段階で表します。つまり、#000000 は #000、#AA8822 は #A82 と同じです。
rgb(xx,xx,xx)
16進法が分かりにくい人向けです。それぞれの色の量を 0 から 255 までの数字で書きます。書き方は例えば以下のようなものです。
rgb(255,173,25) /* #FFAD19 と同じ */
Windows版 InternetExplorer3.0では対応していません。
rgb(xx%,xx%,xx%)
rgb(xx,xx,xx)でも分かりにくい人向けというところでしょうか。それぞれの色の量をパーセントで表します。以下は見本です。rgb(100%,25%,10%) /* #FF3F19 と同じ */
Windows版 InternetExplorer3.0では対応していません。
角度の単位
音声スタイルシートで使用します。
- deg
- 度（度数法）
- grad
- グラード（グラード法）
- rad
- ラジアン（弧度法）
参考に書いておきますと、"90deg"="100grad"="1.570796326794897（π/2）rad"となります。
時間の単位
音声スタイルシートで使用します。
- ms
- ミリ秒
- s
- 秒
負の値は不可です。
周波数の単位
音声スタイルシートで使用します。
- Hz
- ヘルツ
- kHz
- キロヘルツ
負の値は不可です。