unslug ja: move

3 files changed, 1158 insertions, 0 deletions

diff --git a/files/ja/conflicting/learn/css/building_blocks/index.html b/files/ja/conflicting/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..379b38949d
--- /dev/null
+++ b/files/ja/conflicting/learn/css/building_blocks/index.html
@@ -0,0 +1,331 @@
+---
+title: Boxes
+slug: Web/Guide/CSS/Getting_started/Boxes
+tags:
+  - CSS
+  - 'CSS:Getting_Started'
+translation_of: Learn/CSS/Building_blocks
+translation_of_original: Web/Guide/CSS/Getting_started/Boxes
+---
+<div>{{CSSTutorialTOC}}</div>
+
+<p>{{previousPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第11章です。ここでは、要素が表示されるとき、要素の占めるスペースを CSS で操作する方法について述べます。実際に文書を作り、間隔の調整や装飾ルールの追加を試してください。</p>
+
+<h2 class="clearLeft" id="ボックスについて">ボックスについて</h2>
+
+<p>ブラウザに表示されると、要素は一定のスペースを占有します。このスペースは4つの部分で構成されています。</p>
+
+<p>中央に、<em>要素（element）</em>がその内容を表示するのに必要なスペースがあります。その周りに パディング（<em>padding）</em> があり、その周りに <em>ボーダー（border）</em> があります。その周りには <em>マージン（margin）</em> があって、他要素とその要素を隔てています。</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="width: 22em;">
+    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;">マージン</p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;">ボーダー</p>
+
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;">パディング</p>
+
+    <div style="background-color: #eee;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">要素</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>薄い灰色がレイアウトの部品を示します。</em></p>
+   </td>
+   <td>
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;"> </p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;"> </p>
+
+    <div style="background-color: #fff;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">要素</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>ブラウザではこう見えます。</em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>パディング、ボーダー、マージンは要素の上下左右で異なるサイズにできます。一部または全部をゼロにすることもできます。</p>
+
+<h3 id="Coloring" name="Coloring">彩色</h3>
+
+<p>パディングは常に要素の背景色と同じ色です。このため背景色を設定すると、その色は要素自身とそのパディングに適用されます。マージンは常に透明です。</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="width: 22em;">
+    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;">マージン</p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;">ボーダー</p>
+
+    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;">パディング</p>
+
+    <div style="background-color: #ded;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">要素</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>要素の背景色は緑です。</em></p>
+   </td>
+   <td>
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;"> </p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;"> </p>
+
+    <div style="background-color: #efe;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">要素</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>ブラウザではこう見えます</em>。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Borders" name="Borders">ボーダー</h3>
+
+<p>ボーダーを使って、要素を線や枠囲みで装飾できます。</p>
+
+<p>要素の境界線をすべて同じにするには、{{cssxref("border")}} プロパティを使います。幅（画面表示されるときの単位は通常 pixel です）、スタイル、色を定義します。</p>
+
+<p>選べるスタイル:</p>
+
+<table style="margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td style="width: 6em;">
+    <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 6em;">
+    <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>また、スタイルを <code>none</code> か <code>hidden</code> にして、明示的にボーダーを消したり、色を <code>transparent</code> にして、レイアウトを変えずにボーダーを透明にしたりできます。</p>
+
+<p>一辺ずつボーダーを定義するには、次のプロパティを使います: {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}}。これを使うと、一辺だけボーダーを定義したり、辺ごとに違うボーダーを定義したりできます。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例</div>
+
+<p>次のルールは、見出し要素の背景色と上辺のボーダーを定義します:</p>
+
+<pre class="brush:css">h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+}</pre>
+
+<p>結果は次のようになります:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">スタイルつきの見出し</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>次のルールは、画像をミッドグレーの枠で取り囲んで見やすくします:</p>
+
+<pre class="brush:css">img {border: 2px solid #ccc;}
+</pre>
+</div>
+
+<p>結果は次のようになります:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>画像:</td>
+   <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" src="/@api/deki/files/47/=Blue-rule.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Margins_and_padding" name="Margins_and_padding">マージンとパディング</h3>
+
+<p>マージンとパディングで要素の位置を調整し、周りに余白を作ります。</p>
+
+<p>{{cssxref("margin")}} プロパティと {{cssxref("padding")}} プロパティでそれぞれ、マージンの幅、パディングの幅を設定します。</p>
+
+<p>幅を一つだけ記述すると、要素の全ての枠（top（上辺）、right（右辺）、bottom（下辺）、left（左辺））に適用されます。</p>
+
+<p>幅を2つ記述すると、1番目が top と bottom に、2番めが right と left に適用されます。</p>
+
+<p>4つすべての幅を定義するには、次の順番で記述します: top、 right、bottom、left</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例</div>
+
+<p>次のルールは、<code>remark</code> クラスを持つ段落に、四辺すべてを囲むような赤い枠を与えます。</p>
+
+<p>パディングで囲むことで、テキストから枠が少し離れます。</p>
+
+<p>左マージンは段落を他のテキストからインデントします:</p>
+
+<pre class="brush:css">p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+</pre>
+
+<p>結果は次のようになります:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <p>ここは通常の段落です。</p>
+
+    <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">ここは remark 用の段落です。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">さらに詳しく</div>
+
+<p>マージンとパディングで要素の配置方法を調整すると、そのスタイルのルールとブラウザのデフォルトが、複雑な方法で相互作用します。</p>
+
+<p>ブラウザによって、要素の配置方法が異なります。スタイルシートで変えなければ、結果は同じに見えるかもしれません。このため、時折スタイルシートのもたらす結果に驚くことがあります。</p>
+
+<p>望む結果を得るには、文書のマークアップを変更する必要があるかもしれません。このチュートリアルの次のページで、このことについてもっと触れています。</p>
+
+<p>パディング、マージン、ボーダーについての詳しい情報は、リファレンスの <a href="/ja/docs/CSS/box_model" title="CSS/box model"><span>ボックスモデル</span></a> をご覧ください。</p>
+</div>
+
+<h2 id="Action.3A_Adding_borders" name="Action.3A_Adding_borders">実習: ボーダーの追加</h2>
+
+<p>CSS ファイル <code>style2.css を編集します。次のルールを追加して、見出しのそれぞれで、ページを横切る線を描くようにしてください</code>:</p>
+
+<pre class="brush:css">h3 {border-top: 1px solid gray;}
+</pre>
+
+<p>前のページのチャレンジを終えていれば、そこで作ったルールを編集するか、次の新しいルールを追加して、各リスト項目の真下にスペースを置くようにしてください:</p>
+
+<pre class="brush:css">li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+</pre>
+
+<p>ブラウザを更新すると次の結果になります:</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <ul style="">
+     <li style="margin-bottom: 8px;">Arctic</li>
+     <li style="margin-bottom: 8px;">Atlantic</li>
+     <li style="margin-bottom: 8px;">Pacific</li>
+     <li style="margin-bottom: 8px;">Indian</li>
+     <li style="margin-bottom: 8px;">Southern</li>
+    </ul>
+
+    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type">チャレンジ</div>
+
+<p>スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください — 次のような感じです:</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <div style="border: 12px solid #69b; padding-left: 1em;">
+    <ul style="">
+     <li style="margin-bottom: 8px;">Arctic</li>
+     <li style="margin-bottom: 8px;">Atlantic</li>
+     <li style="margin-bottom: 8px;">Pacific</li>
+     <li style="margin-bottom: 8px;">Indian</li>
+     <li style="margin-bottom: 8px;">Southern</li>
+    </ul>
+    </div>
+
+    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <p><strong>. . .</strong></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>（幅や色を正確に同じにする必要はありません。）</p>
+</div>
+
+<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Challenge_solutions#Boxes">このチャレンジの解答を見る。</a></p>
+
+<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2>
+
+<p>{{nextPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}マージンやパディングを指定して、文書のレイアウトを変えることができました。次のページでは、他の方法で文書の <a href="/ja/docs/CSS/Getting_Started/Layout" title="CSS/Getting_Started/Layout">レイアウト</a> を変えます。</p>
diff --git a/files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html
new file mode 100644
index 0000000000..1f0905d1ec
--- /dev/null
+++ b/files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html
@@ -0,0 +1,478 @@
+---
+title: Tables
+slug: Web/Guide/CSS/Getting_started/Tables
+tags:
+  - CSS
+  - 'CSS:Getting_Started'
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+translation_of_original: Web/Guide/CSS/Getting_started/Tables
+---
+<div>
+ {{CSSTutorialTOC}}{{previousPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}</div>
+<p>これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第 13 章です。ここではさらに高度なセレクタと、テーブルのスタイルづけに特有の方法を述べます。テーブルを含む新しいサンプル文書と、スタイルシートを作ってください。</p>
+<h2 class="clearLeft" id="Information.3A_Tables" name="Information.3A_Tables">表（テーブル）について</h2>
+<p>テーブルは、縦軸 / 横軸のデータ構造を持つ情報の並びです。テーブルは複雑になることがあり、複雑なテーブルはブラウザによって違った表示になる場合があります。</p>
+<p>文書を設計する際には、テーブルを細かな情報同士の <a href="/ja/docs/CSS/Getting_Started/Selectors#relselectors" title="CSS/Getting_Started/Selectors#relselectors">関係性</a> を示すのに使ってください。そうすれば、ブラウザによって少し違った表示がされても問題ありません。目的が依然はっきりしているためです。</p>
+<p>精密な視覚的レイアウトを作るために、テーブルの変わった使い方をしないでください。そういった目的には、このチュートリアルの前のページにある技法（<strong><a href="/ja/docs/CSS/Getting_Started/Layout" title="CSS/Getting_Started/Layout">レイアウト</a></strong>）のほうが適しています。</p>
+<h3 id="Table_structure" name="Table_structure">テーブルの構造</h3>
+<p>テーブルでは、情報の一つ一つが <em>セル（cell）</em> に入れて表示されます。</p>
+<p>ページを横切るように並ぶセルが、 行（<em>row</em>）を作ります。</p>
+<p>テーブルによっては、行はグループ化されているかもしれません。テーブルの初めにある特殊な行グループが、<em>ヘッダー（header）</em>です。テーブルの終わりにある特殊な行グループが、<em>フッター（footer）</em>です。テーブルの中心的な行が <em>ボディ（body）</em>で、これも、グループに入っているかもしれません。</p>
+<p>ページ下方に向けて並ぶセルは<em>列（column）</em>を作りますが、CSS のテーブルでは、列の用途には制限があります。</p>
+<div class="tuto_example">
+ <div class="tuto_type">
+  例</div>
+ <p><a href="/ja/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors">Selectors</a> ページの <a href="/ja/docs/CSS/Getting_Started/Selectors#relselectors" title="CSS/Getting_Started/Selectors#relselectors">Selectors based on relationships</a> の表には、行が 5 つ、セルが 10 個あります。</p>
+ <p>最初の行はヘッダーです。残りの 4 つの行はボディです。フッターはありません。</p>
+ <p>列は 2 つあります。</p>
+</div>
+<p>このチュートリアルでは結果が予測できるような、簡単なテーブルしか扱いません。簡単なテーブルでは、各セルがどれも 1 つの行と 1 つの列を占めます。セルが 1 行や 1 列以上に <em>伸びた（span）</em>複雑なテーブルにも CSS を使えますが、そういったテーブルはこの基本チュートリアルの範疇を超えています。</p>
+<h3 id="Borders" name="Borders">ボーダー</h3>
+<p>セルにはマージンがありません。</p>
+<p>セルにはボーダーとパディングがあります。デフォルトでは、ボーダーはテーブルの {{cssxref("border-spacing")}} プロパティで決められます。テーブルの {{cssxref("border-collapse")}} プロパティを <code>collapse</code> にすると、間隔を完全に取り除くことができます。</p>
+<div class="tuto_example">
+ <div class="tuto_type">
+  例</div>
+ <p>テーブルが 3 つあります。</p>
+ <p>左のテーブルには 0.5em 幅のボーダーがあります。中央のテーブルには幅ゼロのボーダーがあります。右のテーブルには 折り畳まれた（collapsed）ボーダーがあります:<br>
+  （表示例は、この wiki の制限により、正しく表示されていないかもしれません）</p>
+ <table style="border: 2px outset #36b ; padding: 1em; background-color: white;">
+  <tbody>
+   <tr>
+    <td style="padding-right: 2em;">
+     <table style="border-collapse: separate;">
+      <tbody>
+       <tr>
+        <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+        <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+       </tr>
+       <tr>
+        <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+        <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+       </tr>
+      </tbody>
+     </table>
+    </td>
+    <td style="padding-right: 2em;">
+     <table style="border-collapse: separate;">
+      <tbody>
+       <tr>
+        <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+        <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+       </tr>
+       <tr>
+        <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+        <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+       </tr>
+      </tbody>
+     </table>
+    </td>
+    <td style="padding-right: 6em;">
+     <table style="border-collapse: collapse;">
+      <tbody>
+       <tr>
+        <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+        <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+       </tr>
+       <tr>
+        <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+        <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+       </tr>
+      </tbody>
+     </table>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h3 id="Captions" name="Captions">キャプション</h3>
+<p>{{HTMLElement("caption")}} 要素はテーブル全体に当てられるラベルです。デフォルトでは、テーブルの一番上に表示されます。</p>
+<p>底部に移動させるには、{{cssxref("caption-side")}} プロパティを <code>bottom</code> にします。プロパティは継承されるので、テーブルに設定することも、祖先要素に設定することもできます。</p>
+<p>キャプションの文字にスタイルをつけるには、通常のテキスト用のプロパティを使ってください。</p>
+<div class="tuto_example">
+ <div class="tuto_type">
+  例</div>
+ <p>このテーブルは底部にキャプションがあります</p>
+ <p>（表示例は、この wiki の制限により、正しく表示されていないかもしれません）</p>
+ <pre class="brush: css">#demo-table &gt; caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+}
+</pre>
+ <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
+  <tbody>
+   <tr>
+    <td>
+     <table>
+      <caption>
+       Suits</caption>
+      <tbody>
+       <tr>
+        <td>
+         <table style="border-collapse: collapse;">
+          <tbody>
+           <tr>
+            <td style="border: 1px solid gray; text-align: center;">Clubs</td>
+            <td style="border: 1px solid gray; text-align: center;">Hearts</td>
+           </tr>
+           <tr>
+            <td style="border: 1px solid gray; text-align: center;">Diamonds</td>
+            <td style="border: 1px solid gray; text-align: center;">Spades</td>
+           </tr>
+          </tbody>
+         </table>
+        </td>
+       </tr>
+      </tbody>
+     </table>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h3 id="Empty_cells" name="Empty_cells">空のセル</h3>
+<p>テーブル要素に {{cssxref("empty-cells")}}: show; と定義すると、空のセル（これはつまりセルのボーダーと背景です）を表示できます。</p>
+<p>隠すには <code>empty-cells: hide;</code> と定義します。こうすると、セルの親要素に背景があるとき、空のセル越しに見ることができます。</p>
+<div class="tuto_example">
+ <div class="tuto_type">
+  例</div>
+ <p>次のテーブルは薄い緑の背景を持っています。各セルは薄い灰色の背景と濃い灰色のボーダーを持っています。</p>
+ <p>左のテーブルでは、空セルが見えています。右のテーブルでは隠されています:</p>
+ <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+  <tbody>
+   <tr>
+    <td style="padding-right: 2em;">
+     <table style="border-collapse: separate; background-color: #dfd;">
+      <tbody>
+       <tr>
+        <td style="border: 1px solid #555; background-color: #eee;"> </td>
+        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
+       </tr>
+       <tr>
+        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
+        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
+       </tr>
+      </tbody>
+     </table>
+    </td>
+    <td style="padding-right: 6em;">
+     <table style="border-collapse: separate; background-color: #dfd;">
+      <tbody>
+       <tr>
+        <td> </td>
+        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
+       </tr>
+       <tr>
+        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
+        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
+       </tr>
+      </tbody>
+     </table>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div class="tuto_details">
+ <div class="tuto_type">
+  詳細</div>
+ <p>テーブルについての詳しい情報は、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> をご覧ください。</p>
+ <p>そこにある情報はこのチュートリアルを超えたものになりますが、そこでは、複雑なテーブルに影響する、ブラウザ間の相違については触れていません。</p>
+</div>
+<h2 id="Action.3A_Styling_a_table" name="Action.3A_Styling_a_table">実習: テーブルのスタイルづけ</h2>
+<ol>
+ <li>新しい HTML 文書 <code>doc3.html</code> を作ってください。次の内容をコピー＆ペーストしてください。スクロールさせて、コピー漏れがないか確認してください:
+  <div style="height: 36em; overflow: auto;">
+   <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Sample document 3&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style3.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;table id="demo-table"&gt;
+      &lt;caption&gt;Oceans&lt;/caption&gt;
+      &lt;thead&gt;
+        &lt;tr&gt;
+          &lt;th&gt;&lt;/th&gt;
+          &lt;th&gt;Area&lt;/th&gt;
+          &lt;th&gt;Mean depth&lt;/th&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;&lt;/th&gt;
+          &lt;th&gt;million km&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
+          &lt;th&gt;m&lt;/th&gt;
+        &lt;/tr&gt;
+      &lt;/thead&gt;
+      &lt;tbody&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Arctic&lt;/th&gt;
+          &lt;td&gt;13,000&lt;/td&gt;
+          &lt;td&gt;1,200&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Atlantic&lt;/th&gt;
+          &lt;td&gt;87,000&lt;/td&gt;
+          &lt;td&gt;3,900&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Pacific&lt;/th&gt;
+          &lt;td&gt;180,000&lt;/td&gt;
+          &lt;td&gt;4,000&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Indian&lt;/th&gt;
+          &lt;td&gt;75,000&lt;/td&gt;
+          &lt;td&gt;3,900&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Southern&lt;/th&gt;
+          &lt;td&gt;20,000&lt;/td&gt;
+          &lt;td&gt;4,500&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/tbody&gt;
+      &lt;tfoot&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Total&lt;/th&gt;
+          &lt;td&gt;361,000&lt;/td&gt;
+          &lt;td&gt;&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Mean&lt;/th&gt;
+          &lt;td&gt;72,000&lt;/td&gt;
+          &lt;td&gt;3,800&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/tfoot&gt;
+    &lt;/table&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  </div>
+ </li>
+ <li>新しいスタイルシート <code>style3.css</code> を作ります。次の内容をコピー＆ペーストしてください。スクロールして、コピー漏れがないことを確認します:
+  <pre class="brush: css">/*** Style for doc3.html (Tables) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+}
+
+#demo-table &gt; caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+}
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+}
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+}
+
+
+/* header */
+#demo-table &gt; thead &gt; tr:first-child &gt; th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table &gt; thead &gt; tr + tr &gt; th {
+  font-style: italic;
+  color: gray;
+}
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+}
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+}
+
+#demo-table tbody th:after {
+  content: ":";
+}
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+}
+
+#demo-table tfoot th {
+  color: blue;
+}
+
+#demo-table tfoot th:after {
+  content: ":";
+}
+
+#demo-table &gt; tfoot td {
+  background-color: #cee;
+}
+
+#demo-table &gt; tfoot &gt; tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+</pre>
+ </li>
+ <li>文書をブラウザで開きます。次の内容に似たものになるでしょう:
+  <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
+   <tbody>
+    <tr>
+     <td>
+      <div>
+       <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p>
+       <div style="border: 1px solid #7a7; background-color: #efe;">
+        <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
+         <tbody>
+          <tr style="text-align: center; color: blue;">
+           <th> </th>
+           <th>Area</th>
+           <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
+          </tr>
+          <tr style="font-style: italic; color: gray;">
+           <th> </th>
+           <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
+           <th style="padding-left: .5em; padding-right: .5em;">m</th>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Arctic:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Atlantic:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Pacific:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Indian:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+          </tr>
+          <tr>
+           <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em; color: blue;">Total:</th>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em; color: blue;">Mean:</th>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+          </tr>
+         </tbody>
+        </table>
+       </div>
+      </div>
+     </td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>表示されたテーブルとスタイルシートにあるルールを比較して、各行の働きを理解できているか確かめてください。自信のないルールを見つけたら、そのルールをコメントアウトしてブラウザを更新し、何が起きるか見てみましょう。このテーブルに関する注意点は次のとおりです:
+  <ul>
+   <li>キャプションはテーブルのボーダーより外側に置かれています。</li>
+   <li>もしオプションでフォントの最小値を設定していれば、 km<sup>2</sup> の上付き文字に影響します。</li>
+   <li>空セルが 3 つあります。そのうち2つは、テーブルの背景を透過しています。 3 つ目は背景と上辺にボーダーを持ちます。</li>
+   <li>コロンはスタイルシートで追加しています。</li>
+  </ul>
+ </li>
+</ol>
+<div class="tuto_example">
+ <div class="tuto_type">
+  チャレンジ</div>
+ <p>スタイルシートを、テーブルが次のようになるように変えてください:</p>
+ <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
+  <tbody>
+   <tr>
+    <td>
+     <div>
+      <div style="border: 1px solid #7a7; background-color: #efe;">
+       <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
+        <tbody>
+         <tr style="text-align: center; color: blue;">
+          <th> </th>
+          <th>Area</th>
+          <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
+         </tr>
+         <tr style="font-style: italic; color: gray;">
+          <th> </th>
+          <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
+          <th style="padding-left: .5em; padding-right: .5em;">m</th>
+         </tr>
+         <tr>
+          <th style="padding-right: .5em;">Arctic:</th>
+          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td>
+          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td>
+         </tr>
+         <tr>
+          <th style="padding-right: .5em;">Atlantic:</th>
+          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td>
+          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
+         </tr>
+         <tr>
+          <th style="padding-right: .5em;">Pacific:</th>
+          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td>
+          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td>
+         </tr>
+         <tr>
+          <th style="padding-right: .5em;">Indian:</th>
+          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td>
+          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
+         </tr>
+         <tr>
+          <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
+          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td>
+          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td>
+         </tr>
+         <tr>
+          <th style="padding-right: .5em; color: blue;">Total:</th>
+          <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+          <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+         </tr>
+         <tr>
+          <th style="padding-right: .5em; color: blue;">Mean:</th>
+          <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+          <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+         </tr>
+        </tbody>
+       </table>
+      </div>
+      <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p>
+     </div>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Tables" title="CSS/Getting started/Challenge solutions#Tables">チャレンジの解答を見る。</a></p>
+<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2>
+<p>{{nextPage("/ja/docs/CSS/Getting_Started/Media", "Media")}} このページは、CSS のプロパティと値に主眼を置いたチュートリアルの最後のページです。プロパティと値についてのすべての概要については、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> をご覧ください。</p>
+<p>次のページでは、CSS スタイルシートの目的と構造を<a href="/ja/docs/CSS/Getting_Started/Media" title="CSS/Getting_Started/Media">もう一度見ていきます</a>。</p>
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
new file mode 100644
index 0000000000..4d080bc3a4
--- /dev/null
+++ b/files/ja/conflicting/learn/css/building_blocks/values_and_units/index.html
@@ -0,0 +1,349 @@
+---
+title: 色
+slug: Web/Guide/CSS/Getting_started/Color
+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
+---
+<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>