超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap
 Home > 超初心者のためのスタイルシート講座 > 長さの指定方法 > Next 

■ CSS における長さの指定方法

HTML では長さを ピクセル(px)パーセント(%)で指定しましたね。HTML では長さの属性を持つタグに数値を入れれば自動的にピクセル単位を指定したことになります。
例えば、長さ300ピクセルの罫線を引きたいときには、このように書きました。
せっかくだから、CSS を使って色をつけます。

<hr width="300" style="color:#ff00ff;">


CSS ではピクセル、%の他にも、さまざまな長さの単位を使うことができます。
CSS の長さの単位は絶対的な単位相対的な単位とに分けられます。
絶対的な単位は、見る人の画面の大きさ、文字サイズ指定などにかかわらず常に決まった大きさで指定できます。一方、相対的な単位は見る人の環境によって変わります。ページのデザインやバランスを重視するなら、相対的な指定の方が望ましいと思います。

◆絶対的な単位

単位説明
mmミリメートル1/10cm
cmセンチメートル10mm
inインチ2.54cm
ptポイント1/72in
pcパイカ12pt

ミリとかセンチはわかるよね。インチはゴルフやってる人ならなんとなくわかるでしょ。クラブの長さは普通インチだもんね。6インチが約15センチくらいだよね。
ポイントはよくワープロソフトで文字の大きさを指定するときに使われます。普通標準で10.5〜11ポイントで使うんじゃないかな。
パイカは聞いたことないよねぇ。よくわかりません(^^;

◆相対的な単位

単位説明
pxピクセル
ex小文字の x の高さを1とする
em大文字の高さを1とする
%パーセント

ピクセルはなんか絶対的な単位っぽいけどちょっと違うみたい。画面の解像度が800×600というのは、横に800ピクセル、縦に600ピクセルという意味らしい。解像度が1024×768になっていれば、100ピクセルで画面横幅の約1/10くらいになるね。さっき引いた300ピクセルの線は画面の1/3よりちょい短いくらいになってる。これらは見る人の画面設定によって変わるから、絶対的とは言えないみたいです。
ex 、em 、% はその前に設定してある親要素の値を継承し、それに対して相対的に長さ(大きさ)が決まります。

<div style="font-size:12pt;">
彼は私の方を見て<span style="font-size:1.5em;">ごめんね</span>とそっとつぶやいた。
</div>

彼は私の方を見てごめんねとそっとつぶやいた。


 Home < 超初心者のためのスタイルシート講座 < Back < 長さの指定方法 > Next