いろいろな値の指定について

CSSでは、ボーダーの太さや、フォントサイズ、色の指定等に様々な値が使用されます。すでに、色の指定で色の値は紹介しましたが、ここでは、その他の値について紹介します。

数値

値には、頻繁に数値が使用されます。色の指定では16進数がよく使用されますが、その他は通常、10進数で記述します。数値は、マイナス値や小数も指定可能ですが、ブラウザによっては認識しないものもありますし、マイナス値を指定しても意味のない指定になることが多いので、なるべく0以上の整数を使用した方が良いでしょう。

長さ、大きさの単位

CSSには、数値を指定する際の様々な単位が用意されています。

ボーダーの太さ等、長さや、大きさの指定には相対値によるものと絶対値によるものがあります。「cm」や「mm」はお馴染みのものですが、Webデザインでは、「em」や「px」、「pt」がよく使用されます。

尚、「0」（ゼロ）を指定する際は、単位は省略することができます。

パーセント

色の指定にパーセントが使用できるように、長さの値等にパーセントを使用し、割合で指定することもできます。このパーセントにも、マイナス値や小数値が使用できます。

その他（角度、時間）

CSSでは、ビジュアル（見た目）に関することの他に、音声に関することも定義されています。ただし、一般的なブラウザでは、音声に関することはサポートされていません。ここでは、単位のリストアップに留めます。

• deg
• grad
• rad
• ms
• s
• Hz
• kHz

キーワード

色の指定での「red」や「blue」、ボーダーの指定の「thick」等、キーワードによる値もあります。指定可能なキーワードはプロパティごとに異なります。

URL

背景画像の指定のように、URLを値として指定する場合もあります。値にURLを指定する場合は、urlと記述し、「(」と「)」で囲みます。

パスは「"」（ダブルクォーテーション）か「'」（シングルクォーテーション）で囲んでも構いません。

background: url(images/back.gif);
background: url( "images/back.gif" );
background: url( 'images/back.gif' );

指定するURLは、相対パスでも絶対パスでも構いません。ただし、相対パスは、CSSファイルを用意してスタイルを記述する場合、CSSファイルからの相対パスを記述します。HTML/XHTMLファイルにスタイルを記述する場合は、そのHTML/XHTMLファイルからの相対パスを記述します。

テキスト

プロパティの値には、テキスト（任意の文字等）を指定することもあります。テキストを指定する際は、テキストを「"」（ダブルクォーテーション）か、「'」（シングルクォーテーション）で囲みます。

まとめ

ボーダーの指定

ページの先頭

マージンとパディング