conflicting/Learn/CSS 以下を削除 (#1474)

- 各記事を 2021/07/10 時点の英語版に同期
- conflicting 版の記事は古いため削除

3 files changed, 0 insertions, 865 deletions

diff --git a/files/ja/conflicting/learn/css/building_blocks/index.html b/files/ja/conflicting/learn/css/building_blocks/index.html
deleted file mode 100644
index bcf27043b9..0000000000
--- a/files/ja/conflicting/learn/css/building_blocks/index.html
+++ /dev/null
@@ -1,332 +0,0 @@
----
-title: Boxes
-slug: conflicting/Learn/CSS/Building_blocks
-tags:
-  - CSS
-  - CSS:Getting_Started
-translation_of: Learn/CSS/Building_blocks
-translation_of_original: Web/Guide/CSS/Getting_started/Boxes
-original_slug: 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/css_layout/index.html b/files/ja/conflicting/learn/css/css_layout/index.html
deleted file mode 100644
index 12c74ae6e2..0000000000
--- a/files/ja/conflicting/learn/css/css_layout/index.html
+++ /dev/null
@@ -1,286 +0,0 @@
----
-title: Layout
-slug: conflicting/Learn/CSS/CSS_layout
-tags:
-  - CSS
-  - CSS:Getting_Started
-translation_of: Learn/CSS/CSS_layout
-translation_of_original: Web/Guide/CSS/Getting_started/Layout
-original_slug: Web/Guide/CSS/Getting_started/Layout
----
-<div>
- {{CSSTutorialTOC}} {{previousPage("/ja/docs/CSS/Getting_Started/Boxes", "Boxes")}}</div>
-<p>これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第 12 章です。ここでは、文書のレイアウトを調整する方法をいくつか述べます。サンプル文書のレイアウトを変えてみましょう。</p>
-<h2 class="clearLeft" id="レイアウトについて">レイアウトについて</h2>
-<p>CSS を使うと、文書のレイアウトを変えるような様々な視覚効果を定義できます。レイアウト定義の手法には、上級者向けで、この基本チュートリアルの範疇を超えるようなものもあります。</p>
-<p>多くのブラウザで同じ見た目になるようレイアウトを設計すると、スタイルシートはブラウザのデフォルトのスタイルシートやレイアウトエンジンと、入り組んだ方法で相互作用します。これもまた基本チュートリアルの範疇を超えた、上級者向けの話題です。</p>
-<p>このページでは、あなたが試せるような簡単な技法をいくつか述べます。</p>
-<h3 id="Document_structure" name="Document_structure">文書の構造</h3>
-<p>文書のレイアウトを操作するなら、その構造を変える必要があるかもしれません。</p>
-<p>お使いのマークアップ言語には、構造化のための汎用タグがあるかもしれません。たとえば、HTML では構造化に {{HTMLElement("div")}} 要素を使うことができます。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>サンプル文書では、2 番目の見出しの下にある、番号づけされた段落はどれも、入れ物に入っていません。</p>
- <p>セレクタで指定する要素がないため、スタイルシートでこれらの段落の周囲に枠を描くことができません。</p>
- <p>この構造的な問題を直すために、段落の周りに {{HTMLElement("div")}} タグを一つ追加します。このタグは一意で、<code>id</code> 属性で見分けられます。</p>
- <pre class="brush:html;highlight:[2,8]">&lt;h3&gt;Numbered paragraphs&lt;/h3&gt;
-&lt;div id="numbered"&gt;
-  &lt;p&gt;Lorem ipsum&lt;/p&gt;
-  &lt;p&gt;Dolor sit&lt;/p&gt;
-  &lt;p&gt;Amet consectetuer&lt;/p&gt;
-  &lt;p&gt;Magna aliquam&lt;/p&gt;
-  &lt;p&gt;Autem veleum&lt;/p&gt;
-&lt;/div&gt;
-</pre>
- <p>これで、両方のリストの周りに枠を定義するルールをスタイルシートに追加できます。</p>
- <pre class="brush:css">ul, #numbered {
-  border: 1em solid #69b;
-  padding-right:1em;
-}
-</pre>
- <p>結果は次のようになります:</p>
- <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
-  <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; margin-bottom: 16px; padding: 1em;">
-      <ul style="">
-       <li>Arctic</li>
-       <li>Atlantic</li>
-       <li>Pacific</li>
-       <li>Indian</li>
-       <li>Southern</li>
-      </ul>
-     </div>
-     <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
-     <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;">
-      <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>
-     </div>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<h3 id="Size_units" name="Size_units">サイズの単位（Size units）</h3>
-<p>このチュートリアルではこれまで、サイズを pixels (<code>px</code>) で定義してきました。これはコンピューターの画面のようなディスプレイデバイスでの用途にはふさわしいものです。しかし、ユーザがフォントサイズを変えると、レイアウトがおかしくなる可能性があります。</p>
-<p>多くの用途で、サイズをパーセンテージか ems (<code>em</code>) で定義するのがよいでしょう。em は通常、現在のフォントサイズを指します（文字 m の幅）。ユーザがフォントサイズを変えると、レイアウトが自動的に調整されます。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>次のテキストの左辺のボーダーは pixel 単位のサイズで定義されています。</p>
- <p>右辺のボーダーは ems 単位のサイズで定義されています。</p>
- <p>ブラウザの表示フォントサイズを変えて、右辺のボーダーが調整されることと、左辺のボーダーはされないことを確認してください:</p>
- <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td>
-     <div style="">
-      僕の大きさを変えてお願い</div>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<div class="tuto_details">
- <div class="tuto_type">
-  さらに詳しく</div>
- <p>その他のデバイスには、これ以外の長さの単位が適しています。</p>
- <p>これについては、このチュートリアルの後半のページにもっと情報があります。</p>
- <p>すべての利用可能な値と単位の詳細は、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> をご覧ください。</p>
-</div>
-<h3 id="Text_layout" name="Text_layout">テキストのレイアウト</h3>
-<p>2 つのプロパティで、要素の内容がどのように文字寄せされるか定義します。これは、単純なレイアウトの調整にも使えます。</p>
-<dl>
- <dt>
-  {{cssxref("text-align")}}</dt>
- <dd>
-  文字寄せを行います。次のうちいずれかの値を使います: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd>
- <dt>
-  {{cssxref("text-indent")}}</dt>
- <dd>
-  指定した幅でインデントを行います。</dd>
-</dl>
-<p>これらのプロパティは要素内のテキストだけではなく、テキストに似たコンテンツにも適用されます。これらのルールが要素の子に継承されることを忘れないでください。結果を見て驚かないように、子要素で明示的にこれらをオフにする必要があるかもしれません。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例: 見出しを中央寄せする</div>
- <pre class="brush:css">h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-}
-</pre>
- <p>表示結果:</p>
- <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
-  <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; text-align: center;">(A) The oceans</p>
-    </td>
-   </tr>
-  </tbody>
- </table>
- <p>HTML 文書では、見出しの下に見える内容は構造的には見出しに含まれていません。したがって見出しを文字寄せしても、見出しの下にあるタグにそのスタイルは継承されません。</p>
-</div>
-<h3 id="Floats" name="Floats">フロート（Floats、浮動体）</h3>
-<p>{{cssxref("float")}} プロパティは、要素を左または右に押しつけます。これは要素の位置やサイズを操作する簡単な方法です（以降、float 指定された要素のことをフローティング要素と呼びます）。</p>
-<p>文書の残りのコンテンツは通常、フローティング要素の周囲に流れ込み（flow）ます。{{cssxref("clear")}} プロパティを使うと、残りの要素をフローティング要素から離して、この流れを制御できます。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>サンプル文書では、リストはウィンドウいっぱいに広がります。これは、左側に浮動させると回避できます。</p>
- <p>見出しを定位置に留めるには、その左側にあるフローティング要素から、見出しを離れさせるような定義も必要です。</p>
- <pre class="brush:css">ul,
-#numbered { float: left; }
-h3 { clear: left; }
-</pre>
-</div>
-<p>結果は次のようになります:</p>
-<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
- <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="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;">
-     <ul style="">
-      <li>Arctic</li>
-      <li>Atlantic</li>
-      <li>Pacific</li>
-      <li>Indian</li>
-      <li>Southern</li>
-     </ul>
-    </div>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
-    <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;">
-     <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>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-<p>（ボックスの右側でボーダーがテキストに近すぎるので、少しパディングが必要です）</p>
-<h3 id="Positioning" name="Positioning">位置取り</h3>
-<p>{{cssxref("position")}} プロパティと次の値のうちの 1 つを指定すると、要素の位置を 4 つの方法で定義できます。</p>
-<p>これは高度なプロパティです。基本チュートリアルで取り上げるのは、これが簡単に使えるためです。しかし、複雑なレイアウトに使うなら難しくなります。</p>
-<dl>
- <dt>
-  <code>relative</code></dt>
- <dd>
-  相対的。要素の位置は通常位置に比べて相対的に移動します。指定量だけ要素を動かす場合にこれを使ってください。場合によっては、要素のマージンを使って同じ効果が得られることがあります。</dd>
- <dt>
-  <code>fixed</code></dt>
- <dd>
-  固定。要素の位置は固定されます。文書のウィンドウに対する相対値で指定してください。文書の他の部分がスクロールしても、要素は固定されたままです。</dd>
- <dt>
-  <code>absolute</code></dt>
- <dd>
-  絶対的。要素は祖先要素の内、直近のポジショニング要素 (<code>position</code> プロパティの値が <code>relative</code>、<code>fixed</code> 、<code>absolute</code> の何れかの要素 ) に対する絶対位置に、もしくはポジショニング要素が無い場合はルート要素に対する絶対位置に配置されます。親要素自身に位置指定が必要無い場合には <code>position:relative</code> を用いる事により親要素自身への影響を回避できます。</dd>
- <dt>
-  <code>static</code></dt>
- <dd>
-  静止。デフォルトです。明示的に位置づけをオフにしたいときにこの値を使ってください。</dd>
-</dl>
-<p><code>position</code> プロパティ（<code>static</code> を除く）の値といっしょに、次のプロパティから一つかそれ以上を指定します: <code>top</code> 、 <code>right</code> 、 <code>bottom</code> 、 <code>left</code> 、 <code>width</code> 、 <code>height</code> これにより、要素の現れる場所やおそらくはそのサイズも指定します。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例: 複数の要素を重ねる</div>
- <p>2 つの要素を重なり合うように位置づけるには、文書に入れ物になる親要素を作り、その中に 2 つの要素を入れます:</p>
- <pre class="brush:html">&lt;div id="parent-div"&gt;
-  &lt;p id="forward"&gt;/&lt;/p&gt;
-  &lt;p id="back"&gt;\&lt;/p&gt;
-&lt;/div&gt;
-</pre>
- <p>スタイルシートで、親要素の <code>position</code> を <code>relative</code> にします。移動量を指定する必要はありません。子要素の <code>position</code> を <code>absolute</code> にします。</p>
- <pre class="brush:css">#parent-div {
-  position: relative;
-  font: bold 200% sans-serif;
-}
-
-#forward, #back {
-  position: absolute;
-  margin: 0; /* 要素の周囲のマージンを 0 に */
-  top: 0; /* 上部からの距離 */
-  left: 0; /*  左部からの距離 */
-}
-
-#forward {
-  color: blue;
-}
-
-#back {
-  color: red;
-}
-</pre>
- <p>結果は、スラッシュの上にバックスラッシュが乗り、次のようになります。</p>
- <div style="position: relative; left: .33em; font: bold 300% sans-serif;">
-  <p style="position: absolute; margin: 0; top: 0; left: 0; color: blue;">/</p>
-  <p style="position: absolute; margin: 0; top: 0; left: 0; color: red;">\</p>
- </div>
- <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;">
-  <tbody>
-   <tr>
-    <td> </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<div class="tuto_details">
- <div class="tuto_type">
-  さらに詳しく</div>
- <p>位置決めに関する完全な記事は、 CSS 仕様書の複雑な 2 つの章: <a href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> と <a href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a> にあります。</p>
- <p>多くのブラウザで機能するようにスタイルシートをデザインするつもりなら、ブラウザごとの標準の解釈の仕方や、おそらくは特定ブラウザの特定バージョンのバグについても考慮する必要があります。</p>
-</div>
-<h2 id="Action.3A_Specifying_layout" name="Action.3A_Specifying_layout">実習: レイアウトの定義</h2>
-<ol>
- <li>サンプル文書 <code>doc2.html</code> と スタイルシート <code>style2.css</code> を、上の『<a href="#Document_structure" title="#Document structure"><strong>文書の構造</strong></a>』と『<a href="#Floats" title="#Floats"><strong>フロート</strong></a>』の各章にある例を使って変更してください。</li>
- <li><a href="#Floats" title="#Floats"><strong>フロート</strong></a> の例にパディングを追加し、右のボーダーからテキストを <code>0.5em</code> 離してください。</li>
-</ol>
-<div class="tuto_example">
- <div class="tuto_type">
-  チャレンジ</div>
- <p>サンプル文書 <code>doc2.html</code> を変更して、文書の末尾近く、<code>&lt;/body&gt; の直前に次のタグを追加します。</code></p>
- <pre class="brush:html">&lt;img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
-</pre>
- <p>もし初めの方のチュートリアルで画像ファイルをダウンロードしていなければ、いま行なって、他のサンプルファイルと同じディレクトリに置いてください。</p>
- <p><img height="25" src="/@api/deki/files/490/=Yellow-pin.png" style="border: 3px solid #ccc;" width="20"></p>
- <p>画像が文書内のどこに現れるか予測してみてください。ブラウザを更新して、予測が正しかったかどうかを見ます。</p>
- <p>スタイルシートにルールを追加して、文書の右上に画像が置かれるようにしてください。</p>
- <p>ブラウザを更新し、ウィンドウを小さくします。文書をスクロールしても、画像が右上に留まることを確認しましょう。</p>
- <div style="position: relative; width: 29.5em; height: 18em;">
-  <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
-   <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="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
-    <ul style="">
-     <li>Arctic</li>
-     <li>Atlantic</li>
-     <li>Pacific</li>
-     <li>Indian</li>
-     <li>Southern</li>
-    </ul>
-   </div>
-   <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
-   <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
-    <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>
-   </div>
-   <p style=""> </p>
-   <div style="position: absolute; top: 2px; right: 0px;">
-    <img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div>
-  </div>
- </div>
-</div>
-<p><a class="button liveSample" href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Layout" title="CSS/Getting_Started/Challenge_solutions#Layout">このチャレンジの解答を見る</a></p>
-<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2>
-<p>{{nextPage("/ja/docs/CSS/Getting_Started/Tables", "Tables")}} あなたは、この基本チュートリアルのほとんどすべてのトピックスを踏破しました。次のページでは CSS ルールのもっと高度なセレクタと、<a href="/ja/docs/CSS/Getting_Started/Tables" title="CSS/Getting_Started/Tables">テーブル</a> のスタイルづけに特有のやり方をいくつか述べます。</p>
diff --git a/files/ja/conflicting/learn/css/styling_text/styling_lists/index.html b/files/ja/conflicting/learn/css/styling_text/styling_lists/index.html
deleted file mode 100644
index 96e52770b5..0000000000
--- a/files/ja/conflicting/learn/css/styling_text/styling_lists/index.html
+++ /dev/null
@@ -1,247 +0,0 @@
----
-title: Lists
-slug: conflicting/Learn/CSS/Styling_text/Styling_lists
-tags:
-  - CSS
-  - CSS:Getting_Started
-translation_of: Learn/CSS/Styling_text/Styling_lists
-translation_of_original: Web/Guide/CSS/Getting_started/Lists
-original_slug: Web/Guide/CSS/Getting_started/Lists
----
-<p>{{ CSSTutorialTOC() }}</p>
-<p>{{ previousPage("/ja/docs/CSS/Getting_Started/Content", "Content") }} これは <a href="/ja/CSS/Getting_Started" title="ja/CSS/Getting Started">CSS Getting Started</a> チュートリアルの第10章です。CSS を使ってリストの外見を決める方法について述べます。リストを含む新しいサンプル文書と、リストの体裁を決めるスタイルシートを作ってください。</p>
-<h2 class="clearLeft" id="リストについて">リストについて</h2>
-<p><a href="/ja/docs/CSS/Getting_Started/Content" title="/ja/docs/CSS/Getting_Started/Content">前章</a> のチャレンジでは、どの要素の直前にでも、コンテンツを追加してリスト項目のように表示する方法がわかりました。</p>
-<p>CSS にはリスト用に作られた特別なプロパティがあります。使えるときには使ったほうがたいてい便利です。</p>
-<p>リストにスタイルを定義するには、{{ cssxref("list-style") }} プロパティを使ってマーカーの種類を指定します。</p>
-<p>CSS ルールでは、セレクタにリスト項目要素を選ぶこともできますし（例：{{ HTMLElement("li") }}）、親のリスト要素を選んで、リスト要素がスタイルを継承するようにもできます（例：{{ HTMLElement ("ul") }}））。</p>
-<h3 id="箇条書きリスト（unordered_list）">箇条書きリスト（unordered list）</h3>
-<p><em>箇条書きリスト</em>では、すべてのリスト項目に同じ方法でマーカーがつきます。</p>
-<p>CSS には3種類のマーカーがあり、ブラウザは次のように表示します:</p>
-<ul style="padding-left: 2em;">
- <li style="list-style-type: disc;"><code>disc</code></li>
- <li style="list-style-type: circle;"><code>circle</code></li>
- <li style="list-style-type: square;"><code>square</code></li>
-</ul>
-<p>もしくは、画像の URL を指定できます。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>次のルールはリスト項目のクラス別に異なったマーカーを定義します:</p>
- <pre class="brush:css">li.open {list-style: circle;}
-li.closed {list-style: disc;}
-</pre>
- <p>リスト内でこれらのクラスを使うと、open と closed の項目の区別がはっきりします（例：to-doリスト):</p>
- <pre class="brush:css">&lt;ul&gt;
-  &lt;li class="open"&gt;Lorem ipsum&lt;/li&gt;
-  &lt;li class="closed"&gt;Dolor sit&lt;/li&gt;
-  &lt;li class="closed"&gt;Amet consectetuer&lt;/li&gt;
-  &lt;li class="open"&gt;Magna aliquam&lt;/li&gt;
-  &lt;li class="closed"&gt;Autem veleum&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
- <p>結果は次のようになるでしょう:</p>
- <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td>
-     <ul style="padding-right: 6em;">
-      <li style="list-style-type: circle;">Lorem ipsum</li>
-      <li style="list-style-type: disc;">Dolor sit</li>
-      <li style="list-style-type: disc;">Amet consectetuer</li>
-      <li style="list-style-type: circle;">Magna aliquam</li>
-      <li style="list-style-type: disc;">Autem veleum</li>
-     </ul>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<h3 id="番号順リスト（ordered_lists）">番号順リスト（ordered lists）</h3>
-<p><em>番号順リスト</em>では、リスト項目は各々違ったマーカーをつけられ、順番を表します。</p>
-<p>マーカーの種類を定義するには {{ cssxref("list-style") }} プロパティを使ってください:</p>
-<ul style="padding-left: 2em;">
- <li style=""><code>decimal</code></li>
- <li style=""><code>lower-roman</code></li>
- <li style=""><code>upper-roman</code></li>
- <li style=""><code>lower-latin</code></li>
- <li style=""><code>upper-latin</code></li>
-</ul>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>これは <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: inherit;">info クラスの </span><span style="line-height: inherit;">{{ HTMLElement("ol") }} 要素についてのルールで、項目が大文字のアルファベット</span><span style="line-height: inherit;">で識別されます。</span></p>
- <pre class="brush:css">ol.info {list-style: upper-latin;}
-</pre>
- <p>リスト内の {{ HTMLElement("li") }} 要素はこのスタイルを継承します:</p>
- <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td>
-     <ul>
-      <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li>
-      <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li>
-      <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li>
-      <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li>
-      <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li>
-     </ul>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<div class="tuto_details">
- <div class="tuto_type">
-  さらに詳しく</div>
- <p>{{ cssxref("list-style") }} は略記用のプロパティです。複雑なスタイルシートでは、値ごとに個別のプロパティを使いたくなるかもしれません。これら個別のプロパティや、CSS がリストを定義する方法については、リファレンス {{ cssxref("list-style") }} をご覧ください。</p>
- <p>箇条書きリスト ({{ HTMLElement("ul") }}) や番号リスト ({{ HTMLElement("ol") }}) の慣例的なタグを定めている HTML のようなマークアップ言語を使うなら、その意図通りにタグを使うのはよい練習になります。しかしながら、CSSでは お望みであれば {{ HTMLElement("ul") }} に番号リストを表示させたり、{{ HTMLElement("ol") }} に箇条書きリストを表示させたりもできます。</p>
- <p>リストのスタイルづけはブラウザによって実装方法が異なります。どのブラウザでも同じ結果が出るとは思わないでください。</p>
-</div>
-<h3 id="カウンター">カウンター</h3>
-<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;">
- <p><strong>注: </strong> 一部のブラウザーはカウンターをサポートしていません。<a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/">Quirks Mode site</a> の <a class="external" href="http://www.quirksmode.org/css/contents.html" style="line-height: inherit;" title="http://www.quirksmode.org/css/contents.html">CSS contents and browser compatibility</a><span style="line-height: inherit;"> ページに、カウンターや他の CSS 機能についてのブラウザの実装状況の詳しい表があります。このサイトの </span><a href="/ja/CSS_Reference" style="line-height: inherit;" title="https://developer.mozilla.org/ja/CSS_Reference">CSS Reference</a><span style="line-height: inherit;"> の各ページにもブラウザ実装状況の表があります。</span></p>
-</div>
-<p>カウンターはリスト項目だけでなく、どの要素にも番号をつけられます。例えば、ある文書では見出しや章を数えたいかもしれません。</p>
-<p>通し番号を定義するには、独自に名前をつけた <em>counter</em> が必要です。</p>
-<p>カウントが開始されるより前の要素のいずれかで、{{ cssxref("counter-reset") }} プロパティとカウンター名を使ってカウンターをリセットしてください。これは数える要素の親で行うのが適していますが、リスト項目より前に現れる要素ならどれでも使えます。</p>
-<p>番号が増える要素の各々に {{ cssxref("counter-increment") }} プロパティとカウンター名を使ってください。</p>
-<p>カウンターを表示するには、セレクタに {{ cssxref(":before") }} または {{ cssxref(":after") }} を追加し、<code>content</code> プロパティを使います（前のページ <strong><a href="/ja/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">コンテンツ</a></strong> で行った要領です）。</p>
-<p><code>content</code> プロパティの値として、<code>counter()</code> とカウンター名を記述します。オプションとして種類を記述します。種類は上の <strong>番号順リスト</strong> の欄にあるものと同じです。</p>
-<p>通常、カウンターを表示する要素もまたカウンターを増やします。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>次のルールは <code>numbered</code> クラスを持つ <span style="line-height: inherit;">{{ HTMLElement("h3") }} 要素が現れるたびにカウンターを初期化します:</span></p>
- <pre class="brush:css">h3.numbered {counter-reset: mynum;}
-</pre>
- <p> </p>
- <p>次のルールは<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">numbered クラスを持つ </code><span style="line-height: inherit;">{{ HTMLELement("p") }} 要素が現れるたびにカウンターを表示し、番号を増やします:</span></p>
- <pre class="brush:css">p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}
-</pre>
- <p>結果は次のようになります:</p>
- <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td><strong>Heading</strong><br>
-     <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>
-<div class="tuto_details">
- <div class="tuto_type">
-  さらに詳しく</div>
- <p>読者がみな、カウンターをサポートするブラウザを使っているとわからなければ、カウンターは使えません。</p>
- <p>カウンターを使えると、リストの項目と切り離してカウンターにスタイルをつけられる利点があります。上の例では、カウンターは太字ですがリスト項目は違います。</p>
- <p>もっと複雑な方法でカウンターを使えます — 例えば、様式に沿う文書の章、見出し、サブ見出し、段落を数えます。詳しくは、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> をご覧ください。</p>
-</div>
-<h2 id="実習_スタイルづけされたリスト">実習: スタイルづけされたリスト</h2>
-<p>新しいHTML文書、<code>doc2.html</code> を作成してください。次の内容をコピー＆ペーストします:</p>
-<pre class="brush:html;">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="UTF-8"&gt;
-    &lt;title&gt;Sample document 2&lt;/title&gt;
-    &lt;link rel="stylesheet" href="style2.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-
-    &lt;h3 id="oceans"&gt;The oceans&lt;/h3&gt;
-    &lt;ul&gt;
-      &lt;li&gt;Arctic&lt;/li&gt;
-      &lt;li&gt;Atlantic&lt;/li&gt;
-      &lt;li&gt;Pacific&lt;/li&gt;
-      &lt;li&gt;Indian&lt;/li&gt;
-      &lt;li&gt;Southern&lt;/li&gt;
-    &lt;/ul&gt;
-
-    &lt;h3 class="numbered"&gt;Numbered paragraphs&lt;/h3&gt;
-    &lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
-    &lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
-    &lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
-    &lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
-    &lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;
-
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-<p>新しいスタイルシート、<code>style2.css を作成してください。次の内容をコピー＆ペーストします</code>:</p>
-<pre class="brush:css;">/* numbered paragraphs */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;
-}
-</pre>
-<p>レイアウトやコメントが気に入らなければ変えてください。</p>
-<p>ブラウザで文書を開きます。カウンター対応のブラウザなら下の例に似たものが見えるでしょう。非対応のブラウザなら、数字が見えません（おそらくコロンも）:</p>
-<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
- <tbody>
-  <tr>
-   <td>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
-    <ul style="">
-     <li>Arctic</li>
-     <li>Atlantic</li>
-     <li>Pacific</li>
-     <li>Indian</li>
-     <li>Southern</li>
-    </ul>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">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>スタイルシートに一つルールを追加して、リスト項目に i から v のローマ数字で番号をつけてください:</p>
- <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td>
-     <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
-     <ul style="">
-      <li>Arctic</li>
-      <li>Atlantic</li>
-      <li>Pacific</li>
-      <li>Indian</li>
-      <li>Southern</li>
-     </ul>
-    </td>
-   </tr>
-  </tbody>
- </table>
- <p> </p>
- <p>次のように、見出しを括弧内の大文字のアルファベットで識別するように、スタイルシートを変更してください:</p>
- <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td>
-     <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p>
-     <p><strong>. . .</strong></p>
-     <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p>
-     <p><strong>. . .</strong></p>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<p><a href="/ja/CSS/Getting_Started/Challenge_solutions#Lists" title="en/CSS/Getting started/Challenge solutions#Lists">チャレンジの解答を見る。</a></p>
-<h2 id="さて次は？">さて次は？</h2>
-<p>{{ nextPage("/ja/docs/CSS/Getting_Started/Boxes", "ボックス") }} 文書を表示するとき、ブラウザは要素をページ上に並べる際に、要素を囲むようにスペースを作ります。次のページでは、要素の基礎となる形である <a href="/ja/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">ボックス（boxes）</a>を CSS で扱う方法について述べます。</p>