2005年09月13日

色指定ルール

スタイルシートだけに問わず、

WEBで作業をしていると、色指定をすることが多々あります。

color: #ffffff;

などがそれにあたります。

この場合、color: プロパティのように、文字色指定の場合、背景色指定の場合、
場面は多々ありますが、
色の指定ルールは共通なので、今回ご説明します。


PC上での色は、

光の三原色、RGB、すなわち、レッド(赤)、グリーン(緑)、ブルー(青)の
3色の光の重ね合わせで全色を表現しています。

一昔前までは、
色数も16色や256色、という少ない種類しか表現できませんでしたが、
今は、High Color(16ビット)やTrue Color(24ビット)
といって、

65,536色
16,777,216色

までの色を表現できます。

この場合、スタイルシートやHTML等で色指定する場合、
通常、24ビットまでの表現域を前提として、
RGB各色256段階の指定により、色を表現します。

具体的には、
各値を0〜255まで使い、それを16進法で、表現、00〜ffとして、
#ffffff (先頭2文字赤、次2文字緑、最後2文字青)
として指定。

また、単純に、各値を16段階で表現して、
#fff (それぞれ赤、緑、青に対応)
として、指定することもできます。

この指定方法と、
色の割合の変化による、実際の色合いがわかれば、
サイトデザイン等で、色にひと工夫可能になります。

なお、
このようなRGBの数値では色のイメージがわかない方は

http://www.colordic.org/

このサイトのように、色見表で欲しい色のRGBの数値をチェックするとよいです。
posted by 燃えPaPa at 21:27 | Comment(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2005年09月11日

fontプロパティの数々

サイトを作成する上で、かなり序盤に設定することとなる、
スタイルシートの基本プロパティです。

font: style variant weight size / height family

以降で説明する、style や variant などを一度に指定する方法です。height を指定する時は size とスラッシュ( / )で区切って指定します。size と family 以外は省略可能です。fonttype には、現在のアイコンラベルやウィンドウメニューに現在使用されているフォントを示す値として caption, icon, menu, message-box, small-caption, status-bar のいずれかを指定します。CSS2 では inherit(継承)も指定可能です。

指定例:
BODY, TD, TH {
font: italic bold 100%/150% serif;
}


上記スタイル(font)で一括に指定もできますが、
以下、それぞれは、クラスごとに区切って、部分部分に指定するのに、多用されます。


font-variant: variant

normal(既定値:通常), small-caps(大文字)のいずれかを指定します。
CSS2 からは inherit(継承)も指定可能です。
small-caps を指定すると、アルファベットの小文字が(すこし小さめの)大文字で表示されるようになります。

指定例:
H1, H2 { font-variant: small-caps; }


font-weight: weight

フォントの太さを normal(既定値), bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 のいずれかで指定します。
IE4.0 や Netscape 4.0 では通常と太字の 2種類しかサポートしていないので、normal(通常)と bold(太字)以外を使用することは少なそうです。

指定例:
DT { font-weight: bold; }


font-size: size

フォントの大きさを指定します。
絶対指定として xx-small, x-small, small, medium(既定値), large, x-large, xx-large、相対指定として larger, smaller、絶対単位指定として 10in, 10cm, 10mm, 10pt, 10pc, 相対単位指定として 10px, 10ex, 10em などを、割合指定として 120% などを指定します。単位を省略して 20 のようには指定できないので注意してください。

周りのフォントに対する相対的な大きさを指定する時は 120% などのパーセント指定が無難です。small や smaller などや、em や ex などの単位は、ブラウザにより解釈が異なるため、予想外のフォントサイズになるという悲劇がおこることがあります。

画像サイズにあわせてフォントの大きさを固定したいという要望がありますが、ブラウザによって単位の解釈が異なるため、すべてのブラウザで同じフォントの大きさを実現するのは困難なようです。

指定例:
BODY, TH, TD { font-size: 16pt; }
posted by 燃えPaPa at 01:00 | Comment(0) | 日記 | このブログの読者になる | 更新情報をチェックする