diff options
| -rw-r--r-- | files/ja/_redirects.txt | 10 | ||||
| -rw-r--r-- | files/ja/conflicting/learn/css/building_blocks/values_and_units/index.html | 350 |
2 files changed, 5 insertions, 355 deletions
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 18b1668683..9b1cf4b092 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -346,7 +346,7 @@ /ja/docs/CSS/Getting_Started/Boxes /ja/docs/conflicting/Learn/CSS/Building_blocks /ja/docs/CSS/Getting_Started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /ja/docs/CSS/Getting_Started/Challenge_solutions /ja/docs/Web/Guide/CSS/Getting_started/Challenge_solutions -/ja/docs/CSS/Getting_Started/Color /ja/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units +/ja/docs/CSS/Getting_Started/Color /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color /ja/docs/CSS/Getting_Started/Content /ja/docs/Learn/CSS/Howto/Generated_content /ja/docs/CSS/Getting_Started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/CSS/Getting_Started/JavaScript /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents @@ -634,7 +634,7 @@ /ja/docs/CSS:@-moz-document /ja/docs/Web/CSS/@document /ja/docs/CSS:Getting_Started /ja/docs/Learn/CSS /ja/docs/CSS:Getting_Started:Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance -/ja/docs/CSS:Getting_Started:Color /ja/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units +/ja/docs/CSS:Getting_Started:Color /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color /ja/docs/CSS:Getting_Started:Content /ja/docs/Learn/CSS/Howto/Generated_content /ja/docs/CSS:Getting_Started:How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/CSS:Getting_Started:Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors @@ -3657,7 +3657,7 @@ /ja/docs/Web-d/Guide/CSS/Getting_started/Boxes /ja/docs/conflicting/Learn/CSS/Building_blocks /ja/docs/Web-d/Guide/CSS/Getting_started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /ja/docs/Web-d/Guide/CSS/Getting_started/Challenge_solutions /ja/docs/Web/Guide/CSS/Getting_started/Challenge_solutions -/ja/docs/Web-d/Guide/CSS/Getting_started/Color /ja/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units +/ja/docs/Web-d/Guide/CSS/Getting_started/Color /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color /ja/docs/Web-d/Guide/CSS/Getting_started/Content /ja/docs/Learn/CSS/Howto/Generated_content /ja/docs/Web-d/Guide/CSS/Getting_started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/Web-d/Guide/CSS/Getting_started/JavaScript /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents @@ -4345,7 +4345,7 @@ /ja/docs/Web/CSS/Getting_started/Boxes /ja/docs/conflicting/Learn/CSS/Building_blocks /ja/docs/Web/CSS/Getting_started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /ja/docs/Web/CSS/Getting_started/Challenge_solutions /ja/docs/Web/Guide/CSS/Getting_started/Challenge_solutions -/ja/docs/Web/CSS/Getting_started/Color /ja/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units +/ja/docs/Web/CSS/Getting_started/Color /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color /ja/docs/Web/CSS/Getting_started/Content /ja/docs/Learn/CSS/Howto/Generated_content /ja/docs/Web/CSS/Getting_started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/Web/CSS/Getting_started/JavaScript /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents @@ -4536,7 +4536,7 @@ /ja/docs/Web/Guide/CSS/Getting_started /ja/docs/Learn/CSS /ja/docs/Web/Guide/CSS/Getting_started/Boxes /ja/docs/conflicting/Learn/CSS/Building_blocks /ja/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance -/ja/docs/Web/Guide/CSS/Getting_started/Color /ja/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units +/ja/docs/Web/Guide/CSS/Getting_started/Color /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color /ja/docs/Web/Guide/CSS/Getting_started/Content /ja/docs/Learn/CSS/Howto/Generated_content /ja/docs/Web/Guide/CSS/Getting_started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/Web/Guide/CSS/Getting_started/JavaScript /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents 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 ---- -<p>この文書では、CSS 中でどのように色を指定するかについて詳細に説明します。</p> - -<p>サンプルスタイルシートに、背景色を指定出来るようになります。</p> - -<p>{{ 英語版章題("Information: Color") }}</p> - -<h3 id=".E8.A7.A3.E8.AA.AC:_.E8.89.B2" name=".E8.A7.A3.E8.AA.AC:_.E8.89.B2">解説: 色</h3> - -<p>このチュートリアルでは、限られた名前付きの色だけを利用してきました。 CSS 2 では 17 個しか名前付きの色が定義されていません。 それらのいくつかの名前は、想像と異なるかもしれません。</p> - -<table style="border: 0px; margin-left: 2em; text-align: right;"> - <tbody> - <tr> - <td> </td> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: black;"> </td> - <td>gray</td> - <td style="width: 2em; height: 2em; background-color: gray;"> </td> - <td>silver</td> - <td style="width: 2em; height: 2em; background-color: silver;"> </td> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> - </tr> - <tr> - <td>プライマリー</td> - <td>red</td> - <td style="width: 2em; height: 2em; background-color: red;"> </td> - <td>lime</td> - <td style="width: 2em; height: 2em; background-color: lime;"> </td> - <td>blue</td> - <td style="width: 2em; height: 2em; background-color: blue;"> </td> - </tr> - <tr> - <td>セカンダリー</td> - <td>yellow</td> - <td style="width: 2em; height: 2em; background-color: yellow;"> </td> - <td>aqua</td> - <td style="width: 2em; height: 2em; background-color: aqua;"> </td> - <td>fuchsia</td> - <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> - </tr> - <tr> - <td> </td> - <td>maroon</td> - <td style="width: 2em; height: 2em; background-color: maroon;"> </td> - <td>orange</td> - <td style="width: 2em; height: 2em; background-color: orange;"> </td> - <td>olive</td> - <td style="width: 2em; height: 2em; background-color: olive;"> </td> - <td>purple</td> - <td style="width: 2em; height: 2em; background-color: purple;"> </td> - <td>green</td> - <td style="width: 2em; height: 2em; background-color: green;"> </td> - <td>navy</td> - <td style="width: 2em; height: 2em; background-color: navy;"> </td> - <td>teal</td> - <td style="width: 2em; height: 2em; background-color: teal;"> </td> - </tr> - </tbody> -</table> - -<p> </p> - -<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;"> - <caption>詳細情報</caption> - <tbody> - <tr> - <td>ブラウザが上記以上の名前付きの色をサポートしている可能性もあります - <table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;"> - <tbody> - <tr> - <td>dodgerblue</td> - <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> - <td>peachpuff</td> - <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> - <td>tan</td> - <td style="width: 2em; height: 2em; background-color: tan;"> </td> - <td>firebrick</td> - <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> - <td>aquamarine</td> - <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> - </tr> - </tbody> - </table> - - <p>拡張された色の名前リストについては、CSS 3 カラーモジュールの <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG 色キーワード</a> を参照してください。利用者のブラウザがサポートしていない色を利用しないように注意してください。</p> - </td> - </tr> - </tbody> -</table> - -<p>より広い色空間を利用するためには、赤、緑、青の各色の割合を、# の後に 3 文字の<em>16 進数</em> 、0 – 9 か a – f、a – f は 10 – 15 を意味します、で指定してください。</p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#0f0</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#00f</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - </tbody> -</table> - -<p>完全な色空間を利用するためには、それぞれの色について 2 文字の 16 進数を利用します。</p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#ff0000</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#00ff00</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#0000ff</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#ffffff</code></td> - </tr> - </tbody> -</table> - -<p>これらの 6 桁の 16 進数は画像ソフトやその他のツールで取得可能です。</p> - -<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em;"> - <caption>Examples</caption> - <tbody> - <tr> - <td>少し練習すると、ほとんどの場面で 3 文字色指定は手動で調整できるようになります。 - <table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>赤から始めます</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>桃色に近づけるため、緑・青を追加</td> - <td style="width: 2em; height: 2em; background-color: #f77;"> </td> - <td><code>#f77</code></td> - </tr> - <tr> - <td>橙に近づけるため、緑を追加</td> - <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> - <td><code>#fa7</code></td> - </tr> - <tr> - <td>暗くするため、全ての色を減らす</td> - <td style="width: 2em; height: 2em; background-color: #c74;"> </td> - <td><code>#c74</code></td> - </tr> - <tr> - <td>飽和を減らすため、色の値を近づける</td> - <td style="width: 2em; height: 2em; background-color: #c98;"> </td> - <td><code>#c98</code></td> - </tr> - <tr> - <td>色同士を完全に同じにすると、灰色</td> - <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> - <td><code>#ccc</code></td> - </tr> - </tbody> - </table> - </td> - </tr> - <tr> - <td>空色のようなパステル調を出すには: - <table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>白から始めます:</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - <tr> - <td>他の色の値を少し減らします:</td> - <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> - <td><code>#eef</code></td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;"> - <caption>More details</caption> - <tbody> - <tr> - <td>色の指定は、上記以外にでも、RGB 値を 0 – 255 の 10 進数やパーセント値で指定できます。 - <p>たとえば、次の色はマロン (濃い赤) になります :</p> - - <div style="width: 24em;"> - <pre> -rgb(128, 0, 0) -</pre> - </div> - - <p><br> - 色指定の詳細については、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">色</a> をご覧ください。</p> - - <p>メニューや ThreeDFace のようなシステム色とあわせるための情報として、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 システム色</a> があります。</p> - </td> - </tr> - </tbody> -</table> - -<p><br> - {{ 英語版章題("Color properties") }}</p> - -<h4 id=".E8.89.B2.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.83.BC" name=".E8.89.B2.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.83.BC">色のプロパティー</h4> - -<p><code>color</code> プロパティーをすでに利用しました。</p> - -<p>同様に <code>background-color</code> プロパティーを指定することで、要素の背景色を変えることができます。</p> - -<p>背景色には <code>transparent</code> を指定でき、明示的に親要素の背景色を透過して、明示的に上書きすることも可能です。</p> - -<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em;"> - <caption>Example</caption> - <tbody> - <tr> - <td>このチュートリアルの <strong>サンプル</strong> ボックスは、このような 淡黄色を背景色にしています。 - <div style="width: 24em;"> - <pre> -background-color: #fffff4; -</pre> - </div> - - <p><strong>より詳細は</strong> のボックスは淡灰色を使っています。</p> - - <div style="width: 24em;"> - <pre> -background-color: #f4f4f4; -</pre> - </div> - </td> - </tr> - </tbody> -</table> - -<p>{{ 英語版章題("Action: Using color codes") }}</p> - -<h3 id=".E8.A9.A6.E3.81.97.E3.81.A6.E3.81.BF.E3.81.BE.E3.81.97.E3.82.87.E3.81.86:_.E3.82.AB.E3.83.A9.E3.83.BC.E3.82.B3.E3.83.BC.E3.83.89.E3.82.92.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B" name=".E8.A9.A6.E3.81.97.E3.81.A6.E3.81.BF.E3.81.BE.E3.81.97.E3.82.87.E3.81.86:_.E3.82.AB.E3.83.A9.E3.83.BC.E3.82.B3.E3.83.BC.E3.83.89.E3.82.92.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B">試してみましょう: カラーコードを利用する</h3> - -<p>CSS ファイルを編集します。 以下で太字で書かれている変更を付け加え、最初の文字を淡青色の背景にしてください。 (ファイルのレイアウトとコメントは以下のものとは異なるとは思いますが、 好みのレイアウトやコメントの形式を利用してください。)</p> - -<div style="width: 32em;"> -<pre class="eval">/*** 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; - <strong>background-color: #ddf;</strong> - font: 200% serif; - } - -.carrot {color: red;} -.spinach {color: green;} -</pre> -</div> - -<p>ブラウザを再読み込みして結果を見てみましょう。</p> - -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<p> </p> - -<table style="background-color: #ffe; border: 1px solid #36b; padding: 1em; width: 100%;"> - <caption>Challenge</caption> - <tbody> - <tr> - <td>結果を変えずに、CSS ファイルの全ての色の名前を 3 桁の数字のカラーコードにしてみましょう。 - <p>(完全に同じに出来ないかもしれませんが、近い色にできると思います。 完全に同じにするには 6 桁のカラーコードが必要ですが、選択には CSS 仕様書を参照するか、画像ツールを利用する必要があるかもしれません。)</p> - </td> - </tr> - </tbody> -</table> - -<p><br> - {{ 英語版章題("What next?") }}</p> - -<h4 id=".E6.AC.A1.E3.81.AF_.3F" name=".E6.AC.A1.E3.81.AF_.3F">次は ?</h4> - -<p>あなたのサンプルは完全にスタイルと中身に分離されました。</p> - -<p>次のページでは、この完全分離の状態に例外を作る方法を説明します。 <strong><a href="Content">Content</a></strong></p> |