• 趣味のWebデザイン＞Lecture＞CSS＞css_color
• Prev
• Next
• [E]

単位と色／CSS講座

• 単位と色
  • 長さの単位
  • 色の指定
    • RGB値とは?
  • カラーチャート
    • 16色パレット
    • システムカラー
    • Webセーフカラー

CSS2の単位と色をまとめました。

長さの単位

長さや大きさは、数字に単位をつけて指定します。

長さ（Lengths）

相対単位（relative units）

• em: 関連要素の'font-size'の値を参照する
• ex: 関連フォントの'x-height'を参照する（'x-height'は小文字の「x」の高さと等しい場合が多いが'ex'は「x」という文字を含まないフォントに対しても定義される。）
• px: 閲覧しているデバイスの解像度を参照する

絶対単位（absolute length）

• in: インチ -- 1inは2.54cmに等しい
• cm: センチメートル
• mm: ミリメートル
• pt: ポイント -- 1ptは1/72inに等しい
• pc: パイカ -- 1pcは12ptに等しい

パーセント値（Percentages）

他の値に対する相対値

記述例を示します。

{font-size:12pt} /* フォントサイズ12ポイント /*
{margin-left:20px} /* 左の外側余白を20ピクセル /*
{margin-left:20%} /* 左の外側余白を画面幅の20% /*

色の指定

色を指定する方法は2通りあります。

1. 色名で指定
   1. 16色パレット
   2. システムカラー（ユーザ環境のシステム色）
2. RGB値で指定
   1. # に続く6桁の16進数で指定。(#008000で緑）
   2. # に続いて3桁の16進数で指定。(#08fは#0088ffと同じ）
   3. rgb 関数を用い 0～255 の10進数を3つ列挙。（rgb(0,128,0)は#008000と同じ）
   4. rgb 関数を用い 0%～100% のパーセント値を3つ列挙。（rgb(0%,50%,0%)は#008000と同じ）

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

{color:#080} /* #080は#008800に対応するので少し緑味が強い /*

RGB値で指定……とは?

テレビやパソコンなど、発光することで発色する画面では、すべての色が赤緑青（RGB）という光の3原色の組み合わせから作られます。WWWでは各原色を256階調とし、その組み合わせで256×256×256＝16777216色が使用できることになっています。

各原色につき256もの階調をどのように指定したらよいのでしょうか。

#******というのは、赤、緑、青の順に16進数（0123456789abcdef）をふたつずつ並べる方法です。1色につき16進数がふたつなので16×16＝256階調を指定できるわけです。

#***は赤、緑、青の順に16進数をひとつずつ並べるので、全部で4096色しか指定できません。しかし特別な事情がない限りこれで十分でしょう。

rgb(*,*,*)は0～255の10進数でそのまま各原色の階調を記述します。最も明解な指定法ですが、思いのほか希望の色を作ることが難しい方法です。

rgb(*%,*%,*%)は％指定で各原色を100階調で記述する方法です。これも手を出さないのが無難です。

RGB値と実際の発色

Webセーフカラー一覧を眺めていると、RGB値と実際の発色の関係が次第に見えてくるでしょう。ちょっとした慣れが必要だと思います。はじめのうちはWebセーフカラーだけを使うとよいのではないでしょうか。

カラーチャート

1. 16色パレット
2. システムカラー
3. Webセーフカラー

16色パレット

CSS2で色名として使えるキーワードは、以下の16種です。数年前よりNetscape NavigatorおよびInternet Explorerでは140の色名に対応していますが、仕様が追随する可能性はありません。将来的には以下の16色以外の色名による指定に対応するブラウザは消えるでしょう。

システムカラー

システムカラーは、CSS2で定められた色名です。ユーザのシステム設定が反映されるため、とくに身体障害等への対応のためシステム設定を調整している閲覧者に対して、効果的なデザインを提供できるのが利点です。

Webセーフカラー

各256階調のRGB値を各6階調としたのがWebセーフカラーです。6×6×6＝216色あります。

RGB値を指定する4つの表現それぞれについて、6階調が実際のどのような数値に対応するかを以下にまとめました。

Information

• Prev：CSSの基礎／CSS講座
• index
• Next：CSS Level 2 プロパティ一覧

• 筆者は徳保隆夫（とくほたかお）です。1980年愛知県生まれ。千葉県成田市育ち。メーカーに技術者として就職後、関東各地を転々としています。……という設定です。
• 私の文章は全て実記ではなく小説なので、客観的事実と異なる記述を多々含みます。
• 著作権は主張しません。詳細はInfoで、過去ログなどはNoteでご案内します。