CSSのデータ書式

ここでは CSS のデータ形式について説明します。

CSS のデータ形式

色を指定します。CSS2 で色を指定する方法は大きく分けて三つあります。数値による指定、色名による指定、そしてシステムカラーの指定です。

数値による色指定

数値による色指定は、光の三原色である「赤」「緑」「青」それぞれの強さを決めることによって行います。指定法は 4種類あります。

以下に例を示します。

    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種です。

以下に例を掲げます。

    em{ background-color: white; }
strong{ background-color: yellow; }

なお、キーワードを引用符で括ってはいけません。"red" と書くと、それは色名のキーワードではなく、"red" という文字列を指定したものと見なされます。

システムカラーによる色指定

CSS2 では色としてシステムカラーを指定することもできます。システムカラーとは、ユーザの環境でシステムの色として設定されている物です。以下のような物があります。

URI

参照する画像、音声、スタイルシートなどの 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 では様々な単位の指定ができます。

相対値

絶対値

著者がスタイルシートに絶対値を指定すると、ユーザが文字サイズなどを変更できなくなることがありますので注意してください。ユーザースタイルシートには絶対値を指定しても構いませんが、著者のスタイルシートには極力相対値を使うようにした方が良いでしょう。

数値

単位なしの実数値を指定します。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 は多くのメディアを想定しています。

メディアグループ

視覚メディア

目で見て情報を得るタイプのメディアです。墨字や図形などによって表現します。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 を除く全てのメディアにはこちらに該当する可能性があります。


ばけらのCSSリファレンス

HTML鳩丸倶楽部

水無月ばけら, MINAZUKI Bakera
E-mail: bakera@star.email.ne.jp