データ

　色

<color>

• #に続く１６進数（ＲＧＢ）で指定。１桁指定は#RGB、２桁指定は#RRGGBBとなります。
  １桁指定は表示できる色数が少なくなりますが、216色パレット （セーフカラー）を使用するならば最適だと思います。カラー名カラーコード対応表を参照して下さい。
  例、１桁指定　#0f0　と２桁指定　#00ff00　は同じです。
  
  
• rgb( )の括弧内に１０進数で指定。0〜255の数値、又は1%〜100%の割合で指定しrgbを , （カンマ）で区切ります。
  最大値を越して（300とか150%）指定しても、最大値（255又は100%）として処理されます。１６進数になれていない場合は、この方法が良いでしょう。
  例、rgb(0,255,0)　と　rgb(0%,100%,0%)　は同じです。
  
  
• カラー名またはシステムカラーで指定。
  カラー名の場合、W3Cで定義された１６色のほかにもブラウザの独自拡張したカラー名があります。カラー名カラーコード対応表を参照して下さい。
  Internet Explorer 4.0以降やCSS Level2では、システムの色（ウィンドウやメニューの色等）をユーザーがカスタマイズ（好みに応じて変更）できます。Windowsでは、[画面のプロパティ]の[デザイン]タブで変更することができます。
  システムカラーとは、このシステムの色情報を、キーワードで呼び出して指定できるカラーです。カラー名と同じように指定できます。
  例えば、ページの背景色をユーザーのデスクトップの背景色と同じ色にすることが出来ます。ただし、対応ブラウザはInternet Explorer 4.0以降です。
  以下の色の名前（キーワード）を定義しています。
  
  • 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：ウィンドウの色　■こんな色になります。
  • windowfreme：ウィンドウのフレームの色　■こんな色になります。
  • windowtext：ウィンドウのテキストの色　■こんな色になります。

単位

<length>

• 絶対値
  • mm：ミリメートル
  • cm：センチメートル
  • in：インチ（1inは25.4mm）
  • pt：ポイント（1ptは1/72inでフォントサイズの一般的な単位）
  • pc：パイカ（1pcは12pt）
• 相対値
  • em：大文字のMの高さを基準にした値（font-sizeを指定した時は、親エレメントのフォントサイズが基準）
  • ex：小文字のxの高さを基準にした値
  • px：ピクセル

<percentage>

• %：親エレメントを基準にして割合を指定する時に使用します。

フォント

<family-name>

• フォント名の例
  

  Windows用	Mac用
  ＭＳ Ｐゴシック ＭＳ ゴシック ＭＳ Ｐ明朝 ＭＳ 明朝	Osaka Osaka−等幅 リュウミンライト−ＫＬ リュウミンライト−ＫＬ−等幅 中ゴシックＢＢＢ 中ゴシックＢＢＢ−等幅 平成角ゴシック 平成明朝 丸ゴシック−Ｍ
  Arial Comic Sans MS Courier New Times New Roman Verdana	Chicago Courier Geneva Helvetica Monaco Times

<generic-family>

• 一般名

  一般名	意味	フォント名の例
  serif	ひげつき（明朝）	Latin fonts	Times、Times New Roman、 Bodoni、Garamond、Minion Web、ITC Stone Serif、MS Georgia、Bitstream Cyberbit
  		Japanese fonts	Ryumin Light-KL、Kyokasho ICA、Futo Min A101
  sans-serif	ひげなし（ゴシック）	Latin fonts	Helvetica、Arial、Verdana、 MS Trebuchet、ITC Avant Garde Gothic、MS Arial、MS Verdana、Univers、Futura、ITC Stone Sans、Gill Sans、Akzidenz Grotesk
  		Japanese fonts	Shin Go、Heisei Kaku Gothic W5
  cursive	草書体	Latin fonts	Zapf-Chancery、Caflisch Script、Adobe Poetica、Sanvito、 Ex Ponto、Snell Roundhand
  fantasy	ファンタジー	Latin fonts	Western、Alpha Geometrique、Critter、Cottonwood、FB Reactor、 Studz
  monospace	等幅フォント	Latin fonts	Courier、Courier New、 MS Courier New、Prestige、Everson Mono
  		Japanese fonts	Osaka Monospaced

  一般名とは、良く似た特徴を持つフォントをカテゴリー分けしたものを言います。
  表示にあたっては、一般名の中の１つのフォント名（読者のパソコンにインストールされているもの）が選択されます。

<absolute-size>

• xx-smallからxx-largeまで順に大きくなっていきますが、ブラウザのフォントサイズテーブルに依存します。CSS Level1ではコンピュータ画面上のスケーリング係数に1.5を推奨してましたが、CSS Level2では1.2に変更されました。例えば、mediumフォントが10ptの時には（CSS Level2に対応したブラウザの場合）、largeフォントは12ptとなります。
  xx-small、x-small、small、medium、large、x-large、xx-large

<relative-size>

• 親エレメントに対する相対的なサイズ。例えば、親エレメントのフォントサイズがmediumの時に、フォントサイズの値をlargerで指定した場合、現行エレメントのフォントサイズは、lageとなる。
  smaller、larger

<number>

• 現在のフォントサイズに指定された数値の何倍かを数値で指定。
  

値の数と枠線（間隔）との対応

URL

<url>

• url( );の括弧内に表示したいURLを指定します。
  記述方法には、相対パスと絶対パスがあります。
  
  

<uri>

• url( );の括弧内に表示したいURIを指定します。
  記述方法には、相対パスと絶対パスがあります。
  

マージンとパディング

ボックスの概念図

• マージンとは、ボックス要素の周囲に空白をとる方法です。
• パディングとは、要素の内容 の周囲に空白をとる方法です。
  マージンとパディングは似ていますが、異なる点があります。
  

  マージンとパディングの簡単な違い
  相違	マージン	パディング
  空白をとる場所	枠の外側	枠の内側
  マイナスの値の指定	可	不可

Clipping

<shape>

• clip:rect( );の括弧内に表示したい部分（矩形）の上下左右位置（４箇所）を指定します。
  値は、 <length>です。
  座標の基準は、ボックス要素の上端と左端です。
  指定の順番は、clip:rect(A,B,C,D);とすると、
  • A： ボックス要素の上端から表示位置上端までの間隔
  • B： ボックス要素の左端から表示位置右端までの間隔
  • C： ボックス要素の上端から表示位置下端までの間隔
  • D： ボックス要素の左端から表示位置左端までの間隔

Copyright (C) pokochan 2000-2005
http://www.tees.ne.jp/~pokochan/style/data.html
pokochan@mx1.tees.ne.jp