by 2 contributors:

この文書では、CSS 中でどのように色を指定するかについて詳細に説明します。

サンプルスタイルシートに、背景色を指定出来るようになります。

解説: 色

このチュートリアルでは、限られた名前付きの色だけを利用してきました。 CSS 2 では 17 個しか名前付きの色が定義されていません。 それらのいくつかの名前は、想像と異なるかもしれません。

  black   gray   silver   white  
プライマリー red   lime   blue  
セカンダリー yellow   aqua   fuchsia  
  maroon   orange   olive   purple   green   navy   teal  

 

詳細情報
ブラウザが上記以上の名前付きの色をサポートしている可能性もあります
dodgerblue   peachpuff   tan   firebrick   aquamarine  

拡張された色の名前リストについては、CSS 3 カラーモジュールの SVG 色キーワード を参照してください。利用者のブラウザがサポートしていない色を利用しないように注意してください。

より広い色空間を利用するためには、赤、緑、青の各色の割合を、# の後に 3 文字の 16 進数 、0 – 9 か a – f、a – f は 10 – 15 を意味します、で指定してください。

black   #000
pure red   #f00
pure green   #0f0
pure blue   #00f
white   #fff

完全な色空間を利用するためには、それぞれの色について 2 文字の 16 進数を利用します。

black   #000000
pure red   #ff0000
pure green   #00ff00
pure blue   #0000ff
white   #ffffff

これらの 6 桁の 16 進数は画像ソフトやその他のツールで取得可能です。

Examples
少し練習すると、ほとんどの場面で 3 文字色指定は手動で調整できるようになります。
赤から始めます   #f00
桃色に近づけるため、緑・青を追加   #f77
橙に近づけるため、緑を追加   #fa7
暗くするため、全ての色を減らす   #c74
飽和を減らすため、色の値を近づける   #c98
色同士を完全に同じにすると、灰色   #ccc
空色のようなパステル調を出すには:
白から始めます:   #fff
他の色の値を少し減らします:   #eef

 

More details
色の指定は、上記以外にでも、RGB 値を 0 – 255 の 10 進数やパーセント値で指定できます。

たとえば、次の色はマロン (濃い赤) になります :

rgb(128, 0, 0)


色指定の詳細については、CSS 仕様書の をご覧ください。

メニューや ThreeDFace のようなシステム色とあわせるための情報として、CSS 仕様書の CSS2 システム色 があります。


色のプロパティー

color プロパティーをすでに利用しました。

同様に background-color プロパティーを指定することで、要素の背景色を変えることができます。

背景色には transparent を指定でき、明示的に親要素の背景色を透過して、明示的に上書きすることも可能です。

Example
このチュートリアルの サンプル ボックスは、このような 淡黄色を背景色にしています。
background-color: #fffff4;

より詳細は のボックスは淡灰色を使っています。

background-color: #f4f4f4;

試してみましょう: カラーコードを利用する

CSS ファイルを編集します。 以下で太字で書かれている変更を付け加え、最初の文字を淡青色の背景にしてください。 (ファイルのレイアウトとコメントは以下のものとは異なるとは思いますが、 好みのレイアウトやコメントの形式を利用してください。)

/*** CSS Tutorial: Color page ***/
 
/* page font */
body {font: 16px "Comic Sans MS", cursive;}
 
/* paragraphs */
p {color: blue;}
#first {font-style: italic;}
 
/* initial letters */
strong {
  color: red;
  background-color: #ddf;
  font: 200% serif;
  }
 
.carrot {color: red;}
.spinach {color: green;}

ブラウザを再読み込みして結果を見てみましょう。

Cascading Style Sheets
Cascading Style Sheets

 

Challenge
結果を変えずに、CSS ファイルの全ての色の名前を 3 桁の数字のカラーコードにしてみましょう。

(完全に同じに出来ないかもしれませんが、近い色にできると思います。 完全に同じにするには 6 桁のカラーコードが必要ですが、選択には CSS 仕様書を参照するか、画像ツールを利用する必要があるかもしれません。)


次は ?

あなたのサンプルは完全にスタイルと中身に分離されました。

次のページでは、この完全分離の状態に例外を作る方法を説明します。 Content

ドキュメントのタグと貢献者

Contributors to this page: teoli, ethertank
最終更新者: teoli,