ここでは CSS のデータ形式について説明します。
色を指定します。CSS2 で色を指定する方法は大きく分けて三つあります。数値による指定、色名による指定、そしてシステムカラーの指定です。
数値による色指定は、光の三原色である「赤」「緑」「青」それぞれの強さを決めることによって行います。指定法は 4種類あります。
# に続いて6桁の16進数で指定。#ffcc99 と指定すると、赤 ff, 緑 cc, 青 99 と指定したことになります。
# に続いて3桁の16進数で指定。#fc9 は #ffcc99 と同じ指定になります。
rgb 関数を用いて 0〜255 の10進数を3つ列挙して指定。rgb(160,32,0) は #A02000 と同じ指定になります。
rgb 関数を用いて 0%〜100% のパーセント値を3つ列挙して指定。rgb(100%,50%,0%) は #ff8000 と同じ指定になります。
以下に例を示します。
em{ color: #f00; }
strong{ color: #ff0000; }
q{ color: rgb(255,0,0); }
cite{ color: rgb(100%,0%,0%); }
いずれも「赤」を最大に、「緑」、「青」を最低に設定しています。文字色は赤になります。
rgb 関数を使う方式では、負数の指定や 255,100% を越える値の指定も可能です。通常のモニタは 0〜255, 0%〜100% の範囲しか扱うことができませんので、負の値は 0 と、255 を越える指定は 255 と同一視されます。rgb(300,0,-50) という指定は rgb(255,0,0) と同じです。なお、数値の前後には空白を含めても構いませんが、引用符で括ってはいけません。
しかし、媒体によってはそれを越える指定も再現できるかも知れません。逆に、0〜255 の範囲にある色指定が再現できないこともあり得ます。
キーワードとして色の名前を指定することもできます。CSS2 で色名として使えるキーワードは、以下の 16種です。
aqua …… #00ffff と同じです。
black …… #000000 と同じです。
blue …… #0000ff と同じです。
fuchsia …… #ff00ff と同じです。
gray …… #808080 と同じです。
green …… #008000 と同じです。
lime …… #00ff00 と同じです。
maroon …… #800000 と同じです。
olive …… #808000 と同じです。
purple …… #800080 と同じです。
red …… #ff0000 と同じです。
silver …… #c0c0c0 と同じです。
teal …… #008080 と同じです。
white …… #ffffff と同じです。
yellow …… #ffff00 と同じです。
以下に例を掲げます。
em{ background-color: white; }
strong{ background-color: yellow; }
なお、キーワードを引用符で括ってはいけません。"red" と書くと、それは色名のキーワードではなく、"red" という文字列を指定したものと見なされます。
CSS2 では色としてシステムカラーを指定することもできます。システムカラーとは、ユーザの環境でシステムの色として設定されている物です。以下のような物があります。
ActiveBorder …… アクティブウィンドウの境界
ActiveCaption …… アクティブウィンドウのタイトル
AppWorkspace …… MDIアプリケーションの背景
Background …… デスクトップの背景
ButtonFace …… ボタンの表面
ButtonHighlight …… ボタンのハイライト
ButtonShadow …… ボタンの影
ButtonText …… ボタンの文字
CaptionText …… タイトルバーの文字やスクロールバーの矢印など
GrayText …… グレイアウト(選択不能)テキスト。
Highlight …… 選択された項目
HighlightText …… 選択されたテキスト
InactiveBorder …… 非アクティブウィンドウの境界
InactiveCaption …… 非アクティブタイトルバー
InactiveCaptionText …… 非アクティブタイトルバーの文字
InfoBackground …… ツールチップの背景
InfoText …… ツールチップの文字
Menu …… メニューの背景
MenuText …… メニューの文字
ThreeDDarkShadow …… 立体の暗い影
ThreeDFace …… 立体の表面
ThreeDHighlight …… 立体のハイライト
ThreeDLightShadow …… 立体の明るい影
ThreeDShadow …… 立体の影
Window …… ウィンドウの背景
WindowFrame …… ウィンドウの枠
WindowText …… ウィンドウの文字
参照する画像、音声、スタイルシートなどの URI を指定します。CSS2 で URI を指定するには、url() 関数を使います。
以下に例を掲げます。
body { background-image: url( "ebibg.png" ); }
div { background-image: url('http://foo.bar.baz/test.jpg'); }
li { list-style-image: url(http://foo.bar.baz/mark.png)}
url(指定するURI) の形です。URI は二重引用符や単引用符で括っても構いませんし、括らなくても構いません。また前後に空白を入れても構いません。
相対 URI の指定が、スタイルシートからの位置であることに注意してください。たとえば、http://foo.com/html.html が http://bar.com/css.css を参照しており、css.css の中に url(test.png) という記述があったとしますと、これは http://bar.com/test.png を参照することになります。
パーセント値を指定します。100%, 50% などの値の他、-32%, +5% など符合つきの値も指定できます。パーセント値が何を意味するかはプロパティによりけりです。解説を参照してください。
長さを指定します。CSS2 では様々な単位の指定ができます。
em …… font-size の算出値を参照します。
ex …… フォントの x-height の値を参照します。em が文字 "M" の高さだとすれば、x-height は文字 "x" の高さに相当します。
px …… ピクセル数を指定します。
in …… インチで指定します。1インチは約 2.54cm に相当します。
cm …… センチメートルで指定します。
mm …… ミリメートルで指定します。
pt …… ポイントで指定します。1ポイントは 1インチの 72分の1に相当します。
pc …… パイカで指定します。1パイカは 12ポイントに相当します。
著者がスタイルシートに絶対値を指定すると、ユーザが文字サイズなどを変更できなくなることがありますので注意してください。ユーザースタイルシートには絶対値を指定しても構いませんが、著者のスタイルシートには極力相対値を使うようにした方が良いでしょう。
単位なしの実数値を指定します。1.52, -1500, 0, +7 などの指定ができます。
単位なしの整数値を指定します。4, 0, -3, +8, などが指定できます。
文字列を指定します。指定したい文字列を、二重引用符あるいは単引用符で括って記します。引用符を忘れるとキーワードとみなされますので注意してください。
逆に、キーワードを引用符で括ってしまうと文字列とみなされます。
clip プロパティの値として形状を指定することがあります。矩形を指定する場合には rect() 関数を使います。
rect (<top> <right> <bottom> <left>)
<top>, <right>, <bottom>, <left> は、それぞれ上、右、下、左からの長さを指定するか、あるいは値 auto を指定できます。
CSS2 で指定できる形状は矩形だけです。
CSS2 では、リスト項目、見出し、その他の要素に連番を振るためにカウンタを使用することが出来ます。カウンタは contentプロパティの値としてのみ指定されます。
単に一つの要素をカウントする場合は、counter() 関数を使います。書式は counter(識別子, スタイル) です。識別子はカウンタの名称を表す任意の識別子で、他のカウンタと区別するために使われます。スタイルはカウンタの文字種を示し、list-style-typeプロパティと同じ値を指定できます。スタイルの値は省略可能で、省略すると decimal が指定されたものとみなされます。
ネストしたカウンタを実現するために、counters() 関数も用意されています。たとえば第一部第二章の第一項目にあたる見出しに 1-2-1 という番号を振りたいような場合、こちらを利用します。書式は counters(識別子, 区切り文字列, スタイル) です。区切り文字列というのはカウンタを区切る文字列で、今掲げた例では "-" が区切り文字になっています。識別子とスタイルについては counter() と同様で、やはりスタイルは省略可能です。
CSS2 は多くのメディアを想定しています。
aural …… 音声による読み上げを行う環境を想定しています。
braille …… 突起が上下して点字の手触りを伝えるような環境です。
embossed …… 点字プリンタなど、点字の凹凸をページ出力するような環境です。
handheld …… 携帯端末です。画面サイズ、色などに制約のある環境を想定しています。
print …… 印刷、印刷プレビューなどの環境です。
projection …… 映写機や OHP フィルムへの印刷など、スクリーンへの投影を前提とする環境です。
screen …… カラーのコンピュータスクリーンを想定しています。
tty …… 全てを固定ピッチの文字などで表現する環境です。
tv …… テレビ画面です。解像度は低く、色が表現でき、スクロールに制限があり、音声が使えます。
目で見て情報を得るタイプのメディアです。墨字や図形などによって表現します。handheld, print, projection, screen, tty, tv が該当します。
耳で聞いて情報を得るタイプのメディアです。音声や音楽などで表現します。aural, tv が該当します。
手などで触って情報を得るタイプのメディアです。点字や凹凸によって表現します。braille, emboss が該当します。
ページによって区切られるメディアです。emboss, print, projection が該当します。tv はこちらに該当することもありますし、連続メディアに該当することもあります。
文字などを際限なく連続して表示できるメディアです。aural, braille, handheld, screen, tty が該当します。tv はこちらに該当することもあります。
表示領域がグリッド(升目)によって区切られているメディアです。このメディアでは、普通、一つの升目には一つの文字しか入れられませんし、画像を表示することもできません。braille, emboss, tty が該当します。handheld が該当することもあります。
グリッドの制限がなく、自由にビットマップイメージを表示できるメディアです。print, projection, screen, tv が該当します。handheld が該当することもあります。
ユーザによる操作を受け付けないメディアです。print, projection が該当します。他の全てのメディアもこちらに該当する可能性があります。
ユーザによる操作を受け付けるメディアです。print, projection を除く全てのメディアにはこちらに該当する可能性があります。