各種値の指定方法Specification of value


色の指定には次のような方法があります。下記の例はどれも青を示します。無難に色の名前、もしくは16進数で指定するのがベストですが、16進数で指定する場合は一つ注意を。(Web制作に携わる人にはごく当たり前の事なんだけど)指定番号の前には必ずシャープ(#)をつける事。この#が付いていない6桁の16進数を、多くのブラウザが「ハイハイ、色指定番号ね」と寛容な解釈をします。するんだけどWeb制作に携わる以上その事に甘んじてはイカンのです。なお、色指定番号を正しく解釈できなかったブラウザの挙動はいまいち不明ですが、どうも各ブラウザに依存した色を表示するみたいです。

color: blue;
color: #0000ff;
color; #00f
color: rgb( 255, 0, 0 );
color: rgb( 100%, 0%, 0% );



URL
外部CSSファイルの定義の項でも書きましたが、相対パスだと呼び先をうまく呼び出せない場合があります。正確にはNN 4.xでは呼び出し先のhtmlのあるフォルダを起点とし、それ以外のブラウザでは外部CSSのあるフォルダを起点とします。

background-image: url(../../images/aaa.gif); ←相対パス
background-image: url(http://www.***.ne.jp/~***/images/aaa.gif); ←絶対パス



値の種類 -絶対指定値-
まず絶対指定値。
絶対値とはいうものの、実際のところはOSやディスプレイなどの出力機器環境に大きく依存した値です。例えばWindowsは標準で96dpi(96ピクセルで1インチを表す)で出力する設定になっていますが、Macintoshでは標準で72dpiで出力します。また、同じOS間でもディスプレイ解像度を変更すればピクセルの幅は変わるし、逆に同じ解像度でも15インチのディスプレイと17インチのディスプレイではやはり誤差が生じてしまいます。こうした背景から絶対指定によるプラットフォーム間での見た目の統一はあり得ません。結論:絶対指定は捨て。

xx-small 大体font-size="1"に相当。
x-small 大体font size="2"に相当。
small 大体font size="2"と"3"の中間に相当。
medium 大体font size="3"に相当。
large 大体font size="3"と"4"の中間に相当。
x-large 大体font size="4"に相当。
xx-large 大体font size="5"に相当。
10in インチ。1in=2.54cm=96px(96dpiの場合)。1inでも結構でかいのでWebデザインではまず使わないでしょう。
10cm センチメートル。1cm=10mm。上に同じ。
10mm ミリメートル。10mm=1cm。上に同じ。
10pt ポイント。1pt=1/72in。上に同じ。WinとMacで見た目の大きさが結構変わる。
10pc パイカ。1pc=12pt。上に同じ。




値の種類 -相対指定値-
次に相対指定値。
こちらはWebで使われている要素を基準に算出されるので、それらの要素との親和性が非常に高い値です。例えば、画像やFlashなどのオブジェクト要素に対してのピクセルや、フォントに対してのem、exがこれにあたります。オブジェクト要素に関してはピクセルを基軸単位として用いるので言わずもがな。フォントに関してはem、exがそれぞれフォントサイズとの比率から算出されるので、どんなプラットフォームからでも見る人にとって(作り手の配慮にもよるが)比較的優しいレイアウトを作ることができます。

larger 大体font-size="+1"に相当。
smaller 大体font size="-1"に相当。
10px ピクセル。画像やFlashなどのオブジェクト要素はほとんどがこの値で指定されるため、オブジェクトに余白などを設ける場合は主にピクセルを使用する。
10em Mを基準とした関連要素の倍率値。1emでMの等倍。※1
10ex xを基準とした関連要素の倍率値。1exでxの等倍。※1

※1…emとexの違い
emは大文字のMを表示する際の高さを指す。対してexは小文字のxを表示する際の高さを指す。その考え方は、hやf、gやyなどのように上にも下にも飛び出していない文字の中心部分を算出しているから。その為、大文字のMを基準とするem値よりやや小さい値が算出される。x-heightとも言うらしい。日本語には特に関係のない値。





値の種類 -割合指定値-
最後に割合指定値。

100% パーセンテージ。em、exと同じ感覚で使える。






© 2004 maki All rights reserved.