この文書では、CSS 中でどのように色を指定するかについて詳細に説明します。
サンプルスタイルシートに、背景色を指定出来るようになります。
解説: 色
このチュートリアルでは、限られた名前付きの色だけを利用してきました。 CSS 2 では 17 個しか名前付きの色が定義されていません。 それらのいくつかの名前は、想像と異なるかもしれません。
| black | gray | silver | white | |||||||||||
| プライマリー | red | lime | blue | |||||||||||
| セカンダリー | yellow | aqua | fuchsia | |||||||||||
| maroon | orange | olive | purple | green | navy | teal |
ブラウザが上記以上の名前付きの色をサポートしている可能性もあります
拡張された色の名前リストについては、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 進数は画像ソフトやその他のツールで取得可能です。
少し練習すると、ほとんどの場面で 3 文字色指定は手動で調整できるようになります。
|
||||||||||||||||||
空色のようなパステル調を出すには:
|
| 色の指定は、上記以外にでも、RGB 値を 0 – 255 の 10 進数やパーセント値で指定できます。
たとえば、次の色はマロン (濃い赤) になります : rgb(128, 0, 0)
メニューや ThreeDFace のようなシステム色とあわせるための情報として、CSS 仕様書の CSS2 システム色 があります。 |
色のプロパティー
color プロパティーをすでに利用しました。
同様に background-color プロパティーを指定することで、要素の背景色を変えることができます。
背景色には transparent を指定でき、明示的に親要素の背景色を透過して、明示的に上書きすることも可能です。
このチュートリアルの サンプル ボックスは、このような 淡黄色を背景色にしています。
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 |
| 結果を変えずに、CSS ファイルの全ての色の名前を 3 桁の数字のカラーコードにしてみましょう。
(完全に同じに出来ないかもしれませんが、近い色にできると思います。 完全に同じにするには 6 桁のカラーコードが必要ですが、選択には CSS 仕様書を参照するか、画像ツールを利用する必要があるかもしれません。) |
次は ?
あなたのサンプルは完全にスタイルと中身に分離されました。
次のページでは、この完全分離の状態に例外を作る方法を説明します。 Content