プロパティの値

css プロパティの値

一般的に長さによく使われる単位は「px」絶対単位は「pt」相対単位は「%」「em」です。

長さ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
単位 説明
px ピクセル 最小単位(モニタのドット)1pxの大きさはモニタの解像度によって決まる
pt ポイント。1ptは72分の1インチ 約1.3px
mm ミリメートル
cm センチメートル
pc パイカ 12ポイント 16px
in インチ 1インチは約2.54センチメートル 96px
em 親要素のfont-sizeを1とした倍率。1.5emなら1.5倍、2emなら2倍
ex 親要素のfont-sizeの小文字の「x」の高さを1とした倍率。1.5exなら1.5倍、2exなら2倍

絶対単位

pt cm mm in pc
ホームページを作成した人(管理人)の表示したい大きさに指定できます。訪問者のブラウザ設定で文字サイズを変更できません。

相対単位

em ex %
訪問者がブラウザの設定で文字サイズを変更できます
emの大きさはemの親要素のfont-sizeによって変わります
例えばtr要素の文字の大きさを10ptと指定してtd要素に1emと指定するとtd要素内の文字の大きさは10ptになります
td要素の文字の大きさを1.5emにすると15ptの大きさになります
td要素の文字の大きさを2emにすると20ptの大きさになります
tr要素が15ptだとtd要素に1emと指定するとtd要素内の文字の大きさは15ptになります
※親要素のfont-sizeの値を絶対単位で指定した場合は訪問者がIE6のブラウザ設定で文字サイズを変更できません
px
pxは訪問者のモニタの解像度によって大きさが変わるため相対単位になっていますがpxも訪問者のブラウザ設定で文字サイズを変更できません

パーセンテージ

%を付けて割合で値を指定します。

色の値

colorプロパティなどには値に色を指定する16進数やキーワードを入れます。

16進数

#と赤、緑、青の三原色を表す16進数を2桁ずつ並べて色を指定します。
16進とは cssデザインサンプル、webスタイルの基礎0から9までの数とAからFまでの16の数のこと(解りやすくいえばAが10でFが15、0もあるので15+1=16個の数)
p { color: #FF9900; }

16進数(3桁)

#FF9900を省略して#F90と指定することもできます。
p { color: #F90; }

10進数

赤、緑、青の三原色を0から255までの10進数で指定します。
rgbとはred、green、blueの頭文字をとって付けたもの。三原色といって、この組み合わせでいろんな色を表現できる。
この場合は255が赤の色の指定、128が緑の色の指定、0が青色の指定
p { color: rgb(255, 128, 0); }

パーセンテージ

赤、緑、青の三原色を0%から100%で指定することもできます。
p { color: rgb(100%, 50%, 0%); }

色のキーワード

red、green、blue、pinkなど色をキーワードで指定します。
p { color: red; }

スポンサード リンク



(C)2012 ホームページ作成無料