Home/Menu

スタイルなCSSの基礎講座

単位と色

◆ はじめに

以下は、カスケーディング・スタイル・シート・レベル2(CSS2)の単位と色をまとめました。

◆ 長さの単位

長さや大きさは、数字に単位をつけて指定します。以下のように相対単位と絶対単位があります。

種別単位機能
相対単位 em現在のフォントサイズを1とした相対指定
ex現在の英字の"x"のサイズを1とした相対指定
% 現在のフォントサイズや画面サイズを100%とした相対指定
絶対単位 pxピクセルで指定
ptポイントで指定
pcパイカで指定
inインチで指定
cmセンチメートルで指定
mmミリメートルで指定
(1pt = 1/72in , 1pc = 1/6in , 1in = 2.54cm)

文例

{font-size:12pt} ・・・・フォントサイズ12ポイント
{margin-left:20px}・・・・左マージン20ピクセル
{margin-left:20%} ・・・・左マージンを画面幅の20%

◆ 色の指定

色を指定する方法は以下の通りです。

  1. 数値で指定

  2. 色名で指定
    Red、Blue、Green、White、Black等の16色パレット

  3. システムカラーで指定
    システムカラーとは、ユーザの環境でシステムの色として設定されているもので、Windowsでは「画面のプロパティのデザイン」に対応するものです。

文例

いずれも緑に設定
{color:#008000}
{color:green}
{color:rgb(0,128,0)}
{color:rgb(0%,50%,0%}

◆ 色指定につての補足説明

色の指定は、上記の通りですが...、目安として以下のパレットがあります。

16色パレットと216色パレットは、Windowsの256色モードでも変わり無く表示すことができます。 しかし、16色パレットと216色パレットのうち、重複する色が8色あり、16+216−8=224色にしかなりません。 残りは256−224=32色となり、どう指定するかは、不明です。

あと、216色パレット中、#0033FF、 #3300FF、#00FF33、#33FF00の4色が正しく表示されない場合があるみたいです。

尚、16色パレットとシステムカラーは、CSS2で定められた色名です。逆に言うとこれ以外の色名は保証がないってことです。注意してください。また、システムカラーに関しては、NN系では思わぬ色になります。これも注意してください。

16色パレット

CSS2 で色名として使えるキーワードは、以下の 16種です。

そして、Netscape NavigatorやInternet Explorerにおいて、Windowsの256色モードでも変わり無く表示することができます。

16進色名 16進色名 16進色名 16進色名
 #000000Black  #808080Gray  #C0C0C0Silver  #FFFFFFWhite
 #FF0000Red  #FFFF00Yellow  #00FF00Lime  #00FFFFAqua
 #0000FFBlue  #FF00FFFuchsia  #800000Maroon  #808000Olive
 #008000Green  #008080Teal  #000080Navy  #800080Purple

216色パレット

下記の216色は、Netscape NavigatorやInternet Explorerにおいて、Windowsの256色モードでも変わり無く表示することができます。

16進 16進 16進 16進 16進 16進
 #000000  #330000  #660000  #990000  #cc0000  #ff0000
 #003300  #333300  #663300  #993300  #cc3300  #ff3300
 #006600  #336600  #666600  #996600  #cc6600  #ff6600
 #009900  #339900  #669900  #999900  #cc9900  #ff9900
 #00cc00  #33cc00  #66cc00  #99cc00  #cccc00  #ffcc00
 #00ff00  #33ff00  #66ff00  #99ff00  #ccff00  #ffff00
 #000033  #330033  #660033  #990033  #cc0033  #ff0033
 #003333  #333333  #663333  #993333  #cc3333  #ff3333
 #006633  #336633  #666633  #996633  #cc6633  #ff6633
 #009933  #339933  #669933  #999933  #cc9933  #ff9933
 #00cc33  #33cc33  #66cc33  #99cc33  #cccc33  #ffcc33
 #00ff33  #33ff33  #66ff33  #99ff33  #ccff33  #ffff33
 #000066  #330066  #660066  #990066  #cc0066  #ff0066
 #003366  #333366  #663366  #993366  #cc3366  #ff3366
 #006666  #336666  #666666  #996666  #cc6666  #ff6666
 #009966  #339966  #669966  #999966  #cc9966  #ff9966
 #00cc66  #33cc66  #66cc66  #99cc66  #cccc66  #ffcc66
 #00ff66  #33ff66  #66ff66  #99ff66  #ccff66  #ffff66
 #000099  #330099  #660099  #990099  #cc0099  #ff0099
 #003399  #333399  #663399  #993399  #cc3399  #ff3399
 #006699  #336699  #666699  #996699  #cc6699  #ff6699
 #009999  #339999  #669999  #999999  #cc9999  #ff9999
 #00cc99  #33cc99  #66cc99  #99cc99  #cccc99  #ffcc99
 #00ff99  #33ff99  #66ff99  #99ff99  #ccff99  #ffff99
 #0000cc  #3300cc  #6600cc  #9900cc  #cc00cc  #ff00cc
 #0033cc  #3333cc  #6633cc  #9933cc  #cc33cc  #ff33cc
 #0066cc  #3366cc  #6666cc  #9966cc  #cc66cc  #ff66cc
 #0099cc  #3399cc  #6699cc  #9999cc  #cc99cc  #ff99cc
 #00cccc  #33cccc  #66cccc  #99cccc  #cccccc  #ffcccc
 #00ffcc  #33ffcc  #66ffcc  #99ffcc  #ccffcc  #ffffcc
 #0000ff  #3300ff  #6600ff  #9900ff  #cc00ff  #ff00ff
 #0033ff  #3333ff  #6633ff  #9933ff  #cc33ff  #ff33ff
 #0066ff  #3366ff  #6666ff  #9966ff  #cc66ff  #ff66ff
 #0099ff  #3399ff  #6699ff  #9999ff  #cc99ff  #ff99ff
 #00ccff  #33ccff  #66ccff  #99ccff  #ccccff  #ffccff
 #00ffff  #33ffff  #66ffff  #99ffff  #ccffff  #ffffff

システムカラー

システムカラーは、CSS2で定められた色名です。しかし、NN系は思わぬ色になります。注意してください。

システムカラーの利点は、ユーザの感覚にフィットしたページの作成ができることと、ユーザ設定が何らかの身体障害に関わりある場合、よりアクセシビリティの高いページを作成できることです。

システムカラー色名補足説明
ActiveBorder                    アクティブウィンドウの境界
ActiveCaption アクティブウィンドウのタイトルバー
AppWorkspace アプリケーション内のウインドウの背景
Background デスクトップの背景
ButtonFace ボタンの表面
ButtonHighlight ボタンの光の当たっている面
ButtonShadow ボタンの影
ButtonText ボタンのテキスト
CaptionText タイトルバーのテキスト
GrayText 選択不能テキスト
Highlight 選択された項目
HighlightText 選択されたテキスト
InactiveBorder 非アクティブウィンドウの境界
InactiveCaption 非アクティブタイトルバーのタイトルバー
InactiveCaptionText 非アクティブタイトルバーのタイトルバーテキスト
InfoBackground ツールチップの背景
InfoText ツールチップのテキスト
Menu メニューの背景
MenuText メニューのテキスト
Scrollbar スクロールバー
ThreeDDarkShadow 立体の暗い影
ThreeDFace 立体の表面
ThreeDHighlight 立体の光の当たっている面
ThreeDLightShadow 立体の明るい影
ThreeDShadow 立体の影
Window ウィンドウの背景
WindowFrame ウィンドウのフレーム
WindowText ウィンドウのテキスト

カラーネームリスト

カラーネームリストです。140色で、Netscapeで定義され、Microsoftでもサポートされましたが、両者では、同じ色名を指定しても、違う色になる場合が多いです。
また、WINDOWSカラーパレットによっても思わぬ色になることがあります。

Netscape NavigatorやInternet Explorerにおいて保証されている色、216色パレットをおすすめします。

どうしても色名を使用したい場合は、16色パレットなら安全です。

色名RGB16進
white                     255255255#FFFFFF
whitesmoke  245245245#F5F5F5
gainsboro  220220220#DCDCDC
lightgrey  211211211#D3D3D3
silver  192192192#C0C0C0
darkgray  169169169#A9A9A9
gray  128128128#808080
dimgray  105105105#696969
black  0 0 0 #000000
red  2550 0 #FF0000
orangered  25569 0 #FF4500
tomato  25599 71 #FF6347
coral  25512780 #FF7F50
salmon  250128114#FA8072
lightsalmon  255160122#FFA07A
darksalmon  233150122#E9967A
peru  20513363 #CD853F
saddlebrown  13969 19 #8B4513
sienna  16082 45 #A0522D
chocolate  21010530 #D2691E
sandybrown  24416496 #F4A460
darkred  1390 0 #8B0000
maroon  1280 0 #800000
brown  16542 42 #A52A2A
firebrick  17834 34 #B22222
crimson  22020 60 #DC143C
indianred  20592 92 #CD5C5C
lightcoral  240128128#F08080
rosybrown  188143143#BC8F8F
palevioletred  219112147#DB7093
deeppink  25520 147#FF1493
hotpink  255105180#FF69B4
lightpink  255182193#FFB6C1
pink  255192203#FFC0CB
mistyrose  255228225#FFE4E1
linen  250240230#FAF0E6
seashell  255245238#FFF5EE
lavenderblush  255240245#FFF0F5
snow  255250250#FFFAFA
yellow  2552550 #FFFF00
gold  2552150 #FFD700
orange  2551650 #FFA500
darkorange  2551400 #FF8C00
goldenrod  21816532 #DAA520
darkgoldenrod  18413411 #B8860B
darkkhaki  189183107#BDB76B
burlywood  222184135#DEB887
tan  210180140#D2B48C
khaki  240230140#F0E68C
peachpuff  255218185#FFDAB9
navajowhite  255222173#FFDEAD
palegoldenrod  238232170#EEE8AA
moccasin  255228181#FFE4B5
wheat  245222179#F5DEB3
bisque  255228196#FFE4C4
blanchedalmond  255235205#FFEBCD
papayawhip  255239213#FFEFD5
cornsilk  255248220#FFF8DC
lightyellow  255255224#FFFFE0
lightgoldenrodyellow  250250210#FAFAD2
lemonchiffon  255250205#FFFACD
antiquewhite  250235215#FAEBD7
beige  245245220#F5F5DC
oldlace  253245230#FDF5E6
ivory  255255240#FFFFF0
floralwhite  255250240#FFFAF0
greenyellow  17325547 #ADFF2F
yellowgreen  15420550 #9ACD32
olive  1281280 #808000
darkolivegreen  85 10747 #556B2F
olivedrab  10714235 #6B8E23
chartreuse  1272550 #7FFF00
lawngreen  1242520 #7CFC00
lime  0 2550 #00FF00
limegreen  50 20550 #32CD32
forestgreen  34 13934 #228B22
green  0 1280 #008000
darkgreen  0 1000 #006400
seagreen  46 13987 #2E8B57
mediumseagreen  60 179113#3CB371
darkseagreen  143188143#8FBC8F
lightgreen  144238144#90EE90
palegreen  152251152#98FB98
springgreen  0 255127#00FF7F
mediumspringgreen  0 250154#00FA9A
honeydew  240255240#F0FFF0
mintcream  245255250#F5FFFA
azure  240255255#F0FFFF
lightcyan  224255255#E0FFFF
aliceblue  240248255#F0F8FF
darkslategray  47 79 79 #2F4F4F
steelblue  70 130180#4682B4
mediumaquamarine  102205170#66CDAA
aquamarine  127255212#7FFFD4
mediumturquoise  72 209204#48D1CC
turquoise  64 224208#40E0D0
lightseagreen  32 178170#20B2AA
darkcyan  0 139139#008B8B
teal  0 128128#008080
cadetblue  95 158160#5F9EA0
darkturquoise  0 206209#00CED1
aqua  0 255255#00FFFF
cyan  0 255255#00FFFF
lightblue  173216230#ADD8E6
powderblue  176224230#B0E0E6
paleturquoise  175238238#AFEEEE
skyblue  135206235#87CEEB
lightskyblue  135206250#87CEFA
deepskyblue  0 191255#00BFFF
dodgerblue  30 144255#1E90FF
ghostwhite  248248255#F8F8FF
lavender  230230250#E6E6FA
lightsteelblue  176196222#B0C4DE
slategray  112128144#708090
lightslategray  119136153#778899
indigo  75 0 130#4B0082
darkslateblue  72 61 139#483D8B
midnightblue  25 25 112#191970
navy  0 0 128#000080
darkblue  0 0 139#00008B
slateblue  10690 205#6A5ACD
mediumslateblue  123104238#7B68EE
cornflowerblue  100149237#6495ED
royalblue  65 105225#4169E1
mediumblue  0 0 205#0000CD
blue  0 0 255#0000FF
thistle  216191216#D8BFD8
plum  221160221#DDA0DD
orchid  218112214#DA70D6
violet  238130238#EE82EE
fuchsia  2550 255#FF00FF
magenta  2550 255#FF00FF
mediumpurple  147112219#9370DB
mediumorchid  18685 211#BA55D3
darkorchid  15350 204#9932CC
blueviolet  13843 226#8A2BE2
darkviolet  1480 211#9400D3
purple  1280 128#800080
darkmagenta  1390 139#8B008B
mediumvioletred  19921 133#C71585

Home/Menu/スタイルシート概説リファレンス