From c36c925e012b3b2c73fd92b3b92f9f7d0c99b50d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 22 May 2021 12:20:32 +0900 Subject: conflicting/Learn/CSS/Building_blocks/Values_and_units を削除 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color が内容を網羅しており、かつ新しいため。 --- .../building_blocks/values_and_units/index.html | 350 --------------------- 1 file changed, 350 deletions(-) delete mode 100644 files/ja/conflicting/learn/css/building_blocks/values_and_units/index.html (limited to 'files/ja/conflicting/learn/css') diff --git a/files/ja/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/ja/conflicting/learn/css/building_blocks/values_and_units/index.html deleted file mode 100644 index aa90a2ed13..0000000000 --- a/files/ja/conflicting/learn/css/building_blocks/values_and_units/index.html +++ /dev/null @@ -1,350 +0,0 @@ ---- -title: 色 -slug: conflicting/Learn/CSS/Building_blocks/Values_and_units -tags: - - CSS - - CSS:Getting_Started - - Getting_Started -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color -original_slug: Web/Guide/CSS/Getting_started/Color ---- -

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

- -

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

- -

{{ 英語版章題("Information: Color") }}

- -

解説: 色

- -

このチュートリアルでは、限られた名前付きの色だけを利用してきました。 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 properties") }}

- -

色のプロパティー

- -

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

- -

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

- -

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

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

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

- -
- 
-background-color: #f4f4f4;
-
-
-
- -

{{ 英語版章題("Action: Using color codes") }}

- -

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

- -

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 仕様書を参照するか、画像ツールを利用する必要があるかもしれません。)

-
- -


- {{ 英語版章題("What next?") }}

- -

次は ?

- -

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

- -

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

-- cgit v1.2.3-54-g00ecf