initial commit

51 files changed, 14281 insertions, 0 deletions

diff --git a/files/ja/learn/css/building_blocks/advanced_styling_effects/index.html b/files/ja/learn/css/building_blocks/advanced_styling_effects/index.html
new file mode 100644
index 0000000000..650851a8a3
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/advanced_styling_effects/index.html
@@ -0,0 +1,426 @@
+---
+title: ボックスの高度なエフェクト
+slug: Learn/CSS/Building_blocks/Advanced_styling_effects
+tags:
+  - Article
+  - Beginner
+  - Blend modes
+  - Boxes
+  - CSS
+  - CodingScripting
+  - Filters
+  - Styling
+  - box shadows
+  - effects
+translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary"><span class="seoSummary">この記事はトリックの箱として機能し、ボックスの影、ブレンドモード、フィルタのようなボックスの装飾に使用できる高度な機能のいくつかを紹介します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基礎（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>ボックスの高度なエフェクトの使用方法についてのアイデアを得ることと、CSS 言語に登場しているいくつかの新生のスタイル設定ツールについて知ること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Box_shadows" name="Box_shadows">ボックスの影</h2>
+
+<p><a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>のモジュールに戻って、{{cssxref("text-shadow")}} プロパティを見てみましょう。 これにより、要素のテキストに1つ以上のドロップシャドウを適用できます。 ボックスにも同等のプロパティがあります — {{cssxref("box-shadow")}} を使用すると、実際の要素ボックスに1つ以上のドロップシャドウを適用できます。 テキストの影と同様に、ボックスの影はブラウザー間で非常によくサポートされていますが、IE9 以降のみです。 古いバージョンの IE を使用しているユーザーは、影なしで対処するしかないかもしれないので、コンテンツがそれらなしで判読可能であることを確かめるためにデザインをテストするだけです。</p>
+
+<p>このセクションの例は <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">ソースコード</a>も参照）。</p>
+
+<h3 id="A_simple_box_shadow" name="A_simple_box_shadow">簡単なボックスの影</h3>
+
+<p>物事を始めるための簡単な例を見てみましょう。 まず、いくつかの HTML です。</p>
+
+<pre class="brush: html">&lt;article class="simple"&gt;
+  &lt;p&gt;&lt;strong&gt;Warning&lt;/strong&gt;: The thermostat on the cosmic transcender has reached a critical level.&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<p>そして、CSS です。</p>
+
+<pre class="brush: css">p {
+  margin: 0;
+}
+
+article {
+  max-width: 500px;
+  padding: 10px;
+  background-color: red;
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
+}
+
+.simple {
+  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
+}</pre>
+
+<p>これにより、次のような結果が得られます。</p>
+
+<p>{{ EmbedLiveSample('A_simple_box_shadow', '100%', 100) }}</p>
+
+<p><code>box-shadow</code> プロパティ値に次の4つの項目があることがわかります。</p>
+
+<ol>
+ <li>最初の長さの値は<strong>水平オフセット</strong>（horizontal offset）です — 影が元のボックスから右へオフセットした距離です（値が負の場合は左）。</li>
+ <li>2番目の長さの値は<strong>垂直オフセット</strong>（vertical offset）です — 影が元のボックスから下方向へオフセットした距離です（値が負の場合は上方向）。</li>
+ <li>3番目の長さの値は、<strong>ぼかし半径</strong>（blur radius）です — 影に適用されるぼかしの量です。</li>
+ <li>色の値は、影の<strong>基本色</strong>（base color）です。</li>
+</ol>
+
+<p>これらの値を定義するために必要な長さと色の単位を使用できます。</p>
+
+<h3 id="Multiple_box_shadows" name="Multiple_box_shadows">複数のボックスの影</h3>
+
+<p>次のように、1つの <code>box-shadow</code> の宣言で、複数のボックスの影をコンマで区切って指定することもできます。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;article class="multiple"&gt;
+  &lt;p&gt;&lt;strong&gt;Warning&lt;/strong&gt;: The thermostat on the cosmic transcender has reached a critical level.&lt;/p&gt;
+&lt;/article&gt;</pre>
+</div>
+
+<pre class="brush: css">p {
+  margin: 0;
+}
+
+article {
+  max-width: 500px;
+  padding: 10px;
+  background-color: red;
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
+}
+
+.multiple {
+  box-shadow: 1px 1px 1px black,
+              2px 2px 1px black,
+              3px 3px 1px red,
+              4px 4px 1px red,
+              5px 5px 1px black,
+              6px 6px 1px black;
+}</pre>
+
+<p>そして、この結果を得ます。</p>
+
+<p>{{ EmbedLiveSample('Multiple_box_shadows', '100%', 100) }}</p>
+
+<p>ここでは、複数の色付きレイヤーを持つ凸型のボックスを作成することで楽しいことができましたが、例えば複数の光源に基づいて影を付けてよりリアルな外観を作成するなど、好きな方法で使用できます。</p>
+
+<h3 id="Other_box_shadow_features" name="Other_box_shadow_features">その他のボックスの影の機能</h3>
+
+<p>{{cssxref("text-shadow")}} とは異なり、{{cssxref("box-shadow")}} には <code>inset</code> キーワードがあります — これを影の宣言の最初に置くと、外側の影ではなく内側の影になります。 見て理解してもらいましょう。</p>
+
+<p>まず、この例では一部異なる HTML を使用します。</p>
+
+<pre class="brush: html">&lt;button&gt;Press me!&lt;/button&gt;</pre>
+
+<pre class="brush: css">button {
+  width: 150px;
+  font-size: 1.1rem;
+  line-height: 2;
+  border-radius: 10px;
+  border: none;
+  background-image: linear-gradient(to bottom right, #777, #ddd);
+  box-shadow: 1px 1px 1px black,
+              inset 2px 3px 5px rgba(0,0,0,0.3),
+              inset -2px -3px 5px rgba(255,255,255,0.5);
+}
+
+button:focus, button:hover {
+  background-image: linear-gradient(to bottom right, #888, #eee);
+}
+
+button:active {
+  box-shadow: inset 2px 2px 1px black,
+              inset 2px 3px 5px rgba(0,0,0,0.3),
+              inset -2px -3px 5px rgba(255,255,255,0.5);
+}</pre>
+
+<p>これにより、次のような結果が得られます。</p>
+
+<p>{{ EmbedLiveSample('Other_box_shadow_features', '100%', 70) }}</p>
+
+<p>ここでは、フォーカス/ホバー/アクティブ状態と共にボタンの装飾を設定しました。 このボタンには、デフォルトで単純な黒いボックスの影が設定されています。 さらに、1つは明るく、もう1つは暗い、2つの内側の影を、ボタンに素晴らしい陰影エフェクトを与えるためにボタンの反対側の角に置きます。</p>
+
+<p>ボタンが押されたとき、アクティブ状態は最初のボックスの影を非常に暗い内側の影と交換し、押されているボタンの外観を与えます。</p>
+
+<div class="note">
+<p><strong>注</strong>: <code>box-shadow</code> 値に設定できる別の項目があります — 色の値の直前に別の長さの値をオプションで設定できるのが、<strong>広がり半径</strong>（spread radius）です。 設定すると、影が元のボックスよりも大きくなります。 あまり一般的ではありませんが、言及する価値があります。</p>
+</div>
+
+<h2 id="Filters" name="Filters">フィルタ</h2>
+
+<p>CSS フィルタは、Photoshop のようなグラフィックパッケージのレイヤーにフィルタを適用するのと同じ方法で、要素にフィルタを適用する方法を提供します。 利用可能ないくつかの異なるオプションがあり、{{cssxref("filter")}} のリファレンスページでそれらすべてについて詳しく読むことができます。 このセクションでは、構文について説明し、結果がどれほど楽しいものになるかを説明します。</p>
+
+<p>基本的に、フィルタは任意の要素、ブロック、インラインに適用することができます — あなたは単に <code>filter</code> プロパティを使い、それに特定のフィルタ関数の値を与えるだけです。 利用可能なフィルタオプションの中には他の CSS 機能と非常によく似た機能を持つものがあります。 例えば、<code>drop-shadow()</code> は非常によく似た方法で機能し、{{cssxref("box-shadow")}} や {{cssxref("text-shadow")}} と同じエフェクトをもたらします。 しかし、フィルタに関して本当に素晴らしいことは、ボックス自体を1つの大きな塊としてではなく、ボックス内のコンテンツの正確な形状に作用することです。 それは常に望んだものではないかもしれませんが、もっときれいに見えます。 簡単な例を使用して、意味を説明しましょう。</p>
+
+<p>まず、いくつかの簡単な HTML です。</p>
+
+<pre class="brush: html">&lt;p class="filter"&gt;Filter&lt;/p&gt;
+
+&lt;p class="box-shadow"&gt;Box shadow&lt;/p&gt;
+</pre>
+
+<p>そして今、いくつかの CSS はドロップシャドウをそれぞれに適用します。</p>
+
+<pre class="brush: css">p {
+  margin: 1rem auto;
+  padding: 20px;
+  width: 100px;
+  border: 5px dashed red;
+}
+
+.filter {
+  -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
+  filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
+}
+
+.box-shadow {
+  box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
+}</pre>
+
+<p>これにより、次のような結果が得られます。</p>
+
+<p>{{ EmbedLiveSample('Filters', '100%', 200) }}</p>
+
+<p>ご覧のとおり、フィルタのドロップシャドウは、テキストの正確な形と境界線の破線に従います。 ボックスの影はボックスの四角形にちょうど従っています。</p>
+
+<p>その他注意すべきこと。</p>
+
+<ul>
+ <li>フィルタは非常に新しく、Microsoft Edge を含む最近のほとんどのブラウザーでサポートされていますが、Internet Explorer ではまったくサポートされていません。 デザインにフィルタを使用する場合は、コンテンツがフィルタなしで使用可能であることを確認する必要があります。</li>
+ <li><code>-webkit-</code> 接頭辞が付いたバージョンの <code>filter</code> プロパティが含まれていることがわかります。 これは{{glossary("Vendor Prefix","ベンダー接頭辞")}}と呼ばれ、新しい機能の実装を完了する前にブラウザーによって使用され、その機能をサポートし、接頭辞の付かないバージョンと衝突せずにその機能を試すことができます。 ベンダー接頭辞はウェブ開発者によって使われることを意図していませんが、実験的な機能が本当に望まれるならば本番ページで使われることもあります。 この場合、現在のところ Chrome / Safari / Opera のサポートには <code>-webkit-</code> バージョンのプロパティが必要ですが、Edge と Firefox は最後の接頭辞の付かないバージョンを使用します。</li>
+</ul>
+
+<div class="note">
+<p><strong>注</strong>: コードで接頭辞を使用する場合は、接頭辞が必要なバージョンと接頭辞の付かないバージョンを必ずすべて含めてください。 そうすれば、可能な限り最大数のブラウザーでこの機能を使用できるようになり、後でブラウザーが接頭辞をなくすときに接頭辞の付かないバージョンも使用できます。 また、これらの実験的な機能は変更される可能性があるため、コードが壊れる可能性があります。 接頭辞が削除されるまで、これらの機能を試してみることが本当に最善です。</p>
+</div>
+
+<p>その他のフィルタの例が <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html">filters.html</a> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html">ソースコード</a>も参照）。</p>
+
+<h2 id="Blend_modes" name="Blend_modes">ブレンドモード</h2>
+
+<p>CSS ブレンドモードでは、2つの要素が重なるときにブレンドエフェクトを指定する要素にブレンドモードを追加できます — 各ピクセルに表示される最終的な色は、元のピクセル色とその下のレイヤーにあるピクセル色を組み合わせた結果になります。 ブレンドモードは、Photoshop のようなグラフィックアプリケーションのユーザーにとっては非常によく知られています。</p>
+
+<p>CSS でブレンドモードを使用する次の2つのプロパティがあります。</p>
+
+<ul>
+ <li>{{cssxref("background-blend-mode")}} は、単一の要素に設定された複数の背景画像と色をブレンドします。</li>
+ <li>{{cssxref("mix-blend-mode")}} は、設定されている要素と、それが重なっている要素をブレンドします — 背景とコンテンツの両方です。</li>
+</ul>
+
+<p>こちらの <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> サンプルページ（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">ソースコード</a>を参照）、および {{cssxref("&lt;blend-mode&gt;")}} リファレンスページには、ここに掲載されている以外にもたくさんの例があります。</p>
+
+<div class="note">
+<p><strong>注</strong>: ブレンドモードもまた非常に新しいもので、フィルタよりもサポートが多少劣ります。 Edge にはまだサポートがありませんし、Safari はブレンドモードオプションのいくつかをサポートするだけです。</p>
+</div>
+
+<h3 id="background-blend-mode" name="background-blend-mode">background-blend-mode</h3>
+
+<p>ここでも、これをよりよく理解できるように、いくつかの例を見てみましょう。 まず、{{cssxref("background-blend-mode")}} です — ここでは次のいくつかの簡単な {{htmlelement("div")}} を示すことで、オリジナルとブレンドバージョンを比較できます。</p>
+
+<pre class="brush: html">&lt;div&gt;
+&lt;/div&gt;
+&lt;div class="multiply"&gt;
+&lt;/div&gt;</pre>
+
+<p>次にいくつかの CSS です — <code>&lt;div&gt;</code> に1つの背景画像と緑色の背景色を追加しています。</p>
+
+<pre class="brush: css">div {
+  width: 250px;
+  height: 130px;
+  padding: 10px;
+  margin: 10px;
+  display: inline-block;
+  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
+  background-color: green;
+}
+
+.multiply {
+  background-blend-mode: multiply;
+}</pre>
+
+<p>結果はこれです — 左側にオリジナル、右側に乗算ブレンドモードがあります。</p>
+
+<p>{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}</p>
+
+<h3 id="mix-blend-mode" name="mix-blend-mode">mix-blend-mode</h3>
+
+<p>それでは、{{cssxref("mix-blend-mode")}} を見てみましょう。 ここでは上と同様の2つの <code>&lt;div&gt;</code> を提示しますが、要素がどのようにブレンドされるかを示すために、それぞれが紫色の背景を持つ単純な <code>&lt;div&gt;</code> の上に乗っています。</p>
+
+<pre class="brush: html">&lt;article&gt;
+  No mix blend mode
+  &lt;div&gt;
+
+  &lt;/div&gt;
+  &lt;div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;
+
+&lt;article&gt;
+  Multiply mix
+  &lt;div class="multiply-mix"&gt;
+
+  &lt;/div&gt;
+  &lt;div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<p>次がこれをスタイルする CSS です。</p>
+
+<pre class="brush: css">article {
+  width: 280px;
+  height: 180px;
+  margin: 10px;
+  position: relative;
+  display: inline-block;
+}
+
+div {
+  width: 250px;
+  height: 130px;
+  padding: 10px;
+  margin: 10px;
+}
+
+article div:first-child {
+  position: absolute;
+  top: 10px;
+  left: 0;
+  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
+  background-color: green;
+}
+
+article div:last-child {
+  background-color: purple;
+  position: absolute;
+  bottom: -10px;
+  right: 0;
+  z-index: -1;
+}
+
+.multiply-mix {
+  mix-blend-mode: multiply;
+}</pre>
+
+<p>これにより、次のような結果が得られます。</p>
+
+<p>{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}</p>
+
+<p>ここでは、乗算混合（multiply mix）ブレンドが2つの背景画像だけでなく、その下の <code>&lt;div&gt;</code> からの色もブレンドしていることがわかります。</p>
+
+<div class="note">
+<p><strong>注</strong>: {{cssxref("position")}}、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("z-index")}} など、上記のレイアウトプロパティの一部を理解していなくても心配しないでください。 これらについては、<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>のモジュールで詳しく説明します。</p>
+</div>
+
+<h2 id="-webkit-background-clip_text" name="-webkit-background-clip_text">-webkit-background-clip: text</h2>
+
+<p>先に進む前に、簡単に言及しておきたいと思うもう1つの新生機能は、{{cssxref("background-clip")}} の <code>text</code> 値です（現在 Chrome、Safari、Opera でサポートされており、Firefox で実装されています）。 独自の <code>-webkit-text-fill-color: transparent;</code> 機能とともに使用すると、背景画像を要素のテキストの形に切り取ることができ、いくつかの素晴らしいエフェクトをもたらします。 これは公式の標準ではありませんが、普及しており、開発者によってかなり広く使用されているため、複数のブラウザーにわたって実装されています。 このコンテキストで使用すると、Webkit / Chrome 以外のブラウザーでも、両方のプロパティに <code>-webkit-</code> ベンダー接頭辞が必要になります。</p>
+
+<pre class="brush: css">.text-clip {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}</pre>
+
+<p>では、なぜ他のブラウザーが <code>-webkit-</code> 接頭辞を実装したのでしょうか？ 主にブラウザーの互換性のためにです — 非常に多くのウェブ開発者が <code>-webkit-</code> 接頭辞を使用してウェブサイトを実装し始めているため、実際には標準に従っているのに、他のブラウザーでは壊れているように見え始めました。 そこで彼らはそのような機能をいくつか実装することを余儀なくされました。 これはあなたの仕事で標準的でなく接頭辞の付いた CSS 機能を使用する危険性を浮き彫りにします — それらはブラウザーの互換性の問題を引き起こすだけでなく、変更される可能性もあるため、コードはいつでも壊れる可能性があります。 標準に固執するほうがはるかに良いです。</p>
+
+<p>本番環境でこのような機能を使用したい場合は、ブラウザー間で徹底的なテストを行い、機能が機能しない場合でもサイトが引き続き使用可能であることを確認してください。</p>
+
+<div class="note">
+<p><strong>注</strong>: 完全な <code>-webkit-background-clip: text</code> のコードの例については、<a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> を参照してください（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">ソースコード</a>も参照）。</p>
+</div>
+
+<h2 id="Active_learning_experiment_with_some_effects" name="Active_learning_experiment_with_some_effects">能動的学習: いくつかのエフェクトを用いた実験</h2>
+
+<p>今度は、あなたの番です。 この能動的学習のために、下に提供されているコードを使用して、上で読んだエフェクトのいくつかを試してみてください。</p>
+
+<p>間違えた場合は、<em>Reset</em> ボタンを使用して例をいつでもリセットできます。</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;div class="style-me"&gt;
+&lt;/div&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;.style-me {
+  width: 280px;
+  height: 130px;
+  padding: 10px;
+  margin: 10px;
+  display: inline-block;
+  background-color: red;
+  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px,
+              linear-gradient(to bottom right, #f33, #a33);
+} &lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 820) }}</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>この記事が楽しかったことを願っています — ぴかぴかのおもちゃで遊ぶのは概してそうで、最先端のブラウザーで、どのような種類のツールが使用可能になりつつあるのかを見るのはいつも面白いです。 <a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>の記事の終わりに到達したので、次に私たちの評価であなたのボックスの装飾のスキルをテストします。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Box_model_recap">ボックスモデルの復習</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Backgrounds">背景</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">境界線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">表の装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">ボックスの高度なエフェクト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">装飾的なレターヘッド付きの便箋の作成</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">かっこいいボックス</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html
new file mode 100644
index 0000000000..d2e65370cd
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -0,0 +1,338 @@
+---
+title: 背景と枠線
+slug: Learn/CSS/Building_blocks/Backgrounds_and_borders
+tags:
+  - Background
+  - Beginner
+  - CSS
+  - Image
+  - Learn
+  - Position
+  - borders
+  - color
+translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div>
+
+<div></div>
+
+<p>このレッスンでは、CSS の背景・枠線モジュールの機能を使ったクリエイティブな表現方法をいくつか見ていきます。グラデーション、背景画像、角の丸めを加えることを通じて、CSS を使ったスタイリングの多様な課題に対する解答が得られるでしょう。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>ボックスの背景と枠線をスタイルする方法を学ぶ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Styling_backgrounds_in_CSS" name="Styling_backgrounds_in_CSS">CSS による背景の設定</h2>
+
+<p>CSSの {{cssxref("background")}} プロパティは、このレッスンで説明する多くの個別指定プロパティ(<strong>longhand property</strong>)を一度に指定する一括指定プロパティ(<strong>shorthand property</strong>)です。スタイルシートで複雑な背景プロパティを見かけると、一度に多くの値を渡していて理解するのが少し難しく感じるかもしれません。</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
+  url(big-star.png) center no-repeat, rebeccapurple;
+} </code>
+</pre>
+
+<p>一括指定の仕方については後ほど改めて扱います。まずは背景に対してCSSで何ができるのかを知るために、ひとつひとつのプロパティを見ていきましょう。</p>
+
+<h3 id="Background_colors" name="Background_colors">背景色</h3>
+
+<p> {{cssxref("background-color")}} プロパティは、要素の背景色を定義します。このプロパティは、有効な<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a>値を受け入れます。<code>background-color</code>は、要素の <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/The_box_model#Parts_of_a_box"><strong>Content box</strong>, <strong>Padding box</strong></a> の範囲でコンテンツの下に広がります。</p>
+
+<p>次の例では、さまざまな色の値値を使用して、ボックス(<code>.box</code>)、見出し(<code>h2</code>)、および {{htmlelement("span")}} 要素に背景色を指定しています。</p>
+
+<p><strong>利用可能な <a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/color_value">&lt;color&gt;</a> を使ってみましょう。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 600)}}</p>
+
+<h3 id="Background_images" name="Background_images">背景画像</h3>
+
+<p> {{cssxref("background-image")}} プロパティは、要素の背景に表示する画像を指定します。次の例には、2個のボックスがあります。片方のボックスでは背景画像がボックスより大きく、他方のボックスの背景画像は小さな星の画像です。</p>
+
+<p>この例は、背景画像に関する2つのことを示しています。<br>
+ デフォルトでは、大きな画像はボックスに収まるように縮小されず、一部分のみが表示されます。いっぽう、小さな画像はボックスの内側いっぱいまで繰り返されます。この場合、実際の画像は星1個のみです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 600)}}</p>
+
+<p>背景画像と背景色を同時に指定すると、背景色より手前に背景画像が表示されます。上記の例に<code>background-color</code>プロパティを追加して、動作を確認してみましょう。</p>
+
+<h4 id="Controlling_background-repeat" name="Controlling_background-repeat">背景画像の繰り返しの指定</h4>
+
+<p> {{cssxref("background-repeat")}} プロパティは、画像の繰り返し表示の動作を制御するために使用されます。使用可能な値には次のものがあります:</p>
+
+<ul>
+ <li><code>no-repeat</code> — 背景画像が繰り返されるのを完全に防ぎます。</li>
+ <li><code>repeat-x</code> — 水平方向に繰り返します。</li>
+ <li><code>repeat-y</code> — 垂直方向に繰り返します。</li>
+ <li><code>repeat</code> — デフォルト; 両方の方向に繰り返します</li>
+</ul>
+
+<p><strong>以下の例でこれらの値を試してみましょう。値を<code>no-repeat</code>に設定したため、星が1つだけ表示されます。異なる値(<code>repeat-x</code>や<code>repeat-y</code>)に変えてみて、その効果を確認してみましょう。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}}</p>
+
+<h4 id="Sizing_the_background_image" name="Sizing_the_background_image">背景画像のサイズ指定</h4>
+
+<p>先ほどの例では、背景を設定したい要素より画像のほうが大きいため画像の一部しか表示されませんでした。 {{cssxref("background-size")}} プロパティを使用して、背景内に収まるように画像のサイズを調整できます。</p>
+
+<p><code>background-size</code>プロパティは、<a href="/ja/docs/Web/CSS/length">&lt;length&gt;</a> または <a href="/ja/docs/Web/CSS/percentage">&lt;percentage&gt;</a> の値をとることができます。</p>
+
+<p>また、次のキーワードを使うこともできます：</p>
+
+<ul>
+ <li><code>cover</code> —ブラウザは、アスペクト比を維持したままボックスの領域を完全に覆うように画像の大きさを調整します。<br>
+  この場合、画像の一部が箱の外に出る可能性があります。</li>
+ <li><code>contain</code> —ブラウザは、画像がボックス内にちょうど収まるように画像の大きさを調整します。<br>
+  この場合、画像とボックスのアスペクト比が異なる場合、画像の左右または上下に隙間ができる可能性があります。</li>
+</ul>
+
+<p>次の例では、<strong>&lt;length&gt;</strong>値を使用して先ほどの大きな画像がボックス内におさまる大きさに変更しました。結果として、画像が歪んでいることがわかります。</p>
+
+<p>以下を試してみましょう。</p>
+
+<ul>
+ <li>背景のサイズをあらわす<strong>&lt;length&gt;</strong>値を変更します。</li>
+ <li><strong>&lt;length&gt;</strong>値を削除し、<code>background-size: cover</code>や<code>background-size: contain</code>を使うとどうなるかを確認します。</li>
+ <li>画像がボックスより小さい場合は、<code>background-repeat</code>の値を変更して画像を繰り返すことができます。</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 750)}}</p>
+
+<h4 id="Positioning_the_background_image" name="Positioning_the_background_image">背景画像の位置の指定</h4>
+
+<p> {{cssxref("background-position")}} プロパティを適用すると、そのボックス上で背景画像を表示する位置を選択できます。このプロパティでは、ボックスの左上隅を<code>(0, 0)</code>として、水平方向の座標軸(<strong>horisontal axis</strong>)を<code>x</code>軸(<strong><code>x</code> axis</strong>, 複数形はaxes）、垂直方向の座標軸(<strong>vertical axis</strong>)を<code>y</code>軸(<strong><code>y</code> axis</strong>)とする座標系にそって画像を配置します。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: デフォルトの<code>background-position</code>の値は<code>(0, 0)</code>です。</p>
+</div>
+
+<p>最も一般的な<code>background-position</code>の値は、2個の値をとります—水平方向、垂直方向の順で値を指定します。</p>
+
+<p><code>top</code>や<code>right</code>などのキーワードを使用できます (詳しくは{{cssxref("background-image")}}ページを参照):</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+} </code>
+</pre>
+
+<p>そして、 <a href="/ja/docs/Web/CSS/length">&lt;length&gt;</a>および<a href="/ja/docs/Web/CSS/percentage">&lt;percentage&gt;</a>を使用できます:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+} </code>
+</pre>
+
+<p>次のように、キーワードの値を&lt;length&gt;や&lt;percentage&gt;の値と混在させてもかまいません。</p>
+
+<pre class="brush: css notranslate">.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}</pre>
+
+<p>最後に、4つの値をとる構文を使って、ボックスのいずれかの端からの距離を示すこともできます。この場合の長さは、その直前の値で指定した位置からの距離（オフセット, <strong>offset</strong>）です。下のCSSでは、背景を上(<code>top</code>)から<code>20px</code>、右(<code>right</code>)から<code>10px</code>に配置しています。</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+} </code></pre>
+
+<p><strong>次の例を使い、プロパティの値を変えてボックス内で星を動かしてみましょう。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <code>background-position</code> は {{cssxref("background-position-x")}} および {{cssxref("background-position-y")}} の一括指定プロパティで、それぞれの座標軸の方向の位置を個別に設定できます。</p>
+</div>
+
+<h3 id="Gradient_backgrounds" name="Gradient_backgrounds">グラデーション背景</h3>
+
+<p>グラデーション(<strong>gradient</strong>, <strong><ruby>勾配<rp>(</rp><rt>こうばい</rt><rp>)</rp> </ruby></strong>)は、背景に使用する場合には画像と同じようにふるまいます。グラデーションは{{cssxref("background-image")}}プロパティを使用して設定されます。</p>
+
+<p><a href="/ja/docs/Web/CSS/gradient">&lt;gradient&gt;</a>データ型のMDNページで、さまざまな種類のグラデーションとそれらを使ってできることについて詳しく読むことができます。Webで数多く提供されているCSSグラデーションジェネレーター(例えば "<cite><a href="https://cssgradient.io/">CSS Gradient</a></cite>")を使用して、グラデーションを楽しく試せます。このWebサービスでは、グラデーションを作成したのち、グラデーションを生成するソースコードをコピー&amp;ペーストできます。</p>
+
+<p>以下の例でいろいろなグラデーションを試してみましょう。 1つめのボックスには、ボックス全体に広がる線形グラデーション(linear gradient)を指定しています。2つめのボックスには、サイズを設定して(そのために繰り返されている)放射状グラデーション(radial gradinet)を指定しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 600)}}</p>
+
+<h3 id="Multiple_background_images" name="Multiple_background_images">複数の背景画像</h3>
+
+<p><code>background-image</code>プロパティにコンマ区切りで複数の画像を指定することで、複数の背景画像を使用することもできます。</p>
+
+<p>これを行うと、背景画像が互いに重なり合う可能性があります。背景は、最後に指定したものが一番下に置かれ、先のものが順に上に重ねられます。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: グラデーションを通常の背景画像と同じように重ね合わせることができます。</p>
+</div>
+
+<p>他の<code>background-*</code>プロパティも、<code>background-image</code>と同じ方法でコンマ区切りの値を持つことができます:</p>
+
+<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+background-repeat: no-repeat, repeat-x, repeat;
+background-position: 10px 20px,  top right;</pre>
+
+<p>プロパティに指定した複数のプロパティ値は、他のプロパティの同じ位置にある値と対応します。上の例で、<code>image1</code>の<code>background-repeat</code>値は<code>no-repeat</code>です。では、プロパティごとに値の個数が異なるとどうなるでしょうか？答えは、個数が少ない値が繰り返し使われる、ということです。上の例では、4つの背景画像がありますが、2つの <code>background-position</code> の値しかありません。最初の2つの位置の値は対応する位置の画像に適用され、その後は繰り返されます。つまり、<code>image3</code>には1番目、<code>image4</code>には2番目の値がふたたび使われます。</p>
+
+<p><strong>実際に試してみましょう。以下の例には2つの画像があります。重ね合わせの順序を確かめるために、どの背景画像を先にするかを変えてみてください。また、他のプロパティを操作して、位置、サイズ、繰り返し方法を変えてみてください。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 500)}}</p>
+
+<h3 id="Background_attachment" name="Background_attachment">スクロール時の背景画像の固定</h3>
+
+<p>背景に使用できるもうひとつのオプションは、コンテンツがスクロールするときのスクロール方法を指定することです。これは, {{cssxref("background-attachment")}} プロパティを使用して制御され、次の値を取ることができます:</p>
+
+<ul>
+ <li><code>scroll</code>: ページ全体のスクロールに応じて要素の背景を移動します。要素のコンテンツがスクロールされた場合には、背景は移動しません。<br>
+  実際には背景はページ上の同じ位置に固定されているため、ページがスクロールするとスクロールします。</li>
+ <li><code>fixed</code>: 要素の背景をビューポート(viewport)に固定します。ページや要素のコンテンツがスクロールされても移動せず、画面上の同じ位置にとどまります。</li>
+ <li><code>local</code>: 要素の背景をその要素自身に対して固定します。要素のコンテンツをスクロールした場合にもそれにあわせて背景が移動します。<br>
+  <code>local</code>値は、多くの場合に<code>scroll</code>値の挙動が期待どおりではないことから新しく追加されました（他の値はInternet Explorer 4以降でサポートされますが、<code>local</code>はIE 9以降のみでサポートされます）。</li>
+</ul>
+
+<p> {{cssxref("background-attachment")}} プロパティはスクロールするコンテンツがある場合にのみ効果があります。3つの値の違いを示す<a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">デモ（background-attachment.html）</a>を作成したのでご覧ください（<a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">ソースコード</a>も公開しています）。</p>
+
+<h3 id="Using_the_background_shorthand_property" name="Using_the_background_shorthand_property">背景に関する指定をまとめておこなう</h3>
+
+<p>このレッスンの冒頭で、 {{cssxref("background")}} プロパティを使って背景が指定されている場合についてふれました。この一括指定プロパティを使うと、複数のプロパティを一度に設定できます。</p>
+
+<p>複数の背景を使用する場合は、最初の背景に対するプロパティをすべて指定してから、カンマで区切って次の背景を追加します。以下の例では、サイズと位置を伴った<a href="#Gradient_backgrounds">グラデーション</a>、<code>no-repeat</code>と位置指定を伴った<a href="#Background_images">背景画像</a>、最後に<a href="#Background_colors">背景色</a>を指定しています。</p>
+
+<p>背景画像に関する一括指定を書くとき、いくつかのルールを守る必要があります。例えば：</p>
+
+<ul>
+ <li> <code>background-color</code> は最後のコンマの後にのみ指定できます。</li>
+ <li><code>background-size</code>の値は、<code>center / 80％</code>のように、<code>background-position</code>の値の直後に<code>/</code>文字を挟んだ位置でのみ使うことができます。</li>
+</ul>
+
+<p>すべての注意点を確認するには、 {{cssxref("background")}} のMDNページをご覧ください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 700)}}</p>
+
+<h3 id="Accessibility_considerations_with_backgrounds" name="Accessibility_considerations_with_backgrounds">アクセシビリティの観点での注意点</h3>
+
+<p>テキストを背景画像や背景色の上に配置する際には、閲覧者がテキストを読み取れるだけの十分なコントラストを確保するよう注意する必要があります。画像の上にテキストを配置する場合は、画像が読み込まれない場合でもテキストが読み取れるような背景色も指定する必要があります。</p>
+
+<p>スクリーンリーダーは背景画像を解析できないため、画像は装飾としての役割のみを担うべきです。重要なコンテンツはすべてHTMLページのなかで表現するべきで、背景画像のなかに含めるべきではありません。</p>
+
+<h2 id="Borders" name="Borders">枠線</h2>
+
+<p>ボックスモデルについて学習するとき、枠線(border)がボックスのサイズにどのように影響するかを見てきました。このレッスンでは、枠線をクリエイティブに活用する方法を見ていきます。</p>
+
+<p>通常、CSSで要素に枠線を追加するときは、CSSの1行で枠線の色、幅、スタイルを指定する一括指定プロパティを使います。</p>
+
+<p> {{cssxref("border")}}:を使用して、ボックスの4辺すべてに枠線を設定できます。</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border: 1px solid black;
+} </code></pre>
+
+<p>または、次のように、ボックスの1つの辺を対象にすることができます。:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top: 1px solid black;
+} </code></pre>
+
+<p>一括指定で指定した個々のプロパティは次のとおりです：</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+} </code></pre>
+
+<p>一辺ごとの個別指定については次のようになります：</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+} </code></pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: top, right, bottom, leftの各方向の枠線を指定するプロパティには、HTML文書の書字モード（writing mode）と結びついた<em>論理</em>プロパティ（<em>logical</em> property）が割り当てられています（書字モードは、左から右、右から左、上から下といったテキストの方向を制御するものです）。次のレッスンでは、さまざまなテキストの方向の処理について説明します。</p>
+</div>
+
+<p>枠線にはさまざまなスタイルを指定できます。以下の例では、ボックスの4辺にそれぞれ異なる枠線スタイルを使用しています。枠線の色、幅、スタイルを試して、枠線の動作を確認しましょう。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 700)}}</p>
+
+<h3 id="Rounded_corners" name="Rounded_corners">角の丸み</h3>
+
+<p>{{cssxref("border-radius")}}一括指定プロパティと、各々の角に対応した個別指定プロパティを使用して、ボックスの角の丸みを実現できます。各プロパティは2個の&lt;length&gt;または&lt;percentage&gt;を値として使用できます。最初の値は水平方向の半径(radius)を定義し、2番目の値は垂直方向の半径を定義します。多くの場合、1つの値のみを指定して両方向に適用します。</p>
+
+<p>例えば、ボックスの4つの角すべてに半径 10px の丸みを持たせるには:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-radius: 10px;
+} </code></pre>
+
+<p>または、右上角の水平方向の半径を1em、垂直方向の半径を 10％ にするには:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top-right-radius: 1em 10%;
+} </code></pre>
+
+<p>以下の例では、はじめに4つの角すべてについて角の丸みを設定したのち、右上角を他と異なる値に変更しました。値を変えて試してみましょう。使用できる構文は{{cssxref("border-radius")}} プロパティのページを見て確認してください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 650)}}</p>
+
+<h2 id="Playing_with_backgrounds_and_borders" name="Playing_with_backgrounds_and_borders">背景と枠線を試す</h2>
+
+<p>学んだ知識を試すために、背景と枠線を使って次のものを作成してみてください。コード例を出発点として使ってください:</p>
+
+<ol>
+ <li>ボックスに幅が5pxの黒い実線の境界線を付け、角に半径が10pxの丸みをつけてください。</li>
+ <li>背景画像を追加し（URL <code>balloons.jpg</code>を使用）、ボックスを覆うようにサイズを変更してください。</li>
+ <li><code>&lt;h2&gt;</code>に半透明の黒い背景色を指定し、テキストを白にしてください。</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%',650)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">ここで正解を確認できます</a>が、まずは自分の力で解答してみてください！</p>
+</div>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>このレッスンではかなり多くのことを説明してきましたが、そのなかで背景や枠線をボックスに追加する方法がたくさんあることがわかりました。これまでに説明した機能について詳しく知りたくなったら、各プロパティのMDNページに目を通してみましょう。これらのページには知識を活用したり強化したりするための使用例が書かれています。</p>
+
+<p>次のレッスンでは、ドキュメントの書字モードがCSSとどのように相互作用するかを説明します。テキストが左から右以外の方向に流れる場合に何が起こるのでしょうか？</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html
new file mode 100644
index 0000000000..a385a103b6
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -0,0 +1,339 @@
+---
+title: カスケードと継承
+slug: Learn/CSS/Building_blocks/Cascade_and_inheritance
+tags:
+  - Beginner
+  - CSS
+  - Cascade
+  - Inheritance
+  - Learn
+  - rules
+  - source order
+  - specificity
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p>このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念（カスケード・詳細度・継承）の理解を深めていくことです。</p>
+
+<p>このレッスンは他の記事よりも収穫が少なく座学っぽく感じるかもしれませんが、本記事の内容を理解しておくことで今後に役立ちます。このセクションを注意深く読み、次に進む前に概念をよく理解することをお勧めします。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>カスケードと詳細度、および CSS の継承の仕組みについて学ぶ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Conflicting_rules" name="Conflicting_rules">競合するルール</h2>
+
+<p>CSS は <strong>Cascading Style Sheets</strong> の略で、最初の単語であるカスケード (<em>cascading</em>) を理解することは非常に重要です。カスケードのふるまいは、CSS を理解するための鍵となりえます。</p>
+
+<p>プロジェクトに取り組んでいるとき、要素に適用されているはずの CSS が機能していないと感じることがあります。それは大抵の場合、同じ要素に適用される可能性のある 2 つ のルールを作ってしまったことに由来します。<strong><font><font>カスケード</font></font></strong>および、それと密接に関連する<strong><font><font>詳細度</font></font></strong>の概念は、そのような競合が存在する際のメカニズムです。実際に要素をスタイリングしているルールがどれなのかは期待と異なる場合があるため、このメカニズムを理解しておく必要があります。</p>
+
+<p>このほかに重要なのは<strong>継承</strong>という概念です。一部の CSS プロパティは親要素の値をデフォルトで継承し、一方で継承しないものもあります。これにより、予期しない動作が発生する可能性もあります。</p>
+
+<p>まず重要なものを簡単に見てみましょう。それぞれ順に追っていって CSS でどのように相互作用するかを見ていきます。これらはトリッキーな概念のように見えるかもしれませんが、CSSを書く練習を積んでいくと、その動作は明らかになってくるでしょう。</p>
+
+<h3 id="The_cascade" name="The_cascade">カスケード</h3>
+
+<p><font><font>スタイルシートの</font></font><strong><font><font>カスケード</font></font></strong><font><font>に</font></font><font><font>ついて</font></font><font><font>、とてもシンプルに考えるなら CSS ルールの順序が重要であることを意味します。等しい詳細度を持つ 2 つ のルールが適用される場合、CSS の最後に来るものが使用されます。</font></font></p>
+
+<p>以下の例では、 <code>h1</code> に対して 2 つ のルールがあります。この <code>h1</code> は最終的に青色になります。これらのルールは個別のセレクターを持つため同じ詳細度であるので、ソースで最後にきている方が採用されています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}}</p>
+
+<h3 id="Specificity" name="Specificity">詳細度</h3>
+
+<p>詳細度とは、複数のルールに異なるセレクターがある場合にブラウザーがどのルールを適用するかを決定する方法ですが、同じ要素に適用することもできます。基本的に、セレクターの選択がどの程度具体的になるかの尺度です。</p>
+
+<ul>
+ <li>要素セレクターはそれほど具体的ではありません。ページに表示されるそのタイプのすべての要素を選択するため、スコアが低くなります。</li>
+ <li>クラスセレクターはより具体的です。ページ上の特定の <code>class</code> 属性値を持つ要素のみを選択するため、スコアはより高くなります。</li>
+</ul>
+
+<p>例を見てみましょう。以下に <code>h1</code> に適用できる 2 つ のルールを再度示します。この <code>h1</code> は最終的には赤色になります。クラスセレクターはルールにより高い詳細度を与えるため、要素セレクターを使用したルールがソースの順序でさらに下の方にあっても適用されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}}</p>
+
+<p>詳細度スコアリングなどについては、あとで説明します。</p>
+
+<h3 id="Inheritance" name="Inheritance">継承</h3>
+
+<p>ここでは継承についても理解する必要があります。親要素に設定された CSS プロパティ値には、子要素に継承されるものとそうでないものがあります。</p>
+
+<p>例えば、要素に <code>color</code> と <code>font-family</code> を設定すると、異なる色とフォントの値を直接適用しない限り、その中のすべての要素もその色とフォントでスタイルされます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}}</p>
+
+<p>いくつかのプロパティは継承されません。例えば、要素に {{cssxref("width")}} 50% と設定した場合、すべての子孫要素は親の幅の 50% の幅を取得しません。もしそんなことになるのら CSS を使うととてもイライラするでしょう。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: MDN の CSS プロパティリファレンスページには、仕様書セクションの下部に技術情報ボックスがあるのが通例です。このボックスには、そのプロパティに関する多数のデータポイント（継承されているかどうかなど）が一覧表示されます。例として <a href="/ja/docs/Web/CSS/color#Specifications">color プロパティの仕様書セクション</a> を参照してください。</p>
+</div>
+
+<h2 id="Understanding_how_the_concepts_work_together" name="Understanding_how_the_concepts_work_together">これらの概念がどう連携するか理解する</h2>
+
+<p>これら 3 つ の概念は、どの CSS をどの要素に適用するかを一緒に制御します。以下のセクションでは、それらがどのように連携するかを見ていきます。少し複雑に見えることもありますが、CSS を使いこなせば覚えやすくなり、忘れた場合はいつでも調べることができます。経験豊富な開発者でさえ、すべてを詳しく覚えているわけではありません。</p>
+
+<h2 id="Understanding_inheritance" name="Understanding_inheritance">継承を理解する</h2>
+
+<p>継承から始めます。次の例では {{HTMLElement("ul")}} があり、内部にさらに 2 つ のレベルの順序なしリストがネストされています。外側の <code>&lt;ul&gt;</code> に境界線、パディング、および文字色が指定されています。</p>
+
+<p>文字色については直接の子だけでなく、間接の子にも適用されています。つまり直接の子である <code>&lt;li&gt;</code> 、それに最初のネストされたリスト内のものにも適用されています。そして 2番目 にネストされたリストに <code>special</code> クラスを追加し、別の色が適用されています。これは子に継承します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}}</p>
+
+<p>幅（上述したとおり）、マージン、パディング、境界線などは継承されません。境界線がリストの子に継承される場合、すべてのリストとリストアイテムは境界線を表示してしまいます。おそらく、それは欲しい効果ではないはずです。</p>
+
+<p>デフォルトで継承されるプロパティとそうでないものは、主に常識に基づいているのです。</p>
+
+<h3 id="Controlling_inheritance" name="Controlling_inheritance">継承の制御</h3>
+
+<p>CSS は、継承を制御するための 4 つ の特別なユニバーサルプロパティ値 <em>(universal property values)</em> を提供します。すべての CSS プロパティはこれらの値を受け入れます。</p>
+
+<dl>
+ <dt>{{cssxref("inherit")}}</dt>
+ <dd>選択した要素に適用されるプロパティ値を、その親要素と同じものに設定します。これは「継承を有効にする」ことを意味します。</dd>
+ <dt>{{cssxref("initial")}}</dt>
+ <dd><font><font>選択された要素に適用されるプロパティ値を、ブラウザーのデフォルトスタイルシートでその要素に設定されているものと同じ値に設定します。</font><font>ブラウザーのデフォルトのスタイルシートで値が設定されておらず、かつ、そのプロパティが自然に継承される場合は </font></font><code>inherit</code><font><font> が代わりにプロパティ値として設定され</font><font>ます。</font></font></dd>
+ <dt>{{cssxref("unset")}}</dt>
+ <dd>プロパティを自然な値にリセットします。つまり、プロパティが自然に継承される場合は <code>inherit</code> のように動作し、そうでない場合は <code>initial</code> のように動作します。</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 新しい値で {{cssxref("revert")}} もありますが、これはブラウザーのサポートが制限されます。</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: それらの動作の詳細については <a href="/ja/docs/Web/CSS/Cascade">CSS カスケード入門</a>の <a href="/ja/docs/Web/CSS/Cascade#Origin_of_CSS_declarations">CSS 宣言のオリジン</a>を参照してください。</p>
+</div>
+
+<p>リンクのリストを見て、ユニバーサル値 <em>(universal values)</em> がどのように機能するかを調べることができます。以下のライブサンプルでは、CSS に変更を加えて何が起こるかを確認できます。HTML と CSS を理解するには、実際にコードを試すのが最善の方法です。</p>
+
+<p>以下を試してみてください。</p>
+
+<ol>
+ <li><font><font>2番目 のリストアイテムには、</font></font><code>my-class-1</code><font><font> が適用されています。これは、内部にネストされた </font></font><code>&lt;a&gt;</code><font><font> 要素に色を継承します。</font><font>ルールを削除すると、リンクの色はどのように変わるでしょうか？</font></font></li>
+ <li>なぜ 3番目 と 4番目 のリンクがその色であるのか理解できていますか？そうでない場合は、上述しているそれぞれの値の説明を確認してください。</li>
+ <li>例えば <code>a { color: red; }</code> というように <code>&lt;a&gt;</code> 要素に新しい色を定義すると、どのリンクの色が変わるでしょうか？</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}}</p>
+
+<h3 id="Resetting_all_property_values" name="Resetting_all_property_values">すべてのプロパティ値のリセット</h3>
+
+<p><font><font>CSS の一括指定プロパティ </font></font><code>all</code><font><font> を使用して、これらの継承値の 1 つ を（ほぼ）すべてのプロパティに一度に適用できます。その値として、いずれかの継承値 (</font></font><code>inherit</code><font><font>、</font></font><code>initial</code><font><font>、</font></font><code>unset</code><font><font>、または </font></font><code>revert</code><font><font>) を指定できます。新しく変更を開始する際、既知の開始点に戻ることができるように、変更されたスタイルを元に戻す便利な方法です。</font></font></p>
+
+<p><font><font>以下の例では 2 つ のブロック引用要素 <em>(blockquote)</em> があります。最初のスタイルは blockquote 要素自体に適用され、2 つ目には </font></font><code>all</code><font><font> に </font></font><code>unset</code><font><font> をセットするようにblockquote に適用されるクラスがあります。</font></font></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}}</p>
+
+<p><code>all</code> の値を他の有効な値に設定してみて、違いを観察してみてください。</p>
+
+<h2 id="Understanding_the_cascade" name="Understanding_the_cascade">カスケードを理解する</h2>
+
+<p><font>HTML 構造に深くネストされた段落が body の CSS と同じ色である理由がわかりました。また導入レッスンではドキュメントの任意の時点で CSS を変更する方法がわかりました（CSS を要素自体に割り当てたり、クラスを作成したり）。そしてここからは、スタイルを設定できるものが複数ある場合に、カスケードがどのようにして CSS ルールを適用していくかを見ていきます。</font></p>
+
+<p><font>考慮すべき 3 つ の要因がありますが、ここでは重要度の高い順にリストしています。</font><font>前にあるものは、後のものを無効にします。</font></p>
+
+<ol>
+ <li>重要性 <em>(Importance)</em></li>
+ <li>詳細度 <em>(Specificity)</em></li>
+ <li>ソースオーダー <em>(Source order)</em></li>
+</ol>
+
+<p>これらを下から順に、ブラウザーがどうやって CSS を適用しているのかを見ていきましょう。</p>
+
+<h3 id="Source_order" name="Source_order">ソースオーダー</h3>
+
+<p><font>カスケードにおいてソースオーダーがどう重要であるかは、すでに見てきました。</font><font>重みがまったく同じであるルールが複数ある場合、CSS の最後にあるルールが優先されるというものです。</font><font>後にあるものが前のものに勝ち、要素のスタイルを上書きしていく規則のようなものと考えることができます。</font></p>
+
+<h3 id="Specificity_2" name="Specificity_2">詳細度</h3>
+
+<p>ソースオーダーが重要であるということがわかりました。ある時には、より後ろにあるルールが適用されるはずなのに、競合関係にある前方のものの方が適用されるという状況に出会います。それは前方にあるルールの方が<strong>より高い詳細度</strong>を持っているためです。より具体的であり、要素をスタイリングするべきものとしてブラウザーによって選択されたのです。</p>
+
+<p>このレッスンで前述したように、クラスセレクターは要素セレクターよりも重みがあるため、クラスで定義されたプロパティは、要素指定されたプロパティをオーバーライドします。</p>
+
+<p>ここで特筆すべきは、セレクターとそれによって適用されるルールについて注目しているのですが、上書きされるのはルール全体ではなく同じプロパティのみであるということです。</p>
+
+<p>この振る舞いは CSS での反復を避けるのに役立ちます。一般的な方法としては、要素に基本スタイルを定義したあと、違いがでるようにクラスを作成することです。例えば、次のスタイルシートではレベル 2 見出し <em>(h2)</em> の基本スタイルを定義し、プロパティと値の一部のみを変更するクラスを作成しました。最初に定義された値はすべての見出しに適用され、その後、より具体的な値がクラスありのものに適用されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}}</p>
+
+<p><font>ブラウザーが詳細度を計算する方法を見てみましょう。要素セレクターの詳細度は低く、クラスで上書きできることはすでにわかったはずです。基本的に、セレクターの重みはポイント単位の値で与えられ、これらを合計して特定セレクターの重みが与えられて、他の一致するものと相対して評価することができます。</font></p>
+
+<p>セレクターが持つ詳細度の量は、4 つ の異なる値（またはコンポーネント）を使用して測定されます。これは、1,000、100、10、1 のそれぞれの位として考えることができます。</p>
+
+<ol>
+ <li><strong>「1,000」 </strong>宣言が {{htmlattrxref("style")}} 属性（別名、インラインスタイル）内にある場合、これがスコアされます。このような宣言にはセレクターがないため、その詳細度は常にシンプルに 1,000 です。</li>
+ <li><strong>「100」 </strong>全体のセレクターの内部にある ID セレクターは、これがスコアされます。</li>
+ <li><strong>「10」 </strong>全体のセレクターの内部にあるクラスセレクター・属性セレクター・擬似クラスは、これがスコアされます。</li>
+ <li><strong>「1」 </strong>全体のセレクターの内部にある要素セレクターまたは疑似要素には、これがスコアされます。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: <font><font>ユニバーサルセレクタ (</font></font><code>*</code><font><font>)、コンビネータ (</font></font><code>+</code><font><font>、</font></font><code>&gt;</code><font><font>、</font></font><code>~</code><font><font>、' ') 、及び否定擬似クラス（</font></font><code>:not</code><font><font>）は詳細度に影響を及ぼしません。</font></font></p>
+</div>
+
+<p><font><font>次の表でわかりやすいいくつかの例を示します。</font><font>これらを試してみて、なぜ詳細度が与えられるのかをしっかり理解してください。</font><font>セレクターについてはまだ詳しく説明していませんが、MDN の </font></font><a href="/ja/docs/Web/CSS/CSS_Selectors"><font><font>CSS セレクター</font></font></a><font><font>で詳細を参照することができます。</font></font></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">セレクター</th>
+   <th scope="col">1,000</th>
+   <th scope="col">100</th>
+   <th scope="col">10</th>
+   <th scope="col">1</th>
+   <th scope="col">詳細度の合計</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>h1</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1</td>
+   <td>0001</td>
+  </tr>
+  <tr>
+   <td><code>h1 + p::first-letter</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>3</td>
+   <td>0003</td>
+  </tr>
+  <tr>
+   <td><code>li &gt; a[href*="en-US"] &gt; .inline-warning</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>2</td>
+   <td>2</td>
+   <td>0022</td>
+  </tr>
+  <tr>
+   <td><code>#identifier</code></td>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0100</td>
+  </tr>
+  <tr>
+   <td>セレクターなし、要素の {{htmlattrxref("style")}} 属性にルールがある。</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1000</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>先に進む前に、実例を見てみましょう。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}}</p>
+
+<p><font>何が起こっているのでしょうか？まず、この例の最初の 7 つ のルールにのみ関心があり、お気づきのように、各ルールの前に詳細度の値をコメントしてあります。</font></p>
+
+<ul>
+ <li>最初の 2 つ のセレクターはリンクの背景色について競合しています。2番目 のセレクターには ID セレクター があるのでそれが優先され青になります。詳細度は 101 対 201 でした。</li>
+ <li><font>3番目 と 4番目 のセレクターはリンクテキストの色について競合しています。2番目 のセレクターは 1 つ は要素セレクターの代わりに</font><font>クラスセレクターが使われているため、白が適用されます。詳細度は 104 対 113 でした。</font></li>
+ <li><font>セレクター 5〜7 は、リンクホバー時の境界線について競合しています。セレクター6 は 5 に対して要素セレクターが 1 つ少ないため、詳細度 23 対 24 で負けています。一方で、セレクター7 は 5 と 6 の両方に勝っています。サブセレクターの数は 5 と同じですが、クラスセレクターの要素が使われているためです。詳細度は 24 対 23 対 33 でした。</font></li>
+</ul>
+
+<div class="note">
+<p><strong>注</strong>: <font><font>これは理解しやすくするためのざっくりとした一例に過ぎません。</font><font>実際には、セレクタータイプごとにはそれぞれレベルの詳細度があり、より低い詳細度レベルのセレクターによって上書きすることはできません。</font><font>例えば </font></font><em><font><font>100万 の</font></font></em><strong><font><font>クラス</font></font></strong><font><font>セレクターを組み合わせても、</font></font><em><font><font>1 つ の</font></font></em> <strong><font><font>ID </font></font></strong><font><font>セレクターの</font><font>ルールを上書きすることはできません</font><font>。</font></font></p>
+
+<p><font>詳細度を評価するためのより正確な方法は、詳細度を高レベルから開始し必要に応じて低レベルにしていくことです。高い方の詳細度</font><font>のセレクタースコアが同点の場合にのみ、低レベルを評価することになります。</font><font>同点でない場合、より高い詳細度レベルを上書きできないため、より低い詳細度レベルのセレクターを無視できます。</font></p>
+</div>
+
+<h3 id="!important" name="!important">!important</h3>
+
+<p><font><font>ここまで見てきた計算を無効にする特別な CSS があります。使用には十分注意してください </font></font><code>!important</code><font><font>というものです。</font></font><font><font>これは特定のプロパティと値を最も重要であると指定するもので、カスケードの通常のルールを上書きします。</font></font></p>
+
+<p>例を見てみましょう。2 つの段落があり、そのうちの 1 つ には ID がついています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}}</p>
+
+<p>何が起きているのかを見てみましょう。理解しにくい場合は、いくつかのプロパティを削除しながら、どうなるか見てみてください。</p>
+
+<ol>
+ <li><font><font>3番目のルールでは </font></font>{{cssxref("color")}} と {{cssxref("padding")}} <font><font>が適用されていますが、</font></font>{{cssxref("background-color")}} は<font><font>適用されて</font></font><font><font>いない</font><font>ことようです</font><font>。</font><font>なぜでしょうか？</font><font>ソースオーダーの後の方は、普通は前の方のルールをオーバーライドするため、その観点では 3 つ すべてが適用されるはずです。</font></font></li>
+ <li><font><font>とはいえ、クラスセレクターは要素セレクターよりも詳細度が高いため前者のルールが優先されます</font></font><font><font>。</font></font></li>
+ <li><font><font>両方の要素には </font></font><code>better</code><font><font> という </font></font>{{htmlattrxref("class")}} <font><font>が</font></font><font><font>ありますが、2番目 の</font><font>要素には </font></font><code>winning</code><font><font> という </font></font>{{htmlattrxref("id")}} もありま<font><font>す。ID はクラスよりも<strong>より高い詳細度</strong>があるため（ページ上では ID を持つ要素は一意に 1 つ しか置けないのに対し、同じクラスを持つ多くの要素がありえるため、ID セレクターの方が<strong>非常に限定的</strong>になります）、2番目の要素には赤い背景色と 1 ピクセルの黒い境界線が適用され、最初の要素についてはクラスで指定されたように灰色の背景色となり、境界線は消えます。</font></font></li>
+ <li><font><font>2番目 の要素は赤い背景が適用されていま</font></font><font><font>すが</font><font>、あるはずの境界線はありません</font><font>。</font><font>なぜでしょうか？ </font></font><font><font>2番目 のルールでは </font></font><code>border: none</code><font><font> のあとに </font></font><code>!important</code><font><font> と宣言されており、高い詳細度であるはずの ID よりも重要なものとして扱われているためです。</font></font></li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: <font><font>この </font></font><code>!important</code><font><font> 宣言をオーバーライドする唯一の方法</font><font>は、ソースオーダーの後半で同じ詳細度を持つように</font><em><font> </font></em></font><code>!important</code><font><font> 宣言するか</font><font>、またはより高い詳細度を持つ</font><font>宣言に</font><font>含める</font><font>ことです。</font></font></p>
+</div>
+
+<p><code>!important</code><font><font> を知っていると便利です。他人のコードでも見かけることがあるからです。</font></font><strong><font><font>ただし絶対に必要な場合を除きあまり使用しないことを強くお勧めします。</font></font></strong> <code>!important</code><font><font> はカスケードの普通の挙動とは異なってしまうため、特に大きなスタイルシートで CSS に関わるデバッグが非常に困難になるためです。</font></font></p>
+
+<p><font>使用しなければならない状況の 1 つ としては、コアにある CSS モジュールを編集できない CMS で作業している等で、他の方法では難しい場合にスタイルを実際にオーバーライドしたい場合等があります。</font><font>でも本当に、回避できる場合は使用しないでください。</font></p>
+
+<h2 id="The_effect_of_CSS_location" name="The_effect_of_CSS_location">CSS ロケーションの効果</h2>
+
+<p>最後に、CSS 宣言の重要性は指定されたスタイルシートに依存することにも注意してください。ユーザーは、カスタムスタイルシートを設定して、開発者のスタイルをオーバーライドできます。例えば、視覚障害を持っているユーザーが閲覧するすべてのウェブページのフォントサイズを通常の 2倍 に設定して読みやすくするといったこともあります。</p>
+
+<h2 id="To_summarize" name="To_summarize">要約</h2>
+
+<p>競合する宣言は次の順序で適用され、後の方がそれより前のものを上書きします。</p>
+
+<ol>
+ <li>ユーザーエージェントのスタイルシートの宣言。例えば、他のスタイルが設定されていない場合に使用されるブラウザー標準のスタイルなど。</li>
+ <li>ユーザースタイルシートの通常の宣言 (ユーザーが設定したカスタムスタイル)</li>
+ <li>作者のスタイルシートでの通常の宣言 (私たちウェブ開発者によって設定されたスタイルのことです)</li>
+ <li>作者のスタイルシートの重要 <em>(important)</em> な宣言</li>
+ <li>ユーザーのスタイルシートの重要 <em>(important)</em> な宣言</li>
+</ol>
+
+<p><font><font>ウェブ開発者のスタイルシートがユーザー</font></font>の<font><font>それを上書きするのは理にかなっているので設計を意図どおりに保つことができますが、前述したとおり、ユーザーがウェブ開発者スタイルをオーバーライドする正当な理由がある場合もあります。それは </font></font><code>!important</code><font><font> ルールを使用する</font><font>ことで実現でき</font><font>ます。</font></font></p>
+
+<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2>
+
+<p>この記事で多くを網羅しましたが、最も重要な情報を覚えていますか？次に移る前に、この情報を保持しているかを検証するテストがあります — <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks">Test your skills: the Cascade</a>を見てください。</p>
+
+<h2 id="Whats_next" name="Whats_next">次のステップ</h2>
+
+<p>この記事の大部分を理解したのなら、よいでしょう。CSS の基本的な仕組みに慣れてきたということです。次に、セレクターについて詳しく見ていきます。</p>
+
+<p>カスケード・詳細度・継承を完全に理解していなくても心配する必要はありません。このコースでこれまで取り上げてきたなかで、間違いなく最も複雑なことであり、プロのウェブ開発者でさえもたまに扱いにくく感じるものです。このコースを続行していくなかで、この記事にときどき戻り、それについて考え続けることをお勧めします。</p>
+
+<p>スタイルが期待どおりに適用されないという奇妙な問題に出くわした場合は、この記事を参照してください。詳細度の問題である可能性があります。</p>
+
+<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/debugging_css/index.html b/files/ja/learn/css/building_blocks/debugging_css/index.html
new file mode 100644
index 0000000000..77abbd982c
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/debugging_css/index.html
@@ -0,0 +1,206 @@
+---
+title: CSS のデバッグ
+slug: Learn/CSS/Building_blocks/Debugging_CSS
+tags:
+  - Beginner
+  - CSS
+  - DOM
+  - Debugging
+  - DevTools
+  - Learn
+  - source
+translation_of: Learn/CSS/Building_blocks/Debugging_CSS
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div>
+
+<p>CSS を書くとき、期待どおりに動作していないように見える問題が発生する場合があります。セレクターは合っているはずなのに何も起こらなかったり、ボックスのサイズが期待したどおりにならなかったりなどです。この記事では CSS の問題をデバッグする方法について案内し、何が起こっているかを調べるのに各モダンブラウザーのデベロッパーツールはどう役立つかを示します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>ブラウザーの開発ツールの基本と、 CSS の簡単な検査と編集の方法を学ぶ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="How_to_access_browser_DevTools" name="How_to_access_browser_DevTools">ブラウザーの開発ツールの使い方</h2>
+
+<p>「<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発者ツールとは」</a>という記事は、さまざまなブラウザーやプラットフォームでツールにアクセスする方法を説明する最新のガイドです。ほとんどの場合、特定のブラウザで開発することを選択し、そのブラウザに含まれるツールに最も慣れ親しむことになるかもしれませんが、他のブラウザでのアクセス方法を知っておく価値はあります。これは、複数のブラウザ間で異なるレンダリングが表示されている場合に役立ちます。</p>
+
+<p>また、DevToolsを作成するときに、ブラウザーがさまざまな領域に焦点を合わせていることもわかります。例えば、Firefoxには、CSSレイアウトを視覚的に操作するための優れたツールがいくつかあり、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">グリッドレイアウト</a>、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">フレックスボックス</a>、および<a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">シェイプ</a>を検査および編集できます。ただし、ページ上の要素に適用されているプロパティや値を検査したり、エディタから変更を加えたりするためのツールなど、基本的なツールはすべての異なるブラウザに共通しています。</p>
+
+<p>このレッスンでは、CSSを操作するためのFirefox DevToolsの便利な機能をいくつか見ていきます。そのために<a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">、サンプルファイル</a>を使用します。続けたい場合は、新しいタブでこれを読み込み、上のリンク先の記事で説明したようにDevToolsを開きます。</p>
+
+<h2 id="The_DOM_versus_view_source" name="The_DOM_versus_view_source">DOM とソース表示の違い</h2>
+
+<p>DevTools を初めて使用する人が困るのは、Web ページの<a href="https://wiki.developer.mozilla.org/ja/docs/Tools/View_source">ソースを表示</a>したとき、またはサーバーに配置した HTML ファイルを見たときに表示されるものと、DevTools の <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML ペイン</a>に表示されるものが異なることです。「ソースの表示」で表示されるものとほぼ同じように見えますが、いくつかの違いがあります。</p>
+
+<p>レンダリングされた DOM では、ブラウザはあなたのために書き方の悪い HTML を修正しているかもしれません。例えば <code>&lt;h2&gt;</code> を開いて <code>&lt;h3&gt;</code> で閉じるといったように、要素を誤って閉じてしまった場合、ブラウザはあなたが何をしようとしていたのかを理解し、DOM の HTML は開いていた <code>&lt;h2&gt;</code> を正しく <code>&lt;h2&gt;</code> で閉じるようになります。ブラウザはすべての HTML を正規化し、DOM は JavaScript によって行われた変更も表示します。</p>
+
+<p>これと比較して、ソースの表示は、サーバーに保存されている HTML ソース コードにすぎません。DevTools の <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML ツリー</a>には、ブラウザが任意の時点でレンダリングしている内容が正確に表示されるため、実際に何が起こっているのかを知ることができます。</p>
+
+<h2 id="Inspecting_the_applied_CSS" name="Inspecting_the_applied_CSS">適用された CSS の調査</h2>
+
+<p>ページ上の要素を選択するには、右クリックまたは Ctrl キーを押しながらクリックして [検査] を選択するか、または DevTools ディスプレイの左側にある HTML ツリーから選択します。<code>box1</code> のクラスを持つ要素を選択してみてください。これは、ページ上の最初の要素で、周囲に枠線で囲まれたボックスが描かれています。</p>
+
+<p><img alt="DevToolsを開いたこのチュートリアルのサンプルページ。" src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p>
+
+<p>HTMLの右側にある<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a>を見ると、その要素に適用されているCSSのプロパティと値を見ることができるはずです。box1 クラスに直接適用されているルールと、box の先祖から継承されている CSS、この場合は &lt;body&gt; に適用されている CSS が表示されています。これは、予想していなかったCSSが適用されている場合に便利です。おそらくそれは親要素から継承されているもので、この要素のコンテキストでそれを上書きするルールを追加する必要があるでしょう。</p>
+
+<p>また、速記プロパティを展開する機能も便利です。この例では、<code>margin</code> の短縮形を使用しています。</p>
+
+<p><strong>小さな矢印をクリックしてビューを展開すると、さまざまなロングハンドプロパティとその値が表示されます。</strong></p>
+
+<p><strong>パネルがアクティブになっているときは、ルールビューの値のオンオフを切り替えることができます。マウスをかざすとチェックボックスが表示されます。<code>border-radius</code> などのルールのチェックボックスのチェックを外すと、CSS は適用されなくなります。</strong></p>
+
+<p>これを使って A / B 比較を行い、ルールを適用した方が良く見えるかどうかを判断したり、デバッグの手助けをしたりすることができます。例えば、レイアウトがおかしくなり、どのプロパティが問題の原因になっているのかを調べたい場合などです。</p>
+
+<h2 id="Editing_values" name="Editing_values">値の変更</h2>
+
+<p>プロパティのオン/オフに加えて、それらの値を編集できます。おそらく、別の色の方が見栄えが良いかどうかを確認したい、または何かのサイズを微調整したいですか。 DevToolsを使用すると、スタイルシートを編集してページを再ロードする時間を大幅に節約できます。</p>
+
+<p><strong><code>box1</code> を選択した状態で、境界線に適用された色を示すスウォッチ (小さな色付きの円) をクリックします。カラーピッカーが開き、いくつかの異なる色を試すことができます。同様の方法で、ボーダーの幅やスタイルを変更することができます。</strong></p>
+
+<p><img alt="カラーピッカーを開いたDevToolsスタイルパネル。" src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p>
+
+<h2 id="Adding_a_new_property" name="Adding_a_new_property">新しいプロパティの追加</h2>
+
+<p>DevToolsを使ってプロパティを追加することができます。おそらく、<code>&lt;body&gt;</code> 要素のフォント サイズを継承せず、ボックスに独自のサイズを設定したいことに気がついたのではないでしょうか？これは、CSS ファイルに追加する前に DevTools で試すことができます。</p>
+
+<p><strong>ルールの閉じ中括弧をクリックすると、ルールへの新しい宣言の入力が開始され、その時点で新しいプロパティの入力を開始することができます。<code>font-size</code> を選択したら、試したい値を入力します。また、[+] ボタンをクリックして同じセレクタで追加ルールを追加し、そこに新しいルールを追加することもできます。</strong></p>
+
+<p><img alt="DevToolsパネル、新しいプロパティをルールに追加し、フォントのオートコンプリートを開く" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>：ルールビューには他にも便利な機能があります。<strong>たとえば</strong>、無効な値の宣言には<strong>取り消し線が引か</strong>れています。詳しくは<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">、CSSの確認と編集を</a>ご覧ください。</p>
+</div>
+
+<h2 id="Understanding_the_box_model" name="Understanding_the_box_model">ボックスモデルについて</h2>
+
+<p>前のレッスンでは<a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">、ボックスモデル</a>について説明しまし<a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">た</a>。また、指定したサイズに基づいて要素のサイズの計算方法を変更する代替のボックスモデルと、パディングおよび境界線があることを説明しました。DevToolsは、要素のサイズの計算方法を理解するのに役立ちます。</p>
+
+<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Layout_view">レイアウトビュー</a>では、選択した要素上のボックス・モデルのダイアグラムと、要素のレイアウト方法を変更するプロパティと値の説明が表示されます。これには、要素で明示的に使用していないが初期値が設定されているプロパティの説明も含まれます。</p>
+
+<p>このパネルでは、詳細なプロパティの 1 つに <code>box-sizing</code> プロパティがあり、これは要素が使用するボックスモデルを制御します。</p>
+
+<p><code>box1</code> と <code>box2</code> のクラスを持つ 2 つのボックスを比較してみましょう。どちらも同じ幅 (400px) が適用されていますが、<code>box1</code> の方が視覚的には広くなっています。レイアウトパネルを見ると、<code>content-box</code> を使用していることがわかります。これは、要素に与えたサイズを受け取り、パディングとボーダーの幅を追加する値です。</p>
+
+<p><code>box2</code> のクラスを持つ要素は <code>border-box</code> を使用しているので、ここでは要素に与えたサイズからパディングとボーダーが差し引かれています。つまり、ページ上でボックスが占めるスペースは、あなたが指定したサイズ（この例では <code>width: 400px</code>）と同じになります。</p>
+
+<p><img alt="DevToolsのレイアウトセクション" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>：詳細については<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">、ボックスモデルの調査と検査を</a>ご覧ください。</p>
+</div>
+
+<h2 id="Solving_specificity_issues" name="Solving_specificity_issues">詳細度に関する問題の解決</h2>
+
+<p>開発中に、特に既存のサイトのCSSを編集する必要があるときに、いくつかのCSSを適用させるのに苦労することがあります。何をしても要素がCSSを適用してくれないのです。このような場合、一般的には、より具体的なセレクタが変更を上書きしていることが考えられますが、ここではDevToolsを使用することで解決することができます。</p>
+
+<p>この例のファイルでは、<code>&lt;em&gt;</code> 要素に包まれた2つの単語があります。1つはオレンジ色で、もう1つはホットピンク色で表示されています。CSSでは、以下のようにしています。</p>
+
+<pre class="brush: css notranslate">em {
+  color: hotpink;
+  font-weight: bold;
+}</pre>
+
+<p>しかし、スタイルシートの上には <code>.special</code> セレクタ―を持つルールがあります。</p>
+
+<pre class="brush: css notranslate">.special {
+  color: orange;
+}</pre>
+
+<p><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a>のレッスンで特異性について説明したことを思い出していただけると思いますが、クラス セレクタは要素セレクタよりも特異性が高いため、この値が適用されます。特に情報が巨大なスタイルシートのどこかに埋もれている場合は、DevToolsを使用することで、このような問題を見つけることができます。</p>
+
+<p><code>.special</code> のクラスを持つ <code>&lt;em&gt;</code> を検査すると、DevToolsがオレンジ色が適用されていることを示し、また、emに適用されている <code>color</code> プロパティが取り消されていることを示しています。これで、クラスが要素セレクタをオーバーライドしていることがわかります。</p>
+
+<p><img alt="emを選択し、DevToolsを見て、何が色を上書きしているかを確認します。" src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p>
+
+<h2 id="Find_out_more_about_the_Firefox_DevTools" name="Find_out_more_about_the_Firefox_DevTools">Firefoxの開発ツールについて</h2>
+
+<p>MDNには、Firefox DevToolsに関する多くの情報があります。<a href="/ja/docs/Tools">DevTools</a>のメイン<a href="/ja/docs/Tools">セクションを</a>ご覧ください<a href="/ja/docs/Tools/Page_Inspector#How_to">。</a>このレッスンで簡単に説明した内容の詳細については、<a href="/ja/docs/Tools/Page_Inspector#How_to">ハウツーガイドを</a>ご覧ください。</p>
+
+<h2 id="Debugging_problems_in_CSS" name="Debugging_problems_in_CSS">CSS 不具合のデバッグ</h2>
+
+<p>CSSの問題を解決する場合、DevToolsは非常に役立ちます。CSSが期待どおりに動作しない状況に陥った場合、どのように解決すればよいでしょうか。次の手順が役立ちます。</p>
+
+<h3 id="Take_a_step_back_from_the_problem" name="Take_a_step_back_from_the_problem">問題から一歩離れてみる</h3>
+
+<p>コーディングの問題はどんなものでもイライラすることがありますが、特に CSS の問題は、解決策を見つけるのに役立つようなエラーメッセージをオンラインで検索しても出てこないことが多いので、イライラします。イライラしてきたら、しばらく問題から離れてみましょう。散歩に行ったり、飲み物を飲んだり、同僚とおしゃべりしたり、しばらく他のことに取り組んでみましょう。問題を考えるのをやめれば、魔法のように解決策が現れることもありますし、そうでなくても、スッキリした気分の時に取り組むと、ずっと楽になります。</p>
+
+<h3 id="Do_you_have_valid_HTML_and_CSS" name="Do_you_have_valid_HTML_and_CSS">HTML と CSS が正しく記述されていますか？</h3>
+
+<p>ブラウザーはCSSとHTMLが正しく記述されていることを期待しますが、ブラウザーは非常に寛容であり、マークアップまたはスタイルシートにエラーがある場合でも、最善を尽くしてWebページを表示します。コードに誤りがある場合、ブラウザはあなたが何を意味するのかを推測する必要があり、それはあなたが考えていたものとは異なる決定をするかもしれません。さらに、2つの異なるブラウザーが2つの異なる方法で問題に対処する場合があります。したがって、適切な最初のステップは、HTMLおよびCSSをバリデーターで実行し、エラーを見つけて修正することです。</p>
+
+<ul>
+ <li><a href="https://jigsaw.w3.org/css-validator/">CSSバリデーター</a></li>
+ <li><a href="https://validator.w3.org/">HTMLバリデーター</a></li>
+</ul>
+
+<h3 id="Is_the_property_and_value_supported_by_the_browser_you_are_testing_in" name="Is_the_property_and_value_supported_by_the_browser_you_are_testing_in">プロパティと値は対象ブラウザーでサポートされていますか？</h3>
+
+<p>ブラウザは、理解できないCSSを単に無視します。使用しているプロパティまたは値が、テストしているブラウザーでサポートされていない場合、何も壊れませんが、そのCSSは適用されません。DevToolsは一般的に、サポートされていないプロパティと値を何らかの方法で強調表示します。下のスクリーンショットでは、ブラウザは {{cssxref("grid-template-columns")}} のサブグリッド値をサポートしていません。</p>
+
+<p><img alt="grid-template-columns：サブグリッド値がサポートされていないため、サブグリッドに線を引いたブラウザDevToolsの画像。" src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p>
+
+<p>また、MDNの各プロパティページの下部にあるブラウザの互換性の表を見ることもできます。これらの表は、そのプロパティのブラウザのサポート状況を示しており、そのプロパティの一部の使用法がサポートされていて、他の使用法がサポートされていない場合は分類されていることが多いです。以下の表は {{cssxref("shape-outside")}} プロパティの互換性データを示しています。</p>
+
+<p>{{compat("css.shape-outside")}}</p>
+
+<h3 id="Is_something_else_overriding_your_CSS" name="Is_something_else_overriding_your_CSS">どこかで CSS が上書きされていませんか？</h3>
+
+<p>ここで、特異性について学んだ情報が非常に役に立つでしょう。自分が行おうとしていることをより具体的にオーバーライドしているものがある場合、何が何だかわからないという非常にイライラするゲームに突入してしまうことがあります。しかし、上記のように、DevTools を使用すると、どのような CSS が適用されているかが表示されるので、新しいセレクタをオーバーライドするのに十分なほど具体的なものにする方法を見つけることができます。</p>
+
+<h3 id="Make_a_reduced_test_case_of_the_problem" name="Make_a_reduced_test_case_of_the_problem">問題の縮小テストケースを作成する</h3>
+
+<p>上記の手順で問題が解決されない場合は、もう少し調査する必要があります。この時点での最善の方法は、縮小テストケースとして知られているものを作成することです。問題を減らす」ことができるということは、非常に有用なスキルです。自分のコードや同僚のコードの問題を見つけるのに役立ちますし、バグを報告したり、より効果的に助けを求めたりすることができるようになります。</p>
+
+<p>縮小テストケースとは、関連のない周囲のコンテンツやスタイリングを削除して、可能な限りシンプルな方法で問題を示すコード例のことです。これは、問題のあるコードをレイアウトから取り出して、そのコードや機能だけを示す小さな例を作ることを意味することが多いでしょう。</p>
+
+<p>縮小されたテストケースを作成するには：</p>
+
+<ol>
+ <li>マークアップが動的に生成される場合—例えば、CMSを介して—問題を示す出力の静的バージョンを作成します。<a href="https://codepen.io/">CodePen</a>などのコード共有サイトは、オンラインでアクセスでき、同僚と簡単に共有できるため、テストケースを減らすのに役立ちます。まず、ページで[ソースの表示]を実行し、HTMLをCodePenにコピーしてから、関連するCSSとJavaScriptを取得して、それも含めます。その後、問題がまだ明らかかどうかを確認できます。</li>
+ <li>JavaScriptを削除しても問題が解決しない場合は、JavaScriptを含めないでください。JavaScriptを削除<em>し</em>ても問題が解決しない場合は、できるだけ多くのJavaScriptを削除して、問題の原因はすべて残してください。</li>
+ <li>問題の原因となっていないHTMLを削除します。コンポーネントまたはレイアウトの主要な要素を削除します。繰り返しになりますが、まだ問題を示している最小限のコードになるようにしてください。</li>
+ <li>問題に影響を与えないCSSをすべて削除します。</li>
+</ol>
+
+<p>その過程で、何が問題を引き起こしているのかを発見したり、特定の何かを取り除くことで、 <span>少なくとも問題のオン/オフを切り替えることができ</span>るようになるかもしれません。あなたが物事を発見したときに、あなたのコードにいくつかのコメントを追加する価値はあります。助けを求める必要がある場合は、それがあなたがすでに試したものを助けてくれる人に伝えてくれます。<span>これにより、考えられる問題や回避策を検索するのに十分な情報が得られる場合があります。</span></p>
+
+<p>問題を解決するのにまだ苦労している場合は、テストケースを減らすことで、フォーラムに投稿したり、同僚に見せたりして、助けを求めることができます。助けを求める前に、問題を軽減し、どこで問題が発生しているかを正確に特定する作業を行ったことを示すことができれば、助けを得る可能性が高くなります。経験豊富な開発者であれば、問題を迅速に発見して正しい方向に導くことができるかもしれませんが、そうでない場合でも、テストケースを縮小したことで、開発者はすばやく確認することができ、少なくとも何らかの助けを提供できるようになるでしょう。</p>
+
+<p>問題が実際にブラウザーのバグである場合、テストケースの縮小を使用して、関連するブラウザーベンダーにバグレポートを提出することもできます（例：Mozillaの<a href="https://bugzilla.mozilla.org">bugzillaサイト</a>）。</p>
+
+<p>CSS を使いこなせるようになると、問題を発見するのが早くなることに気づくでしょう。しかし、最も経験豊富な人でも、「一体何が起こっているのか」と疑問に思うことがあります。体系的なアプローチをとり、テストケースを減らし、他の人に問題を説明すると、通常、修正が見つかります。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">共役</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html
new file mode 100644
index 0000000000..d3a5c98298
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html
@@ -0,0 +1,153 @@
+---
+title: テキスト方向の操作
+slug: Learn/CSS/Building_blocks/Handling_different_text_directions
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - logical properties
+  - writing modes
+translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div>
+
+<p>CSSの学習でこれまでに遭遇したプロパティと値の多くは、画面の物理的な大きさに関係しています。たとえば、ボックスの上下左右にborderを作成します。これらの物理的大きさは、水平に表示されるコンテンツに非常にきちんとマッピングされ、デフォルトでは、ウェブは右から左への言語（アラビア語など）よりも左から右への言語（英語やフランス語など）をサポートする傾向があります。</p>
+
+<p>しかし近年、CSSは、右から左へのコンテンツや上から下へのコンテンツ（日本語など）を含むコンテンツのさまざまな方向性をより適切にサポートするために進化しました。これらのさまざまな方向性は<strong>書き込みモード</strong>と呼ばれます。学習を進めてレイアウトの操作を開始すると、書き込みモードを理解することが非常に役立ちます。そのため、これらのモードを紹介します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>最新の CSS の "writing modes" の重要性を理解する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_are_writing_modes" name="What_are_writing_modes">書き込みモードとは？</h2>
+
+<p>CSSの書き込みモードは、テキストが水平方向または垂直方向のどちらで実行されているかを示します。{{cssxref("writing-mode")}} プロパティにより、ある書き込みモードから別の書き込みモードに切り替えることができます。これを行うために縦書きモードを使用する言語で作業する必要はありません。また、創造的な目的のためにレイアウトの一部の書き込みモードを変更することもできます。<br>
+ <br>
+ 次の例では、<code>writing-mode: vertical-rl</code>を使用して見出しを表示しています。これで、テキストが垂直方向に実行されます。縦書きテキストはグラフィックデザインでは一般的であり、Webデザインにより興味深い外観を追加する方法になります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p>
+
+<p><code><a href="/ja/docs/Web/CSS/writing-mode">writing-mode</a></code> プロパティの3つの可能な値は次のとおりです:</p>
+
+<ul>
+ <li><code>horizontal-tb</code>: 上から下へのブロックの流れの方向。文は水平に実行されます。</li>
+ <li><code>vertical-rl</code>: 右から左へのブロックの流れの方向。文は垂直に実行されます。</li>
+ <li><code>vertical-lr</code>: 左から右へのブロックの流れの方向。文は垂直に実行されます。</li>
+</ul>
+
+<p>したがって、<code>writing-mode</code>プロパティは、実際には、ページにブロックレベルの要素が表示される方向（上から下、右から左、または左から右）を設定します。これにより、文章内のテキストの流れが決まります。</p>
+
+<h2 id="Writing_modes_and_block_and_inline_layout" name="Writing_modes_and_block_and_inline_layout">"writing modes" と ブロックレイアウトとインラインレイアウト</h2>
+
+<p><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/The_box_model">ブロックとインラインのレイアウト</a>、およびいくつかの要素がブロック要素として表示され、他の要素がインライン要素として表示されるという事実についてはすでに説明しました。上で説明したように、ブロックとインラインは、物理的な画面ではなく、ドキュメントの書き込みモードに関連付けられています。英語などのテキストを水平方向に表示する書き込みモードを使用している場合、ブロックはページの上から下にのみ表示されます。</p>
+
+<p>例を見れば、これはより明確になります。この次の例では、見出しと段落を含む2つのボックスがあります。 1つ目は、<code>writing-mode: horizo​​ntal-tb</code>を使用します。これは、水平にページの上部から下部に向かって書き込まれる書き込みモードです。 2番目は<code>writing-mode: vertical-rl</code>を使用します;これは、垂直に右から左に書き込まれる書き込みモードです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p>
+
+<p>書き込みモードを切り替えると、ブロックの方向とインラインの方向が変更されます。 <code>horizontal-tb</code>書き込みモードでは、ブロックの方向は上から下に向かっています。 <code>vertical-rl</code>書き込みモードでは、ブロックの方向は右から左に水平に実行されます。したがって、<strong>block dimension</strong> は常に、使用中の書き込みモードでページにブロックが表示される方向です。 <strong>inline dimension</strong>は、常に文が流れる方向です。</p>
+
+<p>この図は、横書きモードでの2つのdimensionsを示しています。<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png" style="height: 353px; width: 634px;"></p>
+
+<p>この図は、縦書きモードの2つのdimensionsを示しています。</p>
+
+<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p>
+
+<p>CSSレイアウト、特に新しいレイアウトメソッドを検討し始めると、このブロックとインラインの考え方が非常に重要になります。後で再検討します。</p>
+
+<h3 id="Direction" name="Direction">方向</h3>
+
+<p>書き込みモードに加えて、テキストの方向もあります。上記のように、アラビア語などの一部の言語は水平に書かれていますが、右から左に書かれています。これは、創造的な意味で使用する可能性のあるものではありません。単に右側に何かを並べたい場合は、他の方法もありますが、CSSの性質の一部としてこれを理解することが重要です。 Webは、左から右に表示される言語専用ではありません！<br>
+ <br>
+ 書き込みモードとテキストの方向が変更される可能性があるため、新しいCSSレイアウトメソッドは、左右、上下を参照しません。代わりに、インラインとブロックのこのアイデアとともに、開始と終了について話します。心配する必要はありませんが、レイアウトを見始めるときにはこれらのアイデアに留意してください。 CSSを理解する上で非常に役立ちます。</p>
+
+<h2 id="Logical_properties_and_values" name="Logical_properties_and_values">論理プロパティと値</h2>
+
+<p>ただし、学習のこの時点で書き込みモードと方向を記述することについて説明する理由は、私たちはすでに、画面の物理的な大きさに関連付けられた多くのプロパティを見ており、横書きモードのときに最も意味があるという事実のためです</p>
+
+<p>2つのボックスをもう一度見てみましょう。1つは <code>horizontal-tb</code> の書き込みモード、もう1つは <code>vertical-rl</code>です。これらの両方のボックスに {{cssxref("width")}} を指定しました。ボックスが縦書きモードでも width があるため、テキストがオーバーフローすることがわかります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p>
+
+<p>このシナリオで本当に必要なのは、書き込みモードに合わせて基本的にheightとwidthを入れ替えることです。縦書きモードのときは、横書きモードの場合と同じように、ボックスをブロックのディメンションで拡大したいです。<br>
+ <br>
+ これを簡単にするために、CSSは最近マッピングされたプロパティのセットを開発しました。これらは本質的に、物理的なプロパティ（<code>width</code> や <code>height</code> など）を<strong>論理的な</strong>、または<strong>フローに関連する</strong>バージョンに置き換えます。<br>
+ <br>
+ 横書きモードで<code>width</code>にマップされるプロパティは{{cssxref("inline-size")}} と呼ばれます。これはインラインディメンションのサイズを参照します。<code>height</code>のプロパティの名前は{{cssxref("block-size")}} で、ブロックディメンションのサイズです。<code>width</code>を<code>inline-size</code>に置き換えた以下の例で、これがどのように機能するかを見ることができます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p>
+
+<h3 id="Logical_margin_border_and_padding_properties" name="Logical_margin_border_and_padding_properties">論理マージン、ボーダー、パディングのプロパティ</h3>
+
+<p>最後の2つのレッスンでは、CSSのボックスモデルとCSSのボーダーについて学びました。マージン、ボーダー、およびパディングのプロパティには{{cssxref("margin-top")}}, {{cssxref("padding-left")}}, および {{cssxref("border-bottom")}} があります。widthとheightのマッピングと同じ方法で、これらのプロパティのマッピングがあります。<br>
+ <br>
+ <code>margin-top</code>プロパティは{{cssxref("margin-block-start")}}にマップされます—これは常にブロックディメンションの先頭のマージンを参照します。<br>
+ <br>
+  {{cssxref("padding-left")}}プロパティは、インライン方向の開始に適用されるパディングである{{cssxref("padding-inline-start")}}にマップされます。これは、その書き込みモードで文章が始まる場所です。 {{cssxref("border-bottom")}} プロパティは、{{cssxref("border-block-end")}}にマップされます。これは、ブロックディメンションの最後のボーダーです。<br>
+ <br>
+ 以下の物理的特性と論理的特性の比較を見ることができます。<br>
+ <br>
+ <strong><code>.box</code>の<code>writing-mode</code>プロパティを<code>vertical-rl</code>に切り替えてボックスの書き込みモードを変更すると、物理プロパティが物理方向にどのように関連付けられているかがわかりますが、論理プロパティは書き込みモードで切り替わります。<br>
+ <br>
+ また、 {{htmlelement("h2")}} には黒い <code>border-bottom</code>があることがわかります。両方のライティングモードで、下の境界線が常にテキストの下に来るようにする方法を見つけられますか？</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p>
+
+<p>個々のボーダーロングハンドをすべて考慮すると、膨大な数のプロパティがあり、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Logical_Properties">論理プロパティと値</a>のMDNページですべてのマッピングプロパティを確認できます。</p>
+
+<h3 id="Logical_values" name="Logical_values">論理値</h3>
+
+<p>これまで、論理プロパティ名について見てきました。また、<code>top</code>, <code>right</code>, <code>bottom</code>, および <code>left</code>の物理値をとるプロパティもあります。これらの値には、論理値（<code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, および <code>inline-start</code>）へのマッピングもあります。<br>
+ <br>
+ たとえば、画像を左にフロートさせて、画像の周りにテキストを折り返すことができます。以下の例に示すように、<code>left</code>を<code>inline-start</code>に置き換えることができます。<br>
+ <br>
+ <strong>この例の書き込みモードを<code>vertical-rl</code>に変更して、画像がどうなるかを確認します。 <code>inline-start</code>を<code>inline-end</code>に変更して、フロートを変更します。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p>
+
+<p>ここでは、書き込みモードが何であってもマージンが正しい場所にあることを保証するために、論理マージン値も使用しています。</p>
+
+<h3 id="Should_you_use_physical_or_logical_properties" name="Should_you_use_physical_or_logical_properties">物理的または論理的なプロパティを使うべきか？</h3>
+
+<p>論理的なプロパティと値は、物理的に同等のものよりも新しいため、ブラウザにはごく最近実装されました。 MDNの任意のプロパティページをチェックして、ブラウザーサポートがどの程度前にサポートしているかを確認できます。複数の書き込みモードを使用していない場合は、現時点では物理バージョンを使用することをお勧めします。ただし、フレックスボックスやグリッドなどのレイアウトメソッドの処理を開始すると、多くの人が理にかなっているため、最終的にはほとんどの場合、人々は論理バージョンに移行することを期待しています。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>このレッスンで説明する概念は、CSSでますます重要になっています。ブロックとインラインの方向、および書き込みモードの変更に伴うテキストフローの変化を理解することは、今後非常に役立ちます。水平モード以外の書き込みモードを使用しない場合でも、CSSを理解するのに役立ちます。<br>
+ <br>
+ 次のモジュールでは、CSSのオーバーフローについて詳しく見ていきます。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/images_media_form_elements/index.html b/files/ja/learn/css/building_blocks/images_media_form_elements/index.html
new file mode 100644
index 0000000000..f21577f7d5
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/images_media_form_elements/index.html
@@ -0,0 +1,201 @@
+---
+title: 画像・メディア・フォーム要素
+slug: Learn/CSS/Building_blocks/Images_media_form_elements
+tags:
+  - Beginner
+  - CSS
+  - Forms
+  - Images
+  - Learn
+  - Media
+  - replaced content
+translation_of: Learn/CSS/Building_blocks/Images_media_form_elements
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div>
+
+<p>このレッスンでは、特定の要素が CSS でどのように扱われるかを見ていきます。画像・メディア・フォーム要素では、CSS でスタイルを設定するにあたって通常のボックスとは少し異なる動作をします。何が可能で何が不可能かを理解することで、フラストレーションを軽減することができます。このレッスンでは、知っておくべきことのをいくつかを取り上げます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>CSS でスタイルを設定したときに一部の要素が異常に動作することを理解する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Replaced_elements" name="Replaced_elements">置換要素</h2>
+
+<p>画像とビデオは、<strong><a href="/ja/docs/Web/CSS/Replaced_element">置き換えられた要素</a></strong>として説明されています。これは、CSSがこれらの要素の内部レイアウトに影響を与えることはできず、他の要素の中でのページ上の位置のみに影響を与えることを意味します。ただし、後で説明するように、CSSが画像に対して様々なことができます。</p>
+
+<p>画像や動画などの特定の置換された要素は、アスペクト比を持つものとしても記述されています。これは、水平方向 (x) と垂直方向 (y) の両方の寸法を持ち、デフォルトではファイルの本質的な寸法を使って表示されることを意味します。</p>
+
+<h2 id="Sizing_images" name="Sizing_images">画像サイズ</h2>
+
+<p>これらのレッスンを受けてすでにお分かりのように、CSSではすべてのものがボックスを生成します。画像ファイルの固有の寸法よりも小さいか大きいサイズの画像をボックス内に配置すると、ボックスよりも小さく表示されるか、ボックスをオーバーフローさせてしまいます。オーバーフローで何が起こるかについて決定を下す必要があります。</p>
+
+<p>以下の例では、2つのボックスがあり、どちらもサイズは200ピクセルです。</p>
+
+<ul>
+ <li>1つは200ピクセル未満の画像を含んでいます。これはボックスよりも小さく、それを埋めるために引き伸ばしません。</li>
+ <li>もう1つは200ピクセルより大きく、ボックスをオーバーフローします。</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p>
+
+<p>では、オーバーフローの問題について何ができるでしょうか？</p>
+
+<p><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">前のレッスン</a>で学んだように、一般的な手法は、画像の {{cssxref("max-width")}} を100％にすることです。これにより、画像のサイズはボックスよりも小さくなりますが、大きくはなりません。この手法は、<code><a href="/ja/docs/Web/HTML/Element/video">&lt;video&gt;</a></code>や <code><a href="/ja/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code> などの他の置換された要素でも機能します。</p>
+
+<p><strong>上記の例 <code>max-width: 100%</code> の <code>&lt;img&gt;</code> 要素に追加してみてください。小さい画像は変更されないままですが、大きい画像はボックスに収まるように小さくなります。</strong></p>
+
+<p>コンテナー内のイメージについて他の選択を行うことができます。例えば、ボックスを完全に覆うように画像のサイズを変更したい場合があります。</p>
+
+<p>ここでは、{{cssxref("object-fit")}} プロパティが役立ちます。<code>object-fit</code> 置き換えられた要素を使用する場合、さまざまな方法でボックスに合うようにサイズを変更できます。</p>
+
+<p>以下では、値 <code>cover</code> を使用して画像を縮小し、アスペクト比を維持してボックスをきれいに埋めます。アスペクト比が維持されているため、画像の一部がボックスでトリミングされます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p>
+
+<p><code>contain</code> を値として使用する場合、ボックス内に収まるほど小さくなるまで画像が縮小されます。これは、ボックスと同じアスペクト比ではない場合、「レターボックス」になります。</p>
+
+<p><code>fill</code> を試すこともできます 。これは、ボックスを塗りつぶしますが、アスペクト比を維持しません。</p>
+
+<h2 id="Replaced_elements_in_layout" name="Replaced_elements_in_layout">レイアウト内の置換要素</h2>
+
+<p>置換された要素にさまざまなCSSレイアウト手法を使用すると、他の要素とは動作が少し異なる場合があります。 たとえば、フレックスまたはグリッドレイアウトでは、要素はデフォルトで領域全体に拡大されます。 画像は伸縮せず、代わりにグリッド領域またはフレックスコンテナーの始点に揃えられます。</p>
+
+<p>次の例では、2列2行のグリッドコンテナーがあり、4つのアイテムが含まれています。すべての <code>&lt;div&gt;</code> 要素には背景色があり、行と列に合わせて伸縮します。ただし、画像は引き伸ばされません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p>
+
+<p>これらのレッスンを順番に実行している場合は、まだレイアウトを確認していない可能性があります。置き換えられた要素は、グリッドまたはフレックスレイアウトの一部になると、基本的にレイアウトによって不自然に引き伸ばされないようにするために、異なるデフォルトの動作になることに注意してください。</p>
+
+<p>画像を強制的に引き伸ばして、グリッドセルを塗りつぶすには、次のような操作を行う必要があります。</p>
+
+<pre class="brush: css notranslate">img {
+  width: 100%;
+  height: 100%;
+}</pre>
+
+<p>ただし、これは画像を引き伸ばすため、おそらく望んでいることではありません。</p>
+
+<h2 id="Form_elements" name="Form_elements">フォーム要素</h2>
+
+<p>CSSでのスタイル設定に関しては、フォーム要素はトリッキーな問題であり、<a href="/ja/docs/Learn/HTML/Forms">HTMLフォームモジュール</a>には、フォーム要素のスタイル設定に関する詳細なガイドが含まれていますが、ここでは完全には再現しません。記事のこのセクションでは、強調すべきいくつかの重要な点があります。</p>
+
+<p>多くのフォームコントロールは <code><a href="/ja/docs/Web/HTML/Element/input">&lt;input&gt;</a></code> 要素によってページに追加されます。これは、テキスト入力などの単純なフォームフィールドから、色や日付の選択などのHTML5で追加されたより複雑なフィールドまでを定義します。の <code>&lt;textarea&gt;</code> などの追加要素や、<code>&lt;fieldset&gt;</code> や <code>&lt;legend&gt;</code> などのフォームの一部を格納したりラベルを貼ったりするために使われる要素もあります。</p>
+
+<p>HTML5には、Web開発者が必須フィールド、さらには入力する必要があるコンテンツのタイプを指定できるようにする属性も含まれています。ユーザーが予期しない何かを入力したり、必須フィールドを空白のままにしたりすると、ブラウザにエラーメッセージが表示されることがあります。 ブラウザによって、このようなアイテムのスタイリングやカスタマイズがどの程度可能なのかについては一貫性がありません。</p>
+
+<h3 id="Styling_text_input_elements" name="Styling_text_input_elements">テキスト入力欄のスタイル</h3>
+
+<p><code>&lt;input type="text"&gt;</code>、<code>&lt;input type="email"&gt;</code>、<code>&lt;textarea&gt;</code> 要素などのテキスト入力を可能にする要素は、スタイルを整えるのが非常に簡単で、ページ上の他のボックスと同じように振る舞う傾向があります。しかし、これらの要素のデフォルトのスタイルは、ユーザーがサイトを訪問する際に使用するオペレーティングシステムやブラウザによって異なります。</p>
+
+<p>以下の例では、CSSを使用していくつかのテキスト入力にスタイルを設定しています。境界線、マージン、パディングなどがすべて期待どおりに適用されていることがわかります。属性セレクターを使用して、さまざまな入力タイプをターゲットにしています。ボーダーを調整し、フィールドに背景色を追加し、フォントとパディングを変更して、このフォームの外観を変更してみてください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>重要</strong>：フォーム要素のスタイルを変更するときは、ユーザーがフォーム要素であることをユーザーに明確に伝えるように注意する必要があります。周囲のコンテンツとほとんど見分けがつかない境界線や背景のないフォーム入力を作成することもできますが、これにより認識や入力が非常に難しくなります。</p>
+</div>
+
+<p>このコースのHTMLパートの<a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームスタイリング</a>に関するレッスンで説明したように、より複雑な入力タイプの多くはオペレーティングシステムによってレンダリングされ、スタイリングにアクセスできません。そのため、フォームは訪問者によってかなり違って見えることを常に想定し、複雑なフォームをいくつかのブラウザでテストする必要があります。</p>
+
+<h3 id="Inheritance_and_form_elements" name="Inheritance_and_form_elements">継承とフォーム要素</h3>
+
+<p>一部のブラウザでは、フォーム要素はデフォルトではフォントのスタイルを継承しません。そのため、フォームのフィールドがボディや親要素で定義されたフォントを使用するようにしたい場合は、CSSにこのルールを追加する必要があります。</p>
+
+<pre class="brush: css notranslate"><code>button,
+input,
+select,
+textarea {
+  font-family : inherit;
+  font-size : 100%;
+} </code></pre>
+
+<h3 id="Form_elements_and_box-sizing" name="Form_elements_and_box-sizing">フォーム要素と box-sizing</h3>
+
+<p>ブラウザー間で、フォーム要素は、さまざまなウィジェットに対してさまざまなボックスサイズ設定ルールを使用します。<a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデルのレッスンで</a><code>box-sizing</code> プロパティについて学習しました。フォームのスタイル設定時にこの知識を使用して、フォーム要素に幅と高さを設定するときに一貫したエクスペリエンスを確保できます。</p>
+
+<p>一貫性を保つために、すべての要素でマージンとパディングに <code>0</code> を設定し、特定のコントロールをスタイリングするときにこれらを追加することをお勧めします</p>
+
+<pre class="brush: css notranslate"><code>button,
+input,
+select,
+textarea {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}</code></pre>
+
+<h3 id="Other_useful_settings" name="Other_useful_settings">その他の便利な設定</h3>
+
+<p>上記のルールに加えて、スクロールバーが不要な場合にIEがスクロールバーを表示しないよう <code>overflow: auto</code> に <code>&lt;textarea&gt;</code>sを設定する必要があります。</p>
+
+<pre class="brush: css notranslate">textarea {
+  overflow: auto;
+}</pre>
+
+<h3 id="Putting_it_all_together_into_a_reset" name="Putting_it_all_together_into_a_reset">リセット処理としてまとめる</h3>
+
+<p>最後のステップとして、上記で説明したさまざまなプロパティを次の「フォームリセット」にラップして、作業の一貫性のあるベースを提供できます。これには、最後の3つのセクションで言及したすべてのアイテムが含まれます。</p>
+
+<pre class="brush: css notranslate"><code>button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  padding: 0; margin: 0;
+}
+
+textarea {
+  overflow: auto;
+} </code></pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>：正規化スタイルシートは、すべてのプロジェクトで使用する一連のベースラインスタイルを作成するために、多くの開発者によって使用されています。通常、これらは上記で説明したものと同様のことを行います。CSSで独自の作業を行う前に、ブラウザー間で異なるものがすべて一貫したデフォルトに設定されていることを確認してください。ブラウザは通常、以前より一貫性があるため、以前ほど重要ではありません。ただし、1つの例を見てみたい場合は、<a href="http://necolas.github.io/normalize.css/">Normalize.cssを</a>チェックしてください<a href="http://necolas.github.io/normalize.css/">。Normalize.css</a>は、多くのプロジェクトでベースとして使用されている非常に人気のあるスタイルシートです。</p>
+</div>
+
+<p>フォームのスタイル設定の詳細については、これらのガイドのHTMLセクションにある2つの記事をご覧ください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTMLフォームのスタイル</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTMLフォームの高度なスタイル</a></li>
+</ul>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>このレッスンでは、CSSで画像、メディア、およびその他の異常な要素を操作するときに発生するいくつかの違いを強調しました。次の記事では、HTMLテーブルをスタイルする必要がある場合に役立ついくつかのヒントについて説明します。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/index.html b/files/ja/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..3094d16d9c
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/index.html
@@ -0,0 +1,88 @@
+---
+title: CSS の構成要素
+slug: Learn/CSS/Building_blocks
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - building blocks
+translation_of: Learn/CSS/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>から派生しています。CSS の言語や文法に慣れてきて、それを使う上での基本的な経験を得てきたという前提で、もう少し掘り下げてみましょう。カスケードと継承・セレクターの全種類・単位・サイズ設定・背景と枠線・デバッグなどを見ていきます。</p>
+
+<p class="summary">ここでの目的は、<a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>や <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。</p>
+
+<h2 id="Prerequisites" name="Prerequisites">前提知識</h2>
+
+<p>このモジュールを始めるまえに、つぎの状態になっておくべきです。</p>
+
+<ol>
+ <li>コンピューターの使い方と（ウェブを見たりコンテンツを消費したりといった）ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。</li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>で説明されている基本的な作業環境と、<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い方</a>で説明されているファイルの作り方や管理の仕方について理解していること。</li>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で説明されている HTML についての基礎知識に慣れ親しんでいること。</li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>で説明されている CSS の基本について理解していること。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは <a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったオンラインコーディングプログラムで試すことが可能です</p>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<p>このモジュールは CSS 言語のもっとも重要な部分をカバーする以下の記事で構成されます。各記事には理解度を試すエクササイズも含まれます。</p>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></dt>
+ <dd>このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念（カスケード・詳細度・継承）の理解を深めていくことです。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a></dt>
+ <dd>CSS セレクターにはさまざまな種類があり、スタイルを設定する要素を厳密に指定することができます。この記事と以下のサブ記事では、それらがどのように機能するかを詳しく見ていきます。サブ記事は以下の通りです:
+ <ul>
+  <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+  <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+  <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素</a></li>
+  <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
+ </ul>
+ </dd>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></dt>
+ <dd>CSS のすべてにはボックスの概念があり、これを理解することは CSS でレイアウトを作成したりアイテム同士を揃えたりするためのコツとなります。このレッスンでは CSS ボックスモデルを詳しく解説し、その仕組みと関連する用語を理解することで、より複雑なレイアウトに進んでいけるようにします。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></dt>
+ <dd>このレッスンでは、CSS の背景と枠線を使ってできるクリエイティブなことをいくつか見ていきます。グラデーションや背景画像や角丸について、背景と枠線は CSS のスタイリングに関する多くの疑問の解決策です。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></dt>
+ <dd>近年では、右から左へだけでなく上から下へのコンテンツ（日本語など）を含むコンテンツのさまざまな向きをより適切にサポートするために CSS サポートが進化しています。これらのさまざまな向きの考え方については "<strong>writing modes" </strong>と呼ばれます。レイアウトの学習を進めて進めていくと "writing modes" の理解がとても役に立っていきますので、この記事ではそれらを紹介していきます。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></dt>
+ <dd><font><font>このレッスンでは、CSS のもう 1 つの重要な概念である </font></font><strong><font><font>オーバーフロー（</font></font></strong><strong><font><font>overflow）</font></font></strong><font><font>を見ていきます</font><font>。</font><font>オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。</font><font>このガイドでは、その詳細とそれらについてどのように対処するかを学びます。</font></font></dd>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></dt>
+ <dd><font>CSS で使用されるすべてのプロパティには、特定の値または値の組み合わせのみが許可されます。</font><font>このレッスンでは、もっともよく使用される値と単位について見ていきます。</font></dd>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></dt>
+ <dd>これまでのさまざまなレッスンで、CSS を使用してウェブページ上の項目のサイズを調整するいくつかの方法に出会いました。デザイン作業をしていくうえで、それぞれの手法がどれほど大きく異なっているのかを理解することが重要です。このレッスンでは、CSS によって要素のサイズを設定する方法をまとめ、サイジングに役立ついくつかの用語を定義します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></dt>
+ <dd>このレッスンでは、特定の要素が CSS でどのように扱われるかを見ていきます。画像・メディア・フォーム要素では、CSS でスタイルを設定するにあたって通常のボックスとは少し異なる動作をします。何が可能で何が不可能であるのかを理解することで、フラストレーションを軽減することができます。このレッスンでは、知っておくべきことをいくつか取り上げます。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></dt>
+ <dd>HTML 表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。この記事では、表をスタイリングするテクニックとともに、HTML 表を見栄え良くするためのガイドを提供します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></dt>
+ <dd>CSS を書くとき、期待どおりに動作していないように見える問題が発生する場合があります。この記事では CSS の問題をデバッグする方法について案内し、何が起こっているかを調べるのに、すべてのモダンブラウザーに入っている開発者ツールがどう役立つかを示します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></dt>
+ <dd>スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、保守しやすい CSS を書くためのベストプラクティスと、他の人が保守性を向上させるための解決策の一部を紹介します。</dd>
+</dl>
+
+<h2 id="Assessments" name="Assessments">評価</h2>
+
+<p>CSS スキルをテストしたいですか？以下の各評価では上記のガイドで説明されている CSS の理解度をテストできます。</p>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">基本的な CSS の理解</a></dt>
+ <dd>この評価では基本的な構文・セレクター・詳細度・ボックスモデル・その他の理解度をテストします。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">装飾的なレターヘッド付きの便箋の作成</a></dt>
+ <dd>好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">かっこいいボックス</a></dt>
+ <dd>ここでは背景と枠線のスタイリングを使った人目を引くボックスの作り方を実践します。</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">ボックスの高度なエフェクト</a></dt>
+ <dd>この記事はトリックの箱として機能し、ボックスの影・ブレンドモード・フィルターのような、ボックスの装飾に使用できる高度な機能のいくつかを紹介します。</dd>
+</dl>
diff --git a/files/ja/learn/css/building_blocks/organizing/index.html b/files/ja/learn/css/building_blocks/organizing/index.html
new file mode 100644
index 0000000000..f1508b0edb
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/organizing/index.html
@@ -0,0 +1,375 @@
+---
+title: CSS の整理
+slug: Learn/CSS/Building_blocks/Organizing
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Learn
+  - comments
+  - formatting
+  - methodologies
+  - organizing
+  - post-processor
+  - pre-processor
+  - styleguide
+translation_of: Learn/CSS/Building_blocks/Organizing
+---
+<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div>
+
+<p>スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、CSS を書いていくのと保守していくのをやりやすくするためのベストプラクティスと、保守性を向上させるための解決策の一部を紹介します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>スタイルシートを整理するためのヒントとベストプラクティスを学び、 CSS の整理およびチーム作業を手助けするいくつかの命名規則とツールについて調べる。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tips_to_keep_your_CSS_tidy" name="Tips_to_keep_your_CSS_tidy">CSS を整理するためのヒント</h2>
+
+<p>スタイルシートを整理して整頓するための一般的な提案を次に示します。</p>
+
+<h3 id="Does_your_project_have_a_coding_style_guide" name="Does_your_project_have_a_coding_style_guide">プロジェクトのコーディング規約があるか？</h3>
+
+<p>既存のプロジェクトでチームと作業している場合、最初に確認することは、プロジェクトに CSS の既存のスタイルガイドがあるかどうかです。チームスタイルガイドは常に自分の個人的な好みに勝つ必要があります。多くの場合、正しい方法や間違った方法はありませんが、一貫性が重要です。</p>
+
+<p>例えば、<a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">MDN コードの例の CSS ガイドライン</a>を見てみましょう。</p>
+
+<h3 id="Keep_it_consistent" name="Keep_it_consistent">一貫性を保つ</h3>
+
+<p>プロジェクトのルールを設定したり、単独で作業している場合、最も重要なことは、一貫性を保つことです。一貫性は、クラスに同じ命名規則を使用する、色を説明する1つの方法を選択する、一貫したフォーマットを維持するなど、あらゆる方法で適用できます（例えば、タブまたはスペースのどちらを使用してコードをインデントしますか。スペースの場合、いくつのスペース？）</p>
+
+<p>常に従う一連のルールがあると、CSS を作成するときに必要な精神的なオーバーヘッドの量が減ります。</p>
+
+<h3 id="Formatting_readable_CSS" name="Formatting_readable_CSS">CSS を読みやすくする</h3>
+
+<p>CSS がフォーマットされているのを確認するには、いくつかの方法があります。一部の開発者は、次のようにすべてのルールを1行に配置します。</p>
+
+<pre class="brush: css notranslate">.box { background-color: #567895; }
+h2 { background-color: black; color: white; }</pre>
+
+<p>他の開発者はすべてを新しい行に分割することを好みます：</p>
+
+<pre class="brush: css notranslate">.box {
+  background-color: #567895;
+}
+
+h2 {
+  background-color: black;
+  color: white;
+}</pre>
+
+<p>CSSはどちらを使用してもかまいません。個人的には、各プロパティと値のペアを新しい行に置く方が読みやすくなっています。</p>
+
+<h3 id="Comment_your_CSS" name="Comment_your_CSS">CSS にコメントを書いておく</h3>
+
+<p>あなたの CSS にコメントを追加することは、将来の開発者があなたの CSS ファイルを使って作業する際の助けになるだけでなく、休暇の後にプロジェクトに戻ってきたときにも役立ちます。</p>
+
+<pre class="brush: css notranslate">/* これは CSS コメントです
+複数行に分割できます。 */</pre>
+
+<p>ヒントとしては、スタイルシートの論理セクション間にコメントブロックを追加して、スキャンするときにさまざまなセクションをすばやく見つけられるようにしたり、CSS のその部分にジャンプするために検索するものを提供したりすることもできます。コードに表示されない文字列を使用する場合は、検索することでセクションからセクションにジャンプできます。以下では <code>||</code> を使用しています。</p>
+
+<pre class="brush: css notranslate">/* || 一般的なスタイル */
+
+...
+
+/* || タイポグラフィ*/
+
+...
+
+/* || ヘッダーとメインナビゲーション */
+
+...
+
+</pre>
+
+<p>あなたのCSSにある全てのことにコメントをつける必要はありません。コメントすべきなのは、理由があって特定の決定をしたものです。</p>
+
+<p>古いブラウザの非互換性を回避するために、CSS プロパティを特定の方法で使用した可能性があります。例えば：</p>
+
+<pre class="brush: css notranslate">.box {
+  background-color: red; /* グラデーションをサポートしない古いブラウザのフォールバック */
+  background-image: linear-gradient(to right, #ff0000, #aa0000);
+}
+</pre>
+
+<p>おそらく、何かを達成するためにチュートリアルに従ったのではないかと思いますが、CSSが少し自明ではなくなっているのではないかと思います。その場合は、コメントにチュートリアルの URL を追加することができます。1年後かそこらでこのプロジェクトに戻ってきたときに自分自身に感謝するだろうし、漠然とそのことについての素晴らしいチュートリアルがあったことを思い出すことができますが、それはどこにあるのでしょうか？</p>
+
+<h3 id="Create_logical_sections_in_your_stylesheet" name="Create_logical_sections_in_your_stylesheet">スタイルシートを合理的に分割する</h3>
+
+<p>スタイルシートで最初にすべての一般的なスタイルを設定することをお勧めします。これは、その要素で特別なことをしない限り、通常適用されるすべてのスタイルを意味します。通常、次のルールを設定します。</p>
+
+<ul>
+ <li><code>body</code></li>
+ <li><code>p</code></li>
+ <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li>
+ <li><code>ul</code> と <code>ol</code></li>
+ <li><code>table</code> プロパティ</li>
+ <li>リンク</li>
+</ul>
+
+<p>スタイルシートのこのセクションでは、サイトのタイプにデフォルトのスタイルを提供したり、データテーブルとリストのデフォルトスタイルを設定したりします。</p>
+
+<pre class="brush: css notranslate">/* || 一般的なスタイル */
+
+body { ... }
+
+h1, h2, h3, h4 { ... }
+
+ul { ... }
+
+blockquote { ... }
+</pre>
+
+<p>このセクションの後で、いくつかのユーティリティクラスを定義できます。例えば、フレックスアイテムとして、または他の方法で表示するリストのデフォルトのリストスタイルを削除するクラス。多くの異なる要素に適用したいことがわかっていることがいくつかある場合、それらはこのセクションにあります。</p>
+
+<pre class="brush: css notranslate">/* || ユーティリティ */
+
+.nobullets {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+...
+
+</pre>
+
+<p>次に、サイト全体で使用されるすべてのものを追加できます。それは、基本的なページレイアウト、ヘッダー、ナビゲーションスタイルなどのようなものかもしれません。</p>
+
+<pre class="brush: css notranslate">/*  || サイトワイド */
+
+.main-nav { ... }
+
+.logo { ... }
+</pre>
+
+<p>最後に、コンテキスト、ページ、またはそれらが使用されているコンポーネントで分類された特定のものの CSS を含めます。</p>
+
+<pre class="brush: css notranslate">/* || 店のページ */
+
+.product-listing { ... }
+
+.product-box { ... }
+</pre>
+
+<p>このように物事を順番に並べることで、少なくともスタイルシートのどの部分に変更したいものがあるのかを知ることができます。</p>
+
+<h3 id="Avoid_overly-specific_selectors" name="Avoid_overly-specific_selectors">過剰なセレクターを避ける</h3>
+
+<p>非常に特殊なセレクタを作成した場合、別の要素に同じルールを適用するために CSS の塊を複製する必要があることに気づくことがよくあります。例えば、以下のセレクタのようなものがあるかもしれませんが、これは <code>main</code> のクラスを持つ <code>&lt;article&gt;</code> の中の <code>box</code> のクラスを持つ <code>&lt;p&gt;</code> にルールを適用します。</p>
+
+<pre class="brush: css notranslate">article.main p.box {
+  border: 1px solid #ccc;
+}</pre>
+
+<p>同じルールを <code>main</code> 以外のものや <code>&lt;p&gt;</code> 以外のものにも適用したい場合は、これらのルールに別のセレクタを追加するか、まったく新しいルールセットを作成しなければなりません。その代わりに、<code>box</code> というクラスを作成して、どこでも適用することができます。</p>
+
+<pre class="brush: css notranslate">.box {
+  border: 1px solid #ccc;
+}</pre>
+
+<p>もっと具体的にすることが理にかなっている場合もありますが、これは通常の習慣ではなく、一般的に例外です。</p>
+
+<h3 id="Break_large_stylesheets_into_multiple_smaller_ones" name="Break_large_stylesheets_into_multiple_smaller_ones">スタイルシートが大きくなってきたら分割する</h3>
+
+<p>特に、サイトの異なる部分に対して非常に異なるスタイルを持っている場合には、すべてのグローバルルールを含むスタイルシートと、それらのセクションに必要な特定のルールを含む小さなスタイルシートを持ちたいと思うかもしれません。一つのページから複数のスタイルシートにリンクすることができ、カスケードの通常のルールが適用され、後からリンクされたスタイルシートのルールは前からリンクされたスタイルシートのルールの後から適用されます。</p>
+
+<p>例えば、サイトの一部としてオンラインストアがあり、ストアに必要な商品リストやフォームのスタイリングにのみ多くの CSS が使用されているとします。それらを別のスタイルシートにして、ストアページでのみリンクさせるのは理にかなっていると思います。</p>
+
+<p><span>これにより、CSS の整理が容易になります。また、複数のユーザーが CSS で作業している場合、2人が同時に同じスタイルシートで作業する必要がなくなり、ソース管理で競合が発生する可能性も少なくなります。 </span></p>
+
+<h2 id="Other_tools_that_can_help" name="Other_tools_that_can_help">その他の役立つツール</h2>
+
+<p>CSS 自体には内蔵された整理の方法があまりないので、CSS の書き方に一貫性やルールを作る作業をする必要があります。また、ウェブ・コミュニティでは、大規模な CSS プロジェクトを管理するのに役立つ様々なツールやアプローチが開発されています。これらはあなたが調べてみると役に立つかもしれませんし、他の人と一緒に作業をしているときに出くわす可能性が高いので、これらのいくつかについての簡単なガイドを載せておきます。</p>
+
+<h3 id="CSS_methodologies" name="CSS_methodologies">CSS の方法論</h3>
+
+<p>CSS を作成するための独自のルールを考え出す必要はなく、コミュニティーによってすでに設計され、多くのプロジェクトでテストされているアプローチの1つを採用することでメリットが得られる場合があります。これらの方法論は基本的に CSS のコーディングガイドであり、CSS の作成と管理に非常に構造化されたアプローチを採用しています。通常、これらの方法論では、すべてのセレクタを作成してそのプロジェクトのカスタムルールセットに最適化した場合よりも、CSS の使用が冗長になる傾向があります。</p>
+
+<p>しかし、1つを採用することで多くの構造を得ることができますし、これらのシステムの多くは非常に広く使われているので、他の開発者はあなたが使用しているアプローチを理解し、自分の個人的な方法論を一から作り上げるよりも、同じように CSS を書くことができる可能性が高くなります。</p>
+
+<h4 id="OOCSS" name="OOCSS">OOCSS</h4>
+
+<p>あなたが遭遇するであろうアプローチのほとんどは、<a href="https://github.com/stubbornella/oocss/wiki">Nicole Sullivan の業績</a>によって人気を博した Object Oriented CSS (OOCSS) のコンセプトに起因しています。OOCSS の基本的な考え方は、CSS を再利用可能なオブジェクトに分割し、サイト上の必要な場所で使用できるようにすることです。OOCSS の標準的な例は、<a href="/ja/docs/Web/CSS/Layout_cookbook/Media_objects">The Media Object</a> として記述されているパターンです。これは、片面に固定サイズの画像や動画などの要素を配置し、もう片面には柔軟なコンテンツを配置したパターンです。コメントやリスティングなどのウェブサイトでよく見かけるパターンです。</p>
+
+<p>OOCSS の手法を採用していない場合は、このパターンが使用されるさまざまな場所に対してカスタムCSSを作成することができます。たとえば、コンポーネント・パーツに対して一連のルールを持つ <code>comment</code> というクラスを作成し、次に、いくつかの小さな違いを除いて、<code>comment</code> クラスとほとんど同じルールを持つ <code>list-item</code> というクラスを作成します。これら2つのコンポーネントの違いは、list-item には下罫線があり、comment 内のイメージには罫線がありますが、list-item のイメージにはないことです。</p>
+
+<pre class="brush: css notranslate">.comment {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+
+.comment img {
+  border: 1px solid grey;
+}
+
+.comment .content {
+  font-size: .8rem;
+}
+
+.list-item {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  border-bottom: 1px solid grey;
+}
+
+.list-item .content {
+  font-size: .8rem;
+}</pre>
+
+<p>OOCSS では、<code>media</code> と呼ばれる1つのパターンを作成して、両方のパターンに共通の CSSをすべて持つようにします。一般的には media オブジェクトの形状を表す基底クラスです。そして、それらの小さな違いに対応するために追加のクラスを追加して、特定の方法でスタイリングを拡張します。</p>
+
+<pre class="brush: css notranslate">.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+
+.media .content {
+  font-size: .8rem;
+}
+
+.comment img {
+  border: 1px solid grey;
+}
+
+ .list-item {
+  border-bottom: 1px solid grey;
+} </pre>
+
+<p>HTMLでは、コメントに <code>media</code> と <code>comment</code> クラスの両方を適用する必要があります。</p>
+
+<pre class="brush: html notranslate">&lt;div class="media comment"&gt;
+  &lt;img /&gt;
+  &lt;div class="content"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>リストアイテムは次のように <code>media</code> と <code>list-item</code> が適用されます。</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li class="media list-item"&gt;
+    &lt;img /&gt;
+   &lt;div class="content"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>Nicole Sullivan がこのアプローチを説明し、促進するために行った作業は、今日ではOOCSS のアプローチに厳密に従っていない人でも、一般的にはこの方法で CSS を再利用することを意味します。これは、一般的に物事に取り組むための良い方法としての理解につながりました。</p>
+
+<h4 id="BEM" name="BEM">BEM</h4>
+
+<p>BEM は、Block Element Modifier の略です。BEM では、ブロックはボタン、メニュー、ロゴなどのスタンドアロンエンティティです。要素とは、リストアイテムやタイトルのようなものであり、それが入っているブロックに関連付けられています。修飾子は、スタイルや動作を変更するブロックまたは要素のフラグです。CSS クラスではダッシュとアンダースコアが多用されているため、BEM を使用するコードを認識できます。例えば、<a href="http://getbem.com/naming/">BEMの命名規則</a>に関するページから、この HTML に適用されるクラスを見てみましょう。</p>
+
+<pre class="brush: html notranslate">&lt;form class="form form--theme-xmas form--simple"&gt;
+  &lt;input class="form__input" type="text" /&gt;
+  &lt;input
+    class="form__submit form__submit--disabled"
+    type="submit" /&gt;
+&lt;/form&gt;</pre>
+
+<p>追加のクラスは、OOCSS の例で使用されているクラスに似ていますが、BEM の厳密な命名規則を使用しています。</p>
+
+<p>BEM は大規模な Web プロジェクトで広く使用されており、多くの人がこの方法で CSS を作成しています。チュートリアルでさえ、CSS がこのように構造化されている理由について触れずに、BEM 構文を使用する例に出くわす可能性があります。</p>
+
+<p>システムの詳細については、CSS トリックの <a href="https://css-tricks.com/bem-101/">BEM 101</a> を参照してください。</p>
+
+<h4 id="Other_common_systems" name="Other_common_systems">その他</h4>
+
+<p>これらのシステムは多数使用されています。その他の一般的なアプローチには、Jonathan Snook によって作成された <a href="http://smacss.com/">CSSのスケーラブルでモジュール式のアーキテクチャ（SMACSS）</a>、Harry Roberts の <a href="https://itcss.io/">ITCSS</a>、および Yahoo! によって最初に作成された<a href="https://acss.io/"> Atomic CSS（ACSS）</a>があります。これらのアプローチのいずれかを使用するプロジェクトに遭遇した場合の利点は、同じスタイルでコーディングする方法を理解するのに役立つ多くの記事とガイドを検索して見つけることができることです。</p>
+
+<p>このようなシステムを使用することの欠点は、特に小規模なプロジェクトの場合、過度に複雑に見える可能性があることです。</p>
+
+<h3 id="Build_systems_for_CSS" name="Build_systems_for_CSS">CSS のビルドシステム</h3>
+
+<p>CSS を編成するもう1つの方法は、フロントエンド開発者が利用できるツールのいくつかを利用することです。これにより、CSS を書くために、よりプログラム的なアプローチを取ることができます。<em>プリプロセッサ</em>と<em>ポスト</em><em>プロセッサ</em>と呼ばれるツールは多数あります。プリプロセッサは未加工ファイルを実行してそれらをスタイルシートに変換し、ポストプロセッサは完成したスタイルシートに何かを実行します。おそらく、ロードを高速化するために最適化します。</p>
+
+<p>これらのツールを使用するには、開発環境で前処理と後処理を行うスクリプトを実行できる必要があります。多くのコードエディタでこれを行うことができます。または、コマンドラインツールをインストールして支援することもできます。</p>
+
+<p>最も人気のあるプリプロセッサは <a href="https://sass-lang.com/">Sass</a> です。これは Sass のチュートリアルではありませんので、Sass でできることを簡単に説明します。これは<span> Sass の他の機能を使っていなくても、整理する上で非常に便利です。 </span> Sass についてもっと知りたいのであれば、<a href="https://sass-lang.com/guide">Sass の基礎知識</a>の記事から始めて、他のドキュメントに進んでください。</p>
+
+<h4 id="Defining_variables" name="Defining_variables">変数の定義</h4>
+
+<p>CSS にネイティブ<a href="/ja/docs/Web/CSS/Using_CSS_custom_properties">カスタムプロパティが追加された</a>ため、この機能の重要性は低下していますが、Sass を使用する理由の1つは、プロジェクトで使用されるすべての色とフォントを設定として定義し、その変数をプロジェクトで使用できるようにすることです。これは、間違った青の色合いを使用したことがわかった場合、1つの場所で変更するだけでよいことを意味します。</p>
+
+<p><code>$base-color</code> 以下の最初の行のように呼び出される変数を作成した場合、その色が必要な場所であればどこでも、スタイルシートを介してその変数を使用できます。</p>
+
+<pre class="brush: css notranslate"><code>$base-color: #c6538c;
+
+.alert {
+  border: 1px solid $base-color;
+}</code></pre>
+
+<p>CSS にコンパイルすると、最終的なスタイルシートには次の CSS が含まれます。</p>
+
+<pre class="brush: css notranslate"><code>.alert {
+  border: 1px solid #c6538c;
+}</code></pre>
+
+<h4 id="Compiling_component_stylesheets" name="Compiling_component_stylesheets">コンポーネントスタイルシートのコンパイル</h4>
+
+<p>CSS を整理する1つの方法は、スタイルシートを小さなスタイルシートに分解することであると上記で述べました。Sass を使用すると、これを別のレベルに引き上げ、非常に小さなスタイルシートをたくさん持つことができます。コンポーネントごとに個別のスタイルシートを用意することもできます。Sass のインクルード機能を使用することで、これらすべてを1つまたは少数のスタイルシートにまとめて、実際に Web サイトにリンクできます。</p>
+
+<p>例えば、<a href="https://sass-lang.com/documentation/at-rules/use#partials">partial</a> を使って、ディレクトリ内にいくつかのスタイルファイル、例えば <code>foundation/_code.scss</code>、<code>foundation/_lists.scss</code>、<code>foundation/_footer.scss</code>、<code>foundation/_links.scss</code> などを作成し、Sass の <code>@use</code> ロールを使って他のスタイルシートにロードすることができます。</p>
+
+<pre class="brush: css notranslate">// foundation/_index.sass
+@use 'code'
+@use 'lists'
+@use 'footer'
+@use 'links'</pre>
+
+<p>上記のように、パーシャルがすべてインデックスファイルにロードされている場合、ディレクトリ全体を一度に別のスタイルシートにロードすることができます。</p>
+
+<pre class="brush: css notranslate">// style.sass
+@use 'foundation'</pre>
+
+
+
+<div class="blockIndicator note">
+<p><strong>注</strong>：Sass を試す簡単な方法は、<a href="https://codepen.io">CodePen</a> を使用すること<a href="https://codepen.io">です</a>。これを有効にすると、CodePen が Sass パーサを実行してくれるので、通常の CSS を適用したウェブページを見ることができます。CSS チュートリアルでは、CodePen のデモでプレーンな CSS ではなく Sass を使用しているのを見つけることがありますので、少しでも知っておくと便利です。</p>
+</div>
+
+<h4 id="Post-processing_for_optimization" name="Post-processing_for_optimization">ポストプロセッサー</h4>
+
+<p>もし、コメントや空白を大量に追加することでスタイルシートのサイズが大きくなることを気にしているのであれば、本番バージョンでは不要なものを取り除くことで CSS を最適化することが後処理のステップになります。これを実現するポストプロセッサの例としては、<a href="https://cssnano.co/">cssnano</a> があります。</p>
+
+<h2 id="Wrapping_up" name="Wrapping_up">まとめ</h2>
+
+<p>これは CSS 学習ガイドの最後の部分で、ここから CSS の探求を続けるための様々な方法があることがお分かりいただけると思います。</p>
+
+<p>CSS のレイアウトの詳細については、「<a href="/ja/docs/Learn/CSS/CSS_layout">CSSレイアウトの学習</a>」セクションを参照してください。</p>
+
+<p>また、これで <a href="/ja/docs/Web/CSS">MDN の CSS の資料</a>の残りの部分を探索するためのスキルを身につけることができます。プロパティや値を調べたり、<a href="/ja/docs/Web/CSS/Layout_cookbook">CSS クックブック</a>で使用するパターンを調べたり、<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">Guide to CSS Grid Layout</a> などの特定のガイドを読んだりすることができます。</p>
+
+<p>{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/overflowing_content/index.html b/files/ja/learn/css/building_blocks/overflowing_content/index.html
new file mode 100644
index 0000000000..313f2cc3b0
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/overflowing_content/index.html
@@ -0,0 +1,132 @@
+---
+title: 要素のはみ出し（オーバーフロー）
+slug: Learn/CSS/Building_blocks/Overflowing_content
+tags:
+  - Beginner
+  - Block Formatting Context
+  - CSS
+  - Data Loss
+  - Learn
+  - overflow
+translation_of: Learn/CSS/Building_blocks/Overflowing_content
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div>
+
+<p><font><font>このレッスンでは、CSS のもう1つの重要な概念である </font></font><strong><font><font>オーバーフロー（</font></font></strong><strong><font><font>overflow）</font></font></strong><font><font>を見ていきます</font><font>。</font><font>オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。</font><font>このガイドでは、その詳細とそれらについてどのように対処するかを学びます。</font></font></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>オーバーフローとその管理方法を理解する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_is_overflow" name="What_is_overflow">オーバーフロー (overflow) とは？</h2>
+
+<p><font><font>CSS のすべてがボックスであり、 </font></font>{{cssxref("width")}} <font><font>と </font></font>{{cssxref("height")}}<font><font>（または </font></font>{{cssxref("inline-size")}} や<font><font> </font></font>{{cssxref("block-size")}}<font><font>) の値を与えることにより、これらのボックスのサイズを制御できることを見てきました。</font><font>オーバーフローはボックス内のコンテンツが多すぎる場合に発生し、快適に収まらないという状態です。</font><font>CSS はこのオーバーフローを管理するためのさまざまなツールを提供しますが、早めに理解しておくと役立つ概念でもあります。</font><font>CSS を書いていると、とりわけ CSS によるレイアウトを深く理解していくにつれ、オーバーフローによく出くわします。</font></font></p>
+
+<h2 id="CSS_tries_to_avoid_data_loss" name="CSS_tries_to_avoid_data_loss">CSS のデータ損失の回避</h2>
+
+<p>オーバーフローが発生した場合の CSS の既定の動作を示す2つの例を見てみましょう。</p>
+
+<p>1つめの例です。まずブロックに <code>height</code> でボックスの高さを制限します。そしてそのスペースよりも多くのコンテンツを追加します。コンテンツはボックスからはみ出し、下の段落にかぶさってしまいます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p>
+
+<p>2つめに、インラインとして制限されているボックス内の単語の例です。ボックスは単語が収まらないほど小さいため、ボックスからはみ出てしまいます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p>
+
+<p><font>CSS のこの既定のアプローチは、コンテンツをかなり乱雑にオーバーフローさせているように感じられるかもしれません。</font><font>追加のコンテンツを非表示にしたり、ボックスを大きくさせたりしないのはなぜなのでしょう。</font></p>
+
+<p>CSS は可能な限りコンテンツを隠しません。これをやってしまうと、通常は問題となりうるデータ損失が発生するためです。CSS はこのようにコンテンツが消えることを懸念します。コンテンツが消失したことに気付かない可能性があるのは問題だからです。見ている人は消えたことに気付かないかもしれません。フォーム上の送信ボタンが消えてしまい、フォームが完了できない場合それは大きな問題です。代わりに CSS は目に見える方法でオーバーフローしようとします。あなたもしくは訪問者がコンテンツが重なっているという状況に気づき、修正が必要であることを知ることができます。</p>
+
+<p>ボックスを <code>width</code> または <code>height</code> で制御している場合、CSS は<font>オーバーフローの可能性が管理されていると想定します。</font>一般にボックスにテキストがある場合、ブロックのサイズを制御することは問題になりがちです。例えば、想定していたよりも多くのテキストになってしまったか、フォントサイズを大きくした場合などです。 </p>
+
+<p><font>次のいくつかのレッスンでは、オーバーフローを起こしにくいサイジング方法を見ていきます。</font><font>固定サイズが必要な場合は、オーバーフローの動作を制御することもできます。</font><font>読み進めましょう。</font></p>
+
+<h2 id="The_overflow_property" name="The_overflow_property">overflow プロパティ</h2>
+
+<p>{{cssxref("overflow")}} プロパティは要素のオーバーフローを制御し、ブラウザにどのように動作させるかを伝えます。既定値は <code>visible</code> のため、オーバーフロー時にコンテンツは表示されます。</p>
+
+<p>オーバーフロー時にコンテンツをトリミングしたい場合、<code>overflow: hidden</code> をボックスに指定します。これは文字通り、はみ出たものを見えなくします。これにより内容が隠れてしまうことが起こりうるため、コンテンツが非表示になっても問題にならない場合にのみに限定した方がいいでしょう。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p>
+
+<p>コンテンツのオーバーフロー時にスクロールバーを表示したいこともあるでしょう。 <code>overflow: scroll</code> を指定すればコンテンツがオーバーフローしない場合でも、ブラウザーはスクロールバーを表示します。コンテンツに応じてスクロールバーが表示されたり消えたりするのを防ぐため、これが必要な場合があります。</p>
+
+<p><strong><font><font>下のボックスからコンテンツの一部を削除すると、スクロールするものがなくてもスクロールバー（または少なくともトラック部品）が残っていることがわかります。</font></font></strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p>
+
+<p>上記の例では <code>y</code> 軸のスクロールバーだけがあればいいのですが、横スクロールバーも表示されてしまいます。{{cssxref("overflow-y")}} プロパティを使えば、<code>y</code> 軸のみのスクロールバーを指定できます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p>
+
+<p>{{cssxref("overflow-x")}} を使用して、x 軸のみのスクロールバーを表示できますが、文字が見切れてしまうことの回避策としては推奨されません。小さなボックスで長い文字列を処理する場合は、{{cssxref("word-break")}} や {{cssxref("overflow-wrap")}} を検討してください。<a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a> で説明した方法のいくつかは、さまざまな量のコンテンツに適切に対応するボックスを作成するのに役立つ場合があります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p>
+
+<p><code>scroll</code> にしておけばコンテンツが少ないとしても、それとは関係なくスクロールバーは常に表示されます。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <code>overflow</code> プロパティでは  x と y の2つの値を渡すことができることに注意してください。2つのキーワードが指定されている場合、ひとつめは <code>overflow-x</code>、2つめは <code>overflow-y</code> として適用されます。それ以外の場合は <code>overflow-x</code> と <code>overflow-y</code> の両方に同じ値が設定されます。例えば、<code>overflow: scroll hidden</code> とした場合は、<code>overflow-x</code> は <code>scroll</code>、<code>overflow-y</code> は <code>hidden</code> となります。</p>
+</div>
+
+<p>コンテンツがボックスに収まらない場合にのみ、スクロールバーを表示する場合は <code>overflow: auto</code> を使用します。<font>この場合、スクロールバーを表示するかどうかはブラウザーによります。</font><font>通常、デスクトップブラウザはコンテンツがオーバーフローする場合にのみそうします。</font></p>
+
+<p><strong>以下の例では、ボックスに収まるまでコンテンツを削除していくとスクロールバーが消えます。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p>
+
+<h2 id="Overflow_establishes_a_Block_Formatting_Context" name="Overflow_establishes_a_Block_Formatting_Context">オーバーフローとブロック整形コンテキスト</h2>
+
+<p>CSS には <strong>ブロック整形コンテキスト</strong> (BFC = Block Formatting Context) の概念があります。<font>これは今のところあまり気にする必要はありませんが、</font><code>scroll</code> や <code>auto</code> などのオーバーフローの設定で BFC が作成されることを知っておくと便利です。結果として <code>overflow</code> の値を変更したボックスのコンテンツは、独自のミニレイアウトになります。コンテナの外側の物は中に突っ込むことができず、ボックスから周囲のレイアウトに突き出すこともできません。これによってボックスにはすべてのコンテンツが含まれており、かつ、ページ上の他のアイテムと重ならないという、一貫したスクロール体験を生み出します。</p>
+
+<h2 id="Unwanted_overflow_in_web_design" name="Unwanted_overflow_in_web_design">オーバーフローの望ましくないウェブデザイン</h2>
+
+<p>モダンなレイアウト手法（<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a> モジュールで説明）では、オーバーフローを管理します。これらの方法は、ウェブページ上にどれだけのコンテンツが存在するかについての仮定や依存関係なしに大きく機能します。</p>
+
+<p>しかし過去には開発者は多くの場合、固定された高さを使用して、実際には互いに関係のないボックスの底を揃えようとしました。<font>それは脆く、レガシーなアプリケーションでは、コンテンツが他のコンテンツに重なってしまっているのを見かけることがあります。</font><font>それによってオーバーフローが起きていることがわかります。</font><font>理想としては、ボックスサイズの固定に依存しないようにレイアウトを調整します。</font></p>
+
+<p>サイトを開発するときは、常にオーバーフローの問題に留意する必要があります。大量のコンテンツと少量のコンテンツを含むデザインをテストし、テキストのフォントサイズを大きくし、CSS が堅牢に対処できていると確認する必要があります。オーバーフローの値を変更してコンテンツを非表示にしたりスクロールバーを追加したりするのは、特別な場合（例えばスクロールが本当に必要な場合など）にのみ使うべきです。</p>
+
+<h2 id="あなたのスキルをテストしてみてください!">あなたのスキルをテストしてみてください!</h2>
+
+<p>このレッスンで吸収すべきことはたくさんあります！ あなたは最も重要な情報を覚えていますか？ あなたの理解度を確認するには、<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Test your skills: overflow</a> を参照してください。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p><font>この短いレッスンではオーバーフローの概念を紹介しました。CSS はオーバーフローしたコンテンツが見えなくなることによる、データ損失の回避を試みることを理解しました。潜在的なオーバーフローを管理できること、また、問題のあるオーバーフローを引き起こしてしまわないかを確認する必要があることもわかりました。</font></p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/ja/learn/css/building_blocks/selectors/attribute_selectors/index.html
new file mode 100644
index 0000000000..57feac8995
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/selectors/attribute_selectors/index.html
@@ -0,0 +1,180 @@
+---
+title: 属性セレクター
+slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
+tags:
+  - Attribute
+  - Beginner
+  - CSS
+  - Learn
+  - Selectors
+translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
+
+<p>HTML の学習で学んだように、要素はマークアップについてさらに詳細な情報を提供する属性を持つことがあります。 CSS では、属性セレクターを使用して、ある種類の属性のある要素を対象に指定できます。このレッスンでは、これらのとても便利なセレクターの使い方を紹介します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、 HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>) および CSS に関するアイデア (<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>) に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>属性セレクターとは何かと、その使い方を学ぶ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Presence_and_value_selectors" name="Presence_and_value_selectors">存在や値のセレクター</h2>
+
+<p>これらのセレクターにより、要素を属性が存在するか (<code>href</code> など)、または属性の値に対して様々な方法で一致させて選択できるようになります。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">セレクター</th>
+   <th scope="col">例</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[<em>attr</em>]</code></td>
+   <td><code>a[title]</code></td>
+   <td><em>attr</em> という属性名を持つ要素と一致します。 — 値を角括弧の中に入れます。</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>=<em>value</em>]</code></td>
+   <td><code>a[href="https://example.com"]</code></td>
+   <td><em>attr</em> という属性名で値が <em>value</em> と完全一致する要素と一致します。— 文字列は引用符の中に入れます。</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>~=<em>value</em>]</code></td>
+   <td><code>p[class~="special"]</code></td>
+   <td>
+    <div title="Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values.">値が正確に <em>value </em>である <em>attr </em>の属性名を持つ要素、または1つ以上の値を含む <em>attr </em>属性を持つ要素に一致します。</div>
+
+    <div title="Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values."></div>
+
+    <div title="Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values.">複数の値のリストでは、個別の値が空白で区切られていることに注意してください。</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>|=<em>value</em>]</code></td>
+   <td><code>div[lang|="zh"]</code></td>
+   <td>値が正確に <em>value </em>であるか、または <em>value </em>の直後にハイフンが続く値で始まる <em>attr</em> 属性を持つ要素にマッチします。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>以下の例では、これらのセレクタが使用されていることがわかります。</p>
+
+<ul>
+ <li><code>li[class]</code> を使用することで、クラス属性を持つ任意のセレクタにマッチさせることができます。これは、最初のものを除いたすべてのリスト項目にマッチします。</li>
+ <li><code>li[class="a"]</code> は、aのクラスを持つセレクタにはマッチしますが、別のスペースで区切られたクラスを値の一部として持つaのクラスを持つセレクタにはマッチしません。2番目のリスト項目を選択します。</li>
+ <li><code>li[class~="a"]</code>は、 <code>a</code> のクラスを持つセレクタにマッチしますが、空白で区切られたリストの一部に <code>a</code> のクラスを含む値にもマッチします。2 番目と 3 番目のリスト項目を選択します。</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p>
+
+<h2 id="Substring_matching_selectors" name="Substring_matching_selectors">部分文字列一致セレクター</h2>
+
+<p>これらのセレクタは、属性の値の中の部分文字列をより高度にマッチさせることができます。例えば、 <code>box-warning</code> と <code>box-error</code> のクラスがあり、文字列 "box-" で始まるものを全てマッチさせたい場合、 <code>[class^="box-"]</code> を使用して両方を選択することができます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">セレクター</th>
+   <th scope="col">例</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[<em>attr</em>^=<em>value</em>]</code></td>
+   <td><code>li[class^="box-"]</code></td>
+   <td>値が <code>value</code> で始まる <code>attr</code> 属性（名前は角括弧内の値）を持つ要素とマッチします。</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>$=<em>value</em>]</code></td>
+   <td><code>li[class$="-box"]</code></td>
+   <td>
+    <div title="Matches elements with an attr attribute (whose name is the value in square brackets), whose value begins with value.">値が <code>value</code> で終わる <code>attr</code> 属性を持つ要素にマッチします。</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>*=<em>value</em>]</code></td>
+   <td><code>li[class*="box"]</code></td>
+   <td>文字列内の任意の場所に <code>value</code> を含む attr 属性を持つ要素にマッチします。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>次の例は、これらのセレクタの使用法を示しています。</p>
+
+<ul>
+ <li><code>li[class^="a"]</code> は <code>a</code> で始まる属性値にマッチするので、最初の 2 つのリスト項目にマッチします。</li>
+ <li><code>li[class$="a"]</code> は <code>a</code> で終わる属性値にマッチするので、最初と3番目のリスト項目にマッチします。</li>
+ <li><code>li[class*="a"]</code>は、<code>a</code> が文字列のどこかに現れる属性値にマッチします。</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p>
+
+<h2 id="Case-sensitivity" name="Case-sensitivity">大文字・小文字の区別</h2>
+
+<p>属性値を大文字小文字を区別せずにマッチさせたい場合は、閉じ括弧の前に値 <code>i</code> を使うことができます。このフラグは、ブラウザにASCII文字を大文字小文字を区別せずにマッチさせるように指示します。このフラグがない場合、値は文書言語の大文字小文字の区別に従ってマッチされます - HTMLの場合は大文字小文字を区別します。</p>
+
+<p>以下の例では、最初のセレクタは <code>a</code> で始まる値にマッチします。他の 2 つのリスト項目は大文字の A で始まるため、最初のリスト項目にのみマッチします。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>：新しい値 <code>s</code> もあります。これは、通常大文字と小文字が区別されないコンテキストで大文字と小文字を区別するマッチングを強制しますが、これはブラウザではあまりサポートされておらず、HTMLコンテキストではあまり役に立ちません。</p>
+</div>
+
+<h2 id="Try_it_out" name="Try_it_out">やってみよう</h2>
+
+<p>下のライブの例では、属性セレクタを使ったCSSを追加して以下のようにします。</p>
+
+<ul>
+ <li><code>title</code> 属性を持つ <code>&lt;a&gt;</code> 要素をターゲットにして、ボーダーをピンク（<code>border-color: pink</code>）にする。</li>
+ <li><code>&lt;a&gt;</code> 要素の <code>href</code> 属性の値のどこかに <code>contact</code> という単語が含まれているものをターゲットにして、ボーダーをオレンジ色にする (<code>border-color: orange</code>)。</li>
+ <li><code>href</code> 属性の値が <code>https</code> で始まる <code>&lt;a&gt;</code> 要素を対象とし、ボーダーを緑色(<code>border-color: green</code>)にする。</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-links.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">ここで解答を見ることができます</a>が、まずは自分で考えてみてください。</p>
+</div>
+
+<h2 id="Next_steps" name="Next_steps">次のステップ</h2>
+
+<p>これで属性セレクターが完了しました。次の記事に進んで、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-class and pseudo-element selectors</a>について読むことができます。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と境界</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し (オーバーフロー)</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/selectors/combinators/index.html b/files/ja/learn/css/building_blocks/selectors/combinators/index.html
new file mode 100644
index 0000000000..309d54b4cc
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/selectors/combinators/index.html
@@ -0,0 +1,118 @@
+---
+title: 結合子
+slug: Learn/CSS/Building_blocks/Selectors/Combinators
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - Selectors
+  - combinators
+translation_of: Learn/CSS/Building_blocks/Selectors/Combinators
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+
+<p>ここで取り上げる最後のセレクターは、他のセレクターと、ドキュメント内のコンテンツの場所や場所との有用な関係を提供する方法で組み合わせるため、コンビネーターと呼ばれます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>CSS で使用できるさまざまな結合子セレクターについて学ぶ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="子孫コンビネーター">子孫コンビネーター</h2>
+
+<p>子孫コンビネーター（通常は単一のスペース（ <code> </code> ）文字で表される）は、2つのセレクターを結合して、最初のセレクターと一致する祖先（親、親の親、親の親の親など）要素がある場合、2番目のセレクターと一致する要素が選択されるようにします。 子孫コンビネーターを利用するセレクターは、子孫セレクターと呼ばれます。</p>
+
+<pre class="brush: css notranslate">body article p
+</pre>
+
+<p>これらのセレクターは、他のセレクターの子孫である要素を選択します。それらは一致するように直接の子供である必要はありません。</p>
+
+<p>以下の例では、要素の内部にある <code>&lt;p&gt;</code> 要素のみを <code>.box</code> クラスと照合しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p>
+
+<h2 id="Child_combinator" name="Child_combinator">子コンビネーター</h2>
+
+<p>子コンビネーターは、大なり記号（ <code>&gt;</code> ）であり、セレクターが直接の子である要素を選択した場合にのみ一致します。階層のさらに下の子孫は一致しません。例えば、<code>&lt;article&gt;</code> 要素の直接の子である <code>&lt;p&gt;</code> 要素のみを選択するには：</p>
+
+<pre class="brush: css notranslate">article &gt; p</pre>
+
+<p>次の例では、順序付けられていないリストがあり、その中にネストされているのは別の順序付けられていないリストです。子コンビネータを使用して、<code>&lt;ul&gt;</code> の直接の子である <code>&lt;li&gt;</code> 要素のみを選択し、上部の境界線を設定しています。</p>
+
+<p>これを子コンビネーターとして指定している <code>&gt;</code> を削除すると、子孫セレクターになり、すべての <code>&lt;li&gt;</code> 要素に赤い境界線が表示されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p>
+
+<h2 id="Adjacent_sibling" name="Adjacent_sibling">隣接する兄弟</h2>
+
+<div title="The adjacent sibling selector (+) is used to select something if it is right next to another element at the same level of the hierarchy.">隣接する兄弟セレクター（ <code>+</code> ）は、階層の同じレベルにある別の要素のすぐ隣にある場合に選択します。例えば、<code>&lt;p&gt;</code> 要素の直後に来るすべての <code>&lt;img&gt;</code> 要素を選択するには：</div>
+
+<pre class="brush: css notranslate">p + img</pre>
+
+<p>一般的な使用例は、以下の私の例のように、見出しに続く段落で何かを行うことです。ここでは、<code>&lt;h1&gt;</code> に直接隣接する段落を探し、スタイルを設定しています。</p>
+
+<p><code>&lt;h1&gt;</code> と <code>&lt;p&gt;</code> の間に <code>&lt;h2&gt;</code> のような他の要素を挿入すると、段落がセレクタによってマッチしなくなり、要素が隣接しているときに適用される背景色と前景色が得られなくなることに気づくでしょう。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p>
+
+<h2 id="General_sibling" name="General_sibling">一般的な兄弟</h2>
+
+<p>要素が直接隣接していなくても、その要素の兄弟を選択したい場合は、一般的な兄弟コンビネーター( <code>~</code> )を使うことができます。<code>&lt;p&gt;</code> 要素の後のどこかに来る <code>&lt;img&gt;</code> 要素をすべて選択するには、次のようにします。</p>
+
+<pre class="brush: css notranslate">p ~ img</pre>
+
+<div title="In the example below we are selecting all &lt;p> elements that come after the &lt;h1>, and even though there is a &lt;div> in the document as well, the &lt;p> that comes after it is selected.">以下の例では、<code>&lt;h1&gt;</code> の後に続くすべての <code>&lt;p&gt;</code> 要素を選択しています。また、ドキュメントに <code>&lt;div&gt;</code> がある場合でも、その後にある <code>&lt;p&gt;</code> が選択されています。</div>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p>
+
+<h2 id="コンビネーターの使用">コンビネーターの使用</h2>
+
+<p>ドキュメントの一部を選択するために、前のレッスンで発見したセレクタをコンビネータと組み合わせることができます。 たとえば、<code>&lt;ul&gt;</code> の直接の子であるクラス "a"のリストアイテムを選択する場合、次のように使用できます。</p>
+
+<pre class="brush: css notranslate">ul &gt; li[class="a"]  {  }</pre>
+
+<p>ただし、文書の特定の部分を選択する大きなセレクタのリストを作成する際には注意が必要です。マークアップの中でその要素の位置を特定してセレクタを作成しているので、CSS ルールを再利用するのは難しいでしょう。</p>
+
+<p>多くの場合、単純なクラスを作成し、それを問題の要素に適用する方が適切です。つまり、ドキュメント内の何かにアクセスする必要があり、HTMLにアクセスできない場合、おそらくCMSによって生成されているために、コンビネーターに関する知識は非常に役立ちます。</p>
+
+<h2 id="あなたのスキルをテストしてみてください!">あなたのスキルをテストしてみてください!</h2>
+
+<p>この記事では多くのことを取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - あなたのスキルをテストするを参照してください。<a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a> を参照してください。</p>
+
+<h2 id="Moving_on" name="Moving_on">先へ</h2>
+
+<p>これは、セレクターに関するレッスンの最後のセクションです。次に、CSSのもう1つの重要な部分である<a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">CSSボックスモデルに進み</a>ます。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="このモジュール">このモジュール</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">共役</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/selectors/index.html b/files/ja/learn/css/building_blocks/selectors/index.html
new file mode 100644
index 0000000000..4ca0ff88db
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/selectors/index.html
@@ -0,0 +1,233 @@
+---
+title: CSS セレクター
+slug: Learn/CSS/Building_blocks/Selectors
+tags:
+  - Attribute
+  - Beginner
+  - CSS
+  - Class
+  - Learn
+  - Pseudo
+  - Selectors
+  - id
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p class="summary">{{Glossary("CSS")}}では、ウェブページ上の {{glossary("HTML")}} 要素にスタイルを設定するためにセレクターが使用されます。CSS セレクターにはさまざまな種類があり、きめ細かにスタイルを設定する要素を選択できます。この記事とそのサブ記事では、さまざまなタイプについて、どのように機能するかを詳しく見ていきます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>) および CSS に関するアイデア (<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>) に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>CSS セレクターがどのように機能するかを学ぶ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_is_a_selector" name="What_is_a_selector">セレクターとは</h2>
+
+<p>実はもうこれまでにセレクターを見たことがあるはずです。CSS セレクターは、CSS のもっとも基本的なルールとなるものです。要素やその他を選択して CSS プロパティ値を適用する HTML 要素をブラウザーに伝えるものです。セレクターによって選択される要素は、選択対象 <em>(subject of the selector</em>) と呼ばれます。</p>
+
+<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
+
+<p>これまでの記事で <code>h1</code> 要素や <code>.special</code> クラスなどのいくつかのセレクターを見てきました。それらはドキュメント内の対象をさまざまな方法で指定できるということも学びました。</p>
+
+<p>"CSS セレクター仕様" (<em>CSS Selectors specification</em>) で、CSS のセレクターは定義されています。CSS の他の部分と同様に、それらが機能するにはブラウザーでのサポートが必要です。よく使うセレクターは確定仕様である <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a> で定義されているため、ブラウザーサポートも期待できます。</p>
+
+<h2 id="Selector_lists" name="Selector_lists">セレクター一覧</h2>
+
+<p>同じ CSS を使用するものが複数ある場合は、セレクターリストでまとめてルールを適用することができます。たとえば、<code>h1</code> と <code>.special</code> クラスが同じ CSS だとして、2 つの個別のルールとして記述できます。</p>
+
+<pre class="brush: css"><code>h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+} </code></pre>
+
+<p>カンマ区切りでセレクターリストにもできます。</p>
+
+<pre class="brush: css"><code>h1, .special {
+  color: blue;
+} </code></pre>
+
+<p>カンマの前後に空白を入れることもできますし、改行したほうがセレクターを見つけやすくなり読みやすいかもしれません。</p>
+
+<pre class="brush: css"><code>h1,
+.special {
+  color: blue;
+} </code></pre>
+
+<p>以下のライブサンプルを使って、同じ宣言を持つ 2 つのセレクターを結合してみてください。作業の前後で見た目が同じになるように留意してください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
+
+<p>この方法でセレクターをグループ化していると、無効なセレクターがある場合はルール全体が無視されます。</p>
+
+<p>以下の例では無効なセレクターは無視され、<code>h1</code> だけがスタイル適用されます。</p>
+
+<pre class="brush: css"><code>h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+} </code></pre>
+
+<p><br>
+ ただし結合した場合は、<code>h1</code> もクラスも無効なものとしてスタイルされません。</p>
+
+<pre class="brush: css"><code>h1, ..special {
+  color: blue;
+} </code></pre>
+
+<h2 id="Types_of_selectors" name="Types_of_selectors">セレクターの種類</h2>
+
+<p>セレクターにはいくつかの異なるグループがあり、どれが必要かを知ることは有用です。ここのサブ記事ではさまざまなセレクターグループを詳しく見ていきます。</p>
+
+<h3 id="Type_class_and_ID_selectors" name="Type_class_and_ID_selectors">要素・クラス・ID によるセレクター</h3>
+
+<p>このグループには <code>&lt;h1&gt;</code> のような HTML 要素を対象とするセレクターを含みます。</p>
+
+<pre class="brush: css">h1 { }</pre>
+
+<p>同様にクラスを対象としたセレクターも含みます。</p>
+
+<pre class="brush: css">.box { }</pre>
+
+<p>あとは ID です。</p>
+
+<pre class="brush: css">#unique { }</pre>
+
+<h3 id="Attribute_selectors" name="Attribute_selectors">属性によるセレクター</h3>
+
+<p>このセレクターグループは要素の属性によるさまざまな選択方法を提供します。</p>
+
+<pre class="brush: css">a[title] { }</pre>
+
+<p>特定の値を持つ属性で選択することもできます。</p>
+
+<pre class="brush: css">a[href="https://example.com"] { }</pre>
+
+<h3 id="Pseudo-classes_and_pseudo-elements" name="Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</h3>
+
+<p>このセレクターグループは、要素の特定の状態をスタイルする疑似クラスを含みます。たとえば、<code>:hover</code> 擬似クラスはマウスポインターがホバーしているときにのみ要素を選択します。</p>
+
+<pre class="brush: css">a:hover { }</pre>
+
+<p>また要素自体ではなく要素の特定の部分を選択する擬似要素もあります。たとえば、<code>::first-line</code> は要素 (以下では <code>&lt;p&gt;</code>) 内の最初の行をまるで <code>&lt;span&gt;</code> でラップしてスタイルしたかのように動作します。</p>
+
+<pre class="brush: css">p::first-line { }</pre>
+
+<h3 id="Combinators" name="Combinators">結合子</h3>
+
+<p>最後のセレクターグループは、セレクターを組み合わせて文書内のターゲット要素を選びます。たとえば、以下では子コンビネータ (<code>&gt;</code>) によって <code>&lt;article&gt;</code> 要素の直接の子である段落を選択します。</p>
+
+<pre class="brush: css">article &gt; p { }</pre>
+
+<h2 id="Next_steps" name="Next_steps">次のステップ</h2>
+
+<p>この記事や MDN にあるさまざまなセレクターについては、下の方にある表を参照してください。または、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a>から見ていくこともできます。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Reference_table_of_selectors" name="Reference_table_of_selectors">セレクターのリファレンス表</h2>
+
+<p>以下の表で使用可能な各セレクターの概要と、それぞれの使い方を示すガイド内ページへのリンクを紹介します。そこには各セレクターのブラウザーサポートを確認できる MDN ページへのリンクもあります。セレクターを検索したり一般的に CSS を体験するときに、ここに戻ってきて参照することができます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">セレクター</th>
+   <th scope="col">例</th>
+   <th scope="col">CSS チュートリアル</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Type_selectors">要素セレクター</a></td>
+   <td><code>h1 {  }</code></td>
+   <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Type_selectors">要素セレクター</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Universal_selectors">全称セレクター</a></td>
+   <td><code>* {  }</code></td>
+   <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#The_universal_selector">全称セレクター</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a></td>
+   <td><code>.box {  }</code></td>
+   <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Class_selectors">クラスセレクター</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/ID_selectors">ID セレクター</a></td>
+   <td><code>#unique { }</code></td>
+   <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID セレクター</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></td>
+   <td><code>a[title] {  }</code></td>
+   <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Attribute_selectors">属性によるセレクター</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラスセレクター</a></td>
+   <td><code>p:first-child { }</code></td>
+   <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">疑似クラス</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素セレクター</a></td>
+   <td><code>p::first-line { }</code></td>
+   <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">疑似要素</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a></td>
+   <td><code>article p</code></td>
+   <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Descendant_Selector">子孫結合子</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a></td>
+   <td><code>article &gt; p</code></td>
+   <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Child_combinator">子結合子</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Adjacent_sibling_combinator">隣接兄弟結合子</a></td>
+   <td><code>h1 + p</code></td>
+   <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Adjacent_sibling">隣接兄弟</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/General_sibling_combinator">一般兄弟結合子</a></td>
+   <td><code>h1 ~ p</code></td>
+   <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#General_sibling">一般兄弟</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し (オーバーフロー)</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
new file mode 100644
index 0000000000..ea84d45c2b
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
@@ -0,0 +1,397 @@
+---
+title: 疑似クラスと疑似要素
+slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
+translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>
+
+<p>次に取り上げるセレクターのセットは、<strong>疑似クラス</strong>と<strong>疑似要素</strong>と呼ばれます。これらは多数あり、多くの場合、それらは非常に特定の目的に役立ちます。それらの使用方法がわかったら、リストを見て、達成しようとしているタスクに有効なものがあるかどうかを確認できます。ここでも、各セレクターに関連するMDNページは、ブラウザーサポートの説明に役立ちます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件：</th>
+   <td>基本的なコンピュータリテラシー、<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされている基本的なソフトウェア</a><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">、ファイルの操作</a>に関する基本的な知識、HTMLの基本（<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTMLの概要を</a>学ぶ）、CSSのしくみ（<a href="/en-US/docs/Learn/CSS/First_steps">CSSの最初のステップを</a>学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的：</th>
+   <td>疑似クラスおよび疑似要素セレクターについて学習します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="疑似クラスとは何ですか？">疑似クラスとは何ですか？</h2>
+
+<p>疑似クラスは、特定の状態にある要素を選択するセレクターです。たとえば、それらはそのタイプの最初の要素であるか、マウスポインターによってホバーされています。それらは、ドキュメントの一部にクラスを適用したかのように振る舞う傾向があり、マークアップの余分なクラスを削減し、より柔軟で保守可能なコードを提供するのに役立ちます。</p>
+
+<p>疑似クラスは、コロンで始まるキーワードです。</p>
+
+<pre class="notranslate">:<em>疑似クラス名</em></pre>
+
+<h3 id="単純な疑似クラスの例">単純な疑似クラスの例</h3>
+
+<p>簡単な例を見てみましょう。以下の最初の例に示すように、記事の最初の段落を大きく太字にしたい場合は、その段落にクラスを追加してから、そのクラスにCSSを追加できます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p>
+
+<p>ただし、これを維持するのは面倒な場合があります。ドキュメントの上部に新しい段落が追加された場合はどうなりますか？クラスを新しい段落に移動する必要があります。クラスを追加する代わりに、{{cssxref(":first-child")}} 疑似クラスセレクターを使用できます。これにより、<em>常に</em>記事の最初の子要素がターゲットになり、HTMLを編集する必要がなくなります（これは、CMSによって生成された可能性があるため、とにかく常に可能であるとは限りません。）</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p>
+
+<p>すべての疑似クラスは、この同じ方法で動作します。特定の状態にあるドキュメントの一部をターゲットにして、HTMLにクラスを追加したかのように動作します。MDNの他の例をいくつか見てみましょう。</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/CSS/:last-child">:last-child</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/:only-child">:only-child</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/:invalid">:invalid</a></code></li>
+</ul>
+
+<h3 id="ユーザーアクション疑似クラス">ユーザーアクション疑似クラス</h3>
+
+<p>一部の疑似クラスは、ユーザーが何らかの方法でドキュメントを操作したときにのみ適用されます。これらの<strong>ユーザーアクションの</strong>疑似クラスは、<strong>動的疑似クラス</strong>と呼ばれることもあり、ユーザーが要素を操作したときに、要素にクラスが追加されたかのように動作します。例は次のとおりです。</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code> — 上記の通り; これは、ユーザーが要素（通常はリンク）の上にポインターを移動した場合にのみ適用されます。</li>
+ <li><code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> — ユーザーがキーボードコントロールを使用して要素にフォーカスした場合にのみ適用されます。</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p>
+
+<h2 id="疑似要素とは何ですか？">疑似要素とは何ですか？</h2>
+
+<p>疑似要素は同様に動作しますが、既存の要素にクラスを適用するのではなく、まったく新しいHTML要素をマークアップに追加したかのように動作します。疑似要素はダブルコロンで始まり <code>::</code> ます。</p>
+
+<pre class="notranslate"><em>::疑似要素名</em></pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>：一部の初期の疑似要素では、単一のコロン構文が使用されていたため、コードまたは例でこれを見ることがあるでしょう。最新のブラウザは、後方互換性のためにシングルまたはダブルコロン構文で初期の疑似要素をサポートしています。</p>
+</div>
+
+<p>たとえば、段落の最初の行を選択する場合は、それを <code>&lt;span&gt;</code> 要素にラップして要素セレクターを使用できます。ただし、ラップした単語の数が親要素の幅よりも長いまたは短い場合は、失敗します。1行にいくつの単語が収まるかわからない傾向があるため（画面の幅やフォントサイズが変わると、単語数が変わるため）、HTMLを追加してこれを確実に行うことは不可能です。</p>
+
+<p><code>::first-line</code> 擬似要素セレクタは確実にあなたのためにこれを行います-それはまだ最初の行のみを選択します言葉の数が増加した場合と減少します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p>
+
+<p>それはまるで最初のフォーマットされた行を <code>&lt;span&gt;</code> で魔法のように包み、行の長さが変更されるたびに更新されるかのように動作します。</p>
+
+<p>これにより、両方の段落の最初の行が選択されていることがわかります。</p>
+
+<h2 id="疑似クラスと疑似要素を組み合わせる">疑似クラスと疑似要素を組み合わせる</h2>
+
+<p>最初の段落の最初の行を太字にしたい場合は <code>:first-child</code> 、 <code>::first-line</code> セレクターとセレクターをチェーンすることができます。前のライブ例を編集して、次のCSSを使用するようにしてください。<span class="tlid-translation translation" lang="ja"><span title="">&lt;article&gt;要素内にある最初の <code>&lt;p&gt;</code> 要素の最初の行を選択したいと言っています。</span></span></p>
+
+<pre class="brush: css notranslate"> <code>article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}</code></pre>
+
+<h2 id="beforeおよび_afterを使用したコンテンツの生成">:: beforeおよび:: afterを使用したコンテンツの生成</h2>
+
+<p>CSSを使用してコンテンツをドキュメントに挿入するための <code><a href="/en-US/docs/Web/CSS/content">content</a></code> プロパティと共に使用される特別な疑似要素がいくつかあります。</p>
+
+<p>以下のライブ例のように、これらを使用してテキストの文字列を挿入できます。{{cssxref("content")}} プロパティのテキスト値を変更してみて、出力でそれを確認してください。 <code>::before</code> 疑似要素を <code>::after</code> に変更して、要素の最初ではなく最後に挿入されたテキストを表示することもできます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p>
+
+<p>CSSからテキストの文字列を挿入することは、実際にはWebで頻繁に行うことではありません。そのテキストは一部のスクリーンリーダーにはアクセスできず、将来誰かが見つけて編集するのが難しい場合があるためです。</p>
+
+<p>これらの疑似要素のより有効な使用法は、アイコンを挿入することです。たとえば、以下の例で追加された小さな矢印は、スクリーンリーダーで読みたくない視覚的なインジケーターです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p>
+
+<p>これらの疑似要素は、空の文字列を挿入するためにも頻繁に使用され、ページ上の要素と同じようにスタイルを設定できます。</p>
+
+<p>次の例では、 <code>::before</code> 疑似要素を使用して空の文字列を追加しています。幅と高さでスタイルを設定できるように、これを <code>display: block</code> に設定しました。次に、CSSを使用して、他の要素と同じようにスタイルを設定します。CSSをいじって、CSSの外観と動作を変更できます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p>
+
+<p><code>content</code> プロパティとともに <code>::before</code> と <code>::after</code> 擬似要素を使用することは、CSSでは「生成されたコンテンツ」と呼ばれ、この手法がさまざまなタスクに使用されているのをよく目にします。良い例は、<a href="http://www.cssarrowplease.com/">CSS Arrow Please Please</a>のサイトで、<a href="http://www.cssarrowplease.com/">CSSで矢印</a>を生成するのに役立ちます。矢印を作成するときにCSSを見ると、{{cssxref("::before")}} および {{cssxref("::after")}} 疑似要素が使用されていることがわかります。これらのセレクターが表示されたら、{{cssxref("content")}} プロパティを見て、ドキュメントに何が追加されているかを確認してください。</p>
+
+<h2 id="参照セクション">参照セクション</h2>
+
+<p>疑似クラスと疑似要素は多数あり、参照するリストがあると便利です。以下に、MDNのリファレンスページへのリンクとともに、それらをリストした表を示します。これをリファレンスとして使用して、ターゲットにできるものの種類を確認します。</p>
+
+<h3 id="疑似クラス">疑似クラス</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">セレクタ</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref(":active")}}</td>
+   <td>ユーザーが要素をアクティブ化（たとえばクリック）すると一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":any-link")}}</td>
+   <td>リンクの <code>:link</code> と <code>:visited</code> 状態の両方に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":blank")}}</td>
+   <td>入力値が空の<a href="/en-US/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code> 要素に</a>一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":checked")}}</td>
+   <td>選択状態のラジオボタンまたはチェックボックスに一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":current")}}</td>
+   <td>現在表示されている要素または要素の祖先と一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":default")}}</td>
+   <td>類似要素のセットの中でデフォルトである1つ以上のUI要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":dir")}}</td>
+   <td>方向性（HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> 属性またはCSS <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> プロパティの値）に基づいて要素を選択します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":disabled")}}</td>
+   <td>無効な状態のユーザーインターフェイス要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":empty")}}</td>
+   <td>オプションの空白以外の子を持たない要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":enabled")}}</td>
+   <td>有効な状態のユーザーインターフェイス要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":first")}}</td>
+   <td><a href="/en-US/docs/Web/CSS/Paged_Media">ページ媒体</a>では、最初のページと一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":first-child")}}</td>
+   <td>兄弟の中で最初にある要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":first-of-type")}}</td>
+   <td>兄弟の中で最初にある特定のタイプの要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":focus")}}</td>
+   <td>要素にフォーカスがあるときに一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":focus-visible")}}</td>
+   <td>要素にフォーカスがあり、そのフォーカスがユーザーに表示される場合に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":focus-within")}}</td>
+   <td>フォーカスを持つ要素と、フォーカスを持つ子孫を持つ要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":future")}}</td>
+   <td>現在の要素の後の要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":hover")}}</td>
+   <td>ユーザーが要素にカーソルを合わせると一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":indeterminate")}}</td>
+   <td>値が不確定な状態のUI要素、通常は<a href="/en-US/docs/Web/HTML/Element/input/checkbox">チェックボックスに</a>一致し<a href="/en-US/docs/Web/HTML/Element/input/checkbox">ます</a>。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":in-range")}}</td>
+   <td>範囲制限を持つ要素で、要素の値が範囲内にある場合にマッチします。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":invalid")}}</td>
+   <td>無効な状態の <code>&lt;input&gt;</code> のような要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":lang")}}</td>
+   <td>言語（HTML <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a>属性の値）に基づいて要素を<a href="/en-US/docs/Web/HTML/Global_attributes/lang">照合し</a>ます。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":last-child")}}</td>
+   <td>兄弟の中で最後にある要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":last-of-type")}}</td>
+   <td>兄弟の中で最後にある特定のタイプの要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":left")}}</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、左側のページと一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":link")}}</td>
+   <td>未訪問のリンクに一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":local-link")}}</td>
+   <td>現在のドキュメントと同じサイトにあるページを指すリンクに一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":is", ":is()")}}</td>
+   <td>渡されたセレクターリスト内の任意のセレクターに一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":not")}}</td>
+   <td>このセレクターに値として渡されるセレクターで一致しないものと一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":nth-​​child")}}</td>
+   <td>兄弟のリストの要素に一致します — 兄弟は<var>an+b</var>の形式の式で一致します（たとえば、2n + 1は1、3、5、7番目などの要素に一致します。すべてが奇数です）。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":nth-​​of-type")}}</td>
+   <td>特定のタイプの兄弟（ <code>&lt;p&gt;</code> 要素など）のリストの要素に一致します — 兄弟は<var>、an+b</var>という形式の式で一致します（たとえば、2n + 1は、その要素のタイプの1、3、5 、7番目などに一致します。すべて奇数です。）</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":nth-​​last-child")}}</td>
+   <td>兄弟のリストの要素を末尾から逆に数えて一致させます。兄弟は<var>an+b</var>の形式の式で一致します（たとえば、2n + 1はシーケンスの最後の要素、次にその2つ前の要素、次にその2つ前の要素などと一致します。最後から数えてすべての奇数の要素。）</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":nth-​​last-of-type")}}</td>
+   <td>特定のタイプの兄弟のリスト（ <code>&lt;p&gt;</code> 要素など）の要素を最後から逆に数えて一致させます。兄弟は<var>、an+b</var>という形式の式で一致します（たとえば、2n + 1は、シーケンス内のそのタイプの最後の要素、次にその2つ前の要素、次にその2つ前の要素などと一致します。最後から数えてすべての奇数の要素。）</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":only-child")}}</td>
+   <td>兄弟がない要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":only-of-type")}}</td>
+   <td>兄弟間でそのタイプの唯一の要素である要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":optional")}}</td>
+   <td>不要なフォーム要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":out-of-range")}}</td>
+   <td>範囲制限を持つ要素で、要素の値が範囲外にある場合にマッチします。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":past")}}</td>
+   <td>現在の要素より前の要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":placeholder-shown")}}</td>
+   <td>プレースホルダーテキストを表示しているinput要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":playing")}}</td>
+   <td>「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「再生中」のときに一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":paused")}}</td>
+   <td>「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「一時停止」されている場合に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":read-only")}}</td>
+   <td>ユーザーが変更できない要素と一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":read-write")}}</td>
+   <td>ユーザーが変更可能な要素と一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":required")}}</td>
+   <td>必要なフォーム要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":right")}}</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、右側のページに一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":root")}}</td>
+   <td>ドキュメントのルートである要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":scope")}}</td>
+   <td>スコープ要素であるすべての要素に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":valid")}}</td>
+   <td><code>&lt;input&gt;</code> 要素などで要素が有効な状態のときに一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":target")}}</td>
+   <td>現在のURLのターゲットである場合（つまり、現在の<a href="https://en.wikipedia.org/wiki/Fragment_identifier">URLフラグメントに</a>一致するIDを持つ場合）、要素に一致し<a href="https://en.wikipedia.org/wiki/Fragment_identifier">ます</a>。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref(":visited")}}</td>
+   <td>訪問したリンクに一致します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="疑似要素">疑似要素</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">セレクタ</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("::after")}}</td>
+   <td>元の要素の実際のコンテンツの後に現れるスタイル可能な要素と一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("::before")}}</td>
+   <td>元の要素の実際のコンテンツの前に現れるスタイル可能な要素と一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("::first-letter")}}</td>
+   <td>要素の最初の文字と一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("::first-line")}}</td>
+   <td>含まれている要素の最初の行と一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("::grammar-error")}}</td>
+   <td>ブラウザによってフラグが立てられた文法エラーを含むドキュメントの一部に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("::marker")}}</td>
+   <td>通常は箇条書きまたは番号が含まれているリストアイテムのマーカーボックスに一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("::selection")}}</td>
+   <td>選択されたドキュメントの部分に一致します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("::spelling-error")}}</td>
+   <td>ブラウザによってフラグが付けられた、スペルミスを含むドキュメントの一部に一致します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="このモジュールでは">このモジュールでは</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSSセレクター</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">タイプ、クラス、IDセレクター</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">疑似クラスと疑似要素</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">コンビネーター</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">異なるテキスト方向の処理</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">あふれるコンテンツ</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">値と単位</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSSでのアイテムのサイズ変更</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像、メディア、フォーム要素</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">スタイリングテーブル</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSSのデバッグ</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSSの整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
new file mode 100644
index 0000000000..8f1bbbfaad
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
@@ -0,0 +1,126 @@
+---
+title: 要素・クラス・ID によるセレクター
+slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
+tags:
+  - Beginner
+  - CSS
+  - Class
+  - Learn
+  - Selectors
+  - Syntax
+  - id
+  - universal
+translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<p>このレッスンでは、利用できる最も簡単にみえるセレクタをとりあげます。これは今後あなたが作業でよく使うことになります。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>CSS をドキュメントに適用するためのさまざまな CSS セレクタについて学ぶ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Type_selectors" name="Type_selectors">タイプセレクタ</h2>
+
+<p><strong>タイプセレクタ</strong>は<em>タグ名セレクタ</em>または<em>要素セレクタ</em>を参照します。これはあなたのドキュメント中のタグまたは要素を選択するからです。次の例で span, em それに strong セレクタを使用します。そのため <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> と <code>&lt;strong&gt;</code> の要素はスタイル修飾されます。</p>
+
+<p><strong>CSS ルールを追加して <code>&lt;h1&gt;</code> 要素を選択してその色を青に変えましょう。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p>
+
+<h2 id="The_universal_selector" name="The_universal_selector">ユニバーサルセレクタ</h2>
+
+<p>ユニバーサルセレクタはアステリスク (<code>*</code>) で表します。またこれはドキュメントのすべてまたは親要素に含まれるすべての要素( これはそれが連なっている、他の要素やそれらの子要素に連なっている要素すべて) を選択します。次の例ではすべての要素から margin を削除しています。これはブラウザーによって追加されたデフォルトのスタイルの代りに、章立てやパラグラフの margin を消してそれぞれを近く配置させます。これにより個々のパラグラフが見分けがつかなくなってしまいます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p>
+
+<p>この種類の動作はしばしば「スタイルシートのリセット」と呼び、ブラウザーのスタイル設定を取り消します。ユニバーサルセレクタはグローバルな変更をもたらすため、下記に述べる特定の状況のみに使うべきです。</p>
+
+<h3 id="Using_the_universal_selector_to_make_your_selectors_easier_to_read" name="Using_the_universal_selector_to_make_your_selectors_easier_to_read">ユニバーサルセレクタを使用してセレクタの可読性をあげる</h3>
+
+<p>ユニバーサルセレクタの使用方法のひとつに、セレクタを読みやすくし、その動作を明かにするのものがあります。例えば、<code>&lt;article&gt;</code> 要素の最初の子要素を選択し、それがどんな要素であったとしてもそれを太字にしたいとします。これには{{cssxref(":first-child")}} セレクタを使うことができます。これはあとの<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">疑似クラスと疑似要素</a>のコースで詳細を学びますが、<code>&lt;article&gt;</code> 要素セレクタの後ろで指定します。</p>
+
+<pre class="brush: css notranslate">article :first-child {
+
+}</pre>
+
+<p>しかしこれは、<code>article:first-child</code> と混同しかねません。これは他の要素の第一子要素の<code>&lt;article&gt;</code> 要素を選択してしまうのです。</p>
+
+<p>この混乱を避けるために、<code>:first-child</code> にユニバーサルセレクタを追加します。これで何を選択しているかが明らかです。<code>&lt;article&gt;</code> 要素の第一子要素にあたるすべての要素を選択しています。</p>
+
+<pre class="brush: css notranslate">article *:first-child {
+
+} </pre>
+
+<h2 id="Class_selectors" name="Class_selectors">クラスセレクタ</h2>
+
+<p>クラスセレクタの名前はピリオド <code>(.</code>) から始まります。そしてそのクラスが適用されている、ドキュメント内のすべてを選択します。次の例では、<code>.highlight</code> というクラスを作成し、ドキュメントのいくつかの場所に適用します。このクラスが適用されたすべての要素をハイライトします。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p>
+
+<h3 id="Targetting_classes_on_particular_elements" name="Targetting_classes_on_particular_elements">特定の要素のクラスを対象にする</h3>
+
+<p>特定のクラスが適用された特定の要素を対象にするセレクタを作成できます。次の例では、<code>highlight</code> クラスの <code>&lt;span&gt;</code> をハイライトしますが、<code>highlight</code> クラスの <code>&lt;h1&gt;</code> 見出しを異なるようにハイライトします。対象にしたい要素にタイプセレクタを使用して実現できます。ドットの後にクラスを追加しますが、クラスとの間にホワイトスペースをいれません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p>
+
+<p>このアプローチでは、ルールが特定の要素とクラスの組み合わせにのみ適用されるため、ルールの範囲が狭くなります。そのため、ルールを他の要素にも適用したい場合は、別のセレクタを追加する必要があります。</p>
+
+<h3 id="Target_an_element_if_it_has_more_than_one_class_applied" name="Target_an_element_if_it_has_more_than_one_class_applied">複数のクラスが適用された要素を対象にする</h3>
+
+<p>一つの要素に複数のクラスを適用できます。それらを個別に選択することも、すべてのクラスがあるものだけを選択することもできます。これは、サイト上で様々な方法で組み合わせることができるコンポーネントを構築する際に便利です。</p>
+
+<p>次の例は、ノートのある <code>&lt;div&gt;</code> です。灰色の境界はそのボックスが <code>notebox</code> クラスもっている場合にのみ適用されます。もしそれが <code>warning</code> や <code>danger</code> クラスも持っていた場合 {{cssxref("border-color")}} を変更します。</p>
+
+<p>ブラウザーに、2 つのクラスが存在する要素だけ一致するように指定するには、それらのクラスをすべて空白を入れずに繋げて指定します。最後の <code>&lt;div&gt;</code> には <code>danger</code> クラスがあるだけなので、適用されるスタイルはありません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p>
+
+<h2 id="ID_Selectors" name="ID_Selectors">ID セレクタ</h2>
+
+<p>ID セレクタは ピリオドではなく <code>#</code> で始めますが、それ以外は基本的にクラスセレクタと同じです。しかし ID はそのドキュメントの名にはただ一度しか使用できません。ID セレクタはその <code>id</code> が設定されている要素を選択します。要素と ID の両方に一致するものだけを対象にする場合、ID セレクタをタイプセレクタの前に置くことができます。これを次の例で確認しましょう。:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: このレッスンの特例で学んだように ID は非常に特別なもので、他のセレクタを上書きすることがあります。これは対応が難しくなることがあります。多くの場合、ID を使用する代りにクラスを追加するほうが望ましいです。しかしその要素を対象にする方法が ID を使うしかないような場合、例えばそのマークアップにあなたがアクセスできず、編集できないような場合、この方法を使用できます。</p>
+</div>
+
+<h2 id="In_the_next_article" name="In_the_next_article">次の記事</h2>
+
+<p><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクタ</a> によるセレクタを調べます。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクタ</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクタ</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクタ</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクタ</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html
new file mode 100644
index 0000000000..80909093b3
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html
@@ -0,0 +1,139 @@
+---
+title: CSS によるサイズ設定
+slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS
+tags:
+  - Beginner
+  - CSS
+  - Intrinsic size
+  - Learn
+  - max size
+  - min size
+  - percentage
+  - sizing
+  - viewport units
+translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
+
+<p>これまでのさまざまなレッスンで、CSS を使用してウェブページ上のアイテムのサイズを調整するいくつかの方法に出会いました。デザイン作業をしていくうえで、それぞれの手法がどれほど大事かを理解することが重要です。このレッスンでは、CSS によって要素のサイズを設定する方法をまとめ、サイジングに役立ついくつかの用語を定義します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>CSS によるさまざまなサイズ設定の方法を理解する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="The_natural_or_intrinsic_size_of_things" name="The_natural_or_intrinsic_size_of_things">要素固有のサイズ</h2>
+
+<p>HTML要素には自然なサイズがあり、CSSの影響を受ける前に設定されます。簡単な例は画像です。画像には、ページに埋め込む画像ファイルで定義された幅と高さがあります。このサイズは<strong>固有のサイズ</strong>と呼ばれ、画像自体に由来します。</p>
+
+<p><code>&lt;img&gt;</code> タグまたはCSSの属性を使用してページに画像を配置し、その高さと幅を変更しない場合、その固有のサイズを使用して表示されます。以下の例では、ファイルの範囲を確認できるように画像に境界線を付けています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
+
+<p>ただし、空の {{htmlelement("div")}} には独自のサイズはありません。コンテンツのないHTMLに {{htmlelement("div")}} を追加し、画像で行ったように境界線を付けると、ページに線が表示されます。これは、要素の折りたたまれた境界線です。開いたままにするコンテンツはありません。以下の例では、その境界線はコンテナの幅まで伸びています。これはブロックレベルの要素であるため、慣れ親しんだ動作になるはずです。コンテンツがないため、高さ（またはブロックディメンションのサイズ）はありません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
+
+<p>上記の例では、空の要素内にテキストを追加してみてください。要素の高さがコンテンツによって定義されているため、境界線にはそのテキストが含まれています。したがって、<code>&lt;div&gt;</code> ブロックディメンションにおけるこのサイズは、コンテンツのサイズに由来します。繰り返しますが、これは要素の固有のサイズです。そのサイズはコンテンツによって定義されます。</p>
+
+<h2 id="Setting_a_specific_size" name="Setting_a_specific_size">サイズの指定</h2>
+
+<p>もちろん、デザインの要素に特定のサイズを与えることもできます。要素にサイズが指定されている場合（およびそのコンテンツがそのサイズに収まる必要がある場合）、それを<strong>外部サイズ</strong>と呼びます。上記の例の <code>&lt;div&gt;</code> を見てみます。特定の {{cssxref("width")}} と {{cssxref("height")}} の値を指定できるため、そ <span class="tlid-translation translation" lang="ja"><span title="">コンテンツがどのように配置されても、そのサイズになります。</span> </span> <a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">前のオーバーフローに関するレッスンで</a>見たように、要素の中に収まるスペースよりも多くのコンテンツがある場合、高さを設定するとコンテンツがオーバーフローする可能性があります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
+
+<p>このオーバーフローの問題のため、要素の高さを長さまたはパーセンテージで固定することは、Web上で非常に注意深く行う必要があります。</p>
+
+<h3 id="Using_percentages" name="Using_percentages">比率指定</h3>
+
+<p>多くの点で、パーセンテージは長さの単位のように機能<a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">し、値と単位に関するレッスンで説明したように、</a>多くの場合、長さと同じ意味で使用できます。パーセンテージを使用している場合、あなたはそれが<em>何に対する</em>比率であるかを認識する必要があります。別のコンテナー内のボックスの場合、子ボックスに幅のパーセンテージを与えると、親コンテナーの幅のパーセンテージになります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
+
+<p>これは、パーセンテージがそれを包含するブロックのサイズに対して解決されるためです。パーセンテージを適用しない <code>&lt;div&gt;</code> 場合、これはブロックレベルの要素であるため、使用可能なスペースの100％を占めます。パーセンテージの幅を指定すると、これは通常埋められるスペースに対するの比率になります。</p>
+
+<h3 id="Percentage_margins_and_padding" name="Percentage_margins_and_padding">マージンとパディングの比率</h3>
+
+<p>パーセンテージとして <code>margins</code> と <code>padding</code> を設定すると、奇妙な動作に気付く場合があります。以下の例では、ボックスがあります。内部ボックスに10％の {{cssxref("margin")}} と10％の {{cssxref("padding")}} を与えました。ボックスの上下の padding と margin は、左右の margin と同じサイズです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
+
+<p>例えば、上下のマージンのパーセンテージは要素の高さのパーセンテージであり、左右のマージンのパーセンテージは要素の幅のパーセンテージであると予想するかもしれません。しかし、そうではありません。</p>
+
+<p>マージンとパディングをパーセンテージで設定する場合、値は<strong>インラインサイズ</strong>から計算されます。したがって横書きの言語で作業するときの幅になります。この例では、マージンとパディングはすべて幅の10％です。つまり、ボックス全体で同じサイズのマージンとパディングを使用できます。この方法でパーセンテージを使用する場合、これは覚えておかなければならない事実です。</p>
+
+<h2 id="min-_and_max-_sizes" name="min-_and_max-_sizes">最小サイズ、最大サイズ</h2>
+
+<p>固定サイズを与えることに加えて、要素に最小サイズまたは最大サイズを与えるようCSSに要求できます。さまざまな量のコンテンツを含む可能性のあるボックスがあり、常に特定の高さ<em>以上</em>にしたい場合は、そのボックスに {{cssxref("min-height")}} プロパティを設定できます。ボックスは常にこの高さ以上になりますが、ボックスの最小高さでのスペースよりも多くのコンテンツがある場合は、ボックスの高さが高くなります。</p>
+
+<p>以下の例では、2つのボックスがあり、どちらも150ピクセルの高さが定義されています。左側のボックスの高さは150ピクセルです。右側のボックスには、より多くのスペースを必要とするコンテンツがあるため、150ピクセルよりも高くなっています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
+
+<p>これは、オーバーフローを回避しながら、可変量のコンテンツを処理するのに非常に役立ちます。</p>
+
+<p>{{cssxref("max-width")}} の一般的な用途は、固有の幅で表示するための十分なスペースがない場合に画像を縮小し、その幅よりも大きくならないようにすることです。</p>
+
+<p>例として、画像に <code>width: 100%</code> を設定する場合、その固有の幅がコンテナーよりも小さいと、画像は強制的に引き伸ばされて大きくなり、ピクセル化されたように見えます。固有の幅がコンテナーよりも大きい場合、オーバーフローします。どちらの場合も、あなたが起こりたいことではないでしょう。</p>
+
+<p>代わりに <code>max-width: 100%</code> を使用すると、画像は本来のサイズよりも小さくなりますが、サイズの100％で止まります。</p>
+
+<p>以下の例では、同じ画像を2回使用しています。最初の画像には <code>width: 100%</code> が指定されており、それよりも大きいコンテナー内にあるため、コンテナーの幅まで拡大されます。2番目の画像には <code>max-width: 100%</code> が設定されているため、コンテナを埋めるために引き伸ばされることはありません。3番目のボックスにも同じ画像が含まれており、 <code>max-width: 100%</code> も設定されています。この場合、ボックスに収まるように縮小された様子を確認できます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
+
+<p>この手法は、画像を<em>レスポンシブ</em>にするために使用されます。そのため、より小さなデバイスで表示すると、適切に縮小されます。ただし、この手法を使用して非常に大きな画像を読み込んでから、ブラウザで縮小するべきではありません。画像は、デザインに表示される最大サイズに必要なサイズよりも大きくならないように適切なサイズにするべきです。大きすぎる画像をダウンロードすると、サイトが遅くなり、ユーザーが従量制の接続を使用している場合は、より多くの費用がかかる可能性があります。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>：<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像技術の</a>詳細をご覧ください。</p>
+</div>
+
+<h2 id="Viewport_units" name="Viewport_units">ビューポートに関する単位</h2>
+
+<p>ビューポート（サイトの表示に使用しているブラウザーでのページの表示領域）にもサイズがあります。CSSには、ビューポートのサイズに関連する単位（ビューポートの幅 <code>vw</code> とビューポートの高さ <code>vh</code> ）があります。これらの単位を使用すると、ユーザーのビューポートを基準にしてサイズを変更できます。</p>
+
+<p><code>1vh</code> はビューポートの高さの1％に等しく、<code>1vw</code> はビューポートの幅の1％に等しい。これらの単位を使用して、ボックスだけでなくテキストのサイズも変更できます。以下の例では、20vh と 20vw のサイズのボックスがあります。ボックスには、 {{cssxref("font-size")}} が 10vh の文字 <code>A</code> が含まれています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
+
+<p><strong><code>vh</code> との <code>vw</code> 値を変更すると、ボックスまたはフォントのサイズが変更されます。ビューポートに相対的なサイズであるため、ビューポートのサイズを変更しても、サイズが変更されます。ビューポートのサイズを変更したときにサンプルの変更を確認するには、サイズを変更できる新しいブラウザーウィンドウにサンプルを読み込む必要があります（上記の例を含む埋め込み <code>&lt;iframe&gt;</code> がビューポートであるため）。<a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">サンプルを開き</a>、ブラウザウィンドウのサイズを変更して、ボックスとテキストのサイズがどうなるかを観察します。</strong></p>
+
+<p>ビューポートに応じてサイズを調整することは、デザインに役立ちます。例えば、全ページのヒーローセクション(hero section)を他のコンテンツの前に表示させたい場合、ページのその部分を100vhの高さにすると、残りのコンテンツはビューポートの下に押しやられてしまい、ドキュメントがスクロールされたときにのみ表示されます。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>このレッスンでは、Web上のサイズを決定するときに遭遇する可能性があるいくつかの重要な問題の概要を説明しました。<a href="/ja/docs/Learn/CSS/CSS_layout">CSSレイアウト</a>に移ると、さまざまなレイアウトメソッドを習得する際にサイズ設定が非常に重要になるため、先に進む前に、ここで概念を理解しておくことをお勧めします。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/styling_tables/index.html b/files/ja/learn/css/building_blocks/styling_tables/index.html
new file mode 100644
index 0000000000..9d3988ddf7
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/styling_tables/index.html
@@ -0,0 +1,316 @@
+---
+title: 表のスタイリング
+slug: Learn/CSS/Building_blocks/Styling_tables
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Guide
+  - Styling
+  - Tables
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+---
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p>
+
+<div></div>
+
+<p class="summary"><span class="seoSummary">HTML 表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。 この記事では、これまでに説明した機能のいくつかとともに、HTML 表を見栄え良くするためのガイドを提供します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）と <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 表</a> および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>HTML 表を効果的に装飾する方法を学ぶ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A_typical_HTML_table" name="A_typical_HTML_table">典型的な HTML 表</h2>
+
+<p>典型的な HTML 表を見ることから始めましょう。 まあ、典型的な言い方ですが、ほとんどの HTML 表の例は、靴、天気、あるいは従業員に関するものです。 私達はイギリスの有名なパンクバンドについてそれを作ることで、もっと面白くすることにしました。 マークアップはこんな感じです。</p>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;caption&gt;A summary of the UK's most famous punk bands&lt;/caption&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th scope="col"&gt;Band&lt;/th&gt;
+      &lt;th scope="col"&gt;Year formed&lt;/th&gt;
+      &lt;th scope="col"&gt;No. of Albums&lt;/th&gt;
+      &lt;th scope="col"&gt;Most famous song&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Buzzcocks&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;9&lt;/td&gt;
+      &lt;td&gt;Ever fallen in love (with someone you shouldn't've)&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Clash&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;6&lt;/td&gt;
+      &lt;td&gt;London Calling&lt;/td&gt;
+    &lt;/tr&gt;
+
+      ... 簡潔にするためにいくつかの行を削除
+
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Stranglers&lt;/th&gt;
+      &lt;td&gt;1974&lt;/td&gt;
+      &lt;td&gt;17&lt;/td&gt;
+      &lt;td&gt;No More Heroes&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;th scope="row" colspan="2"&gt;Total albums&lt;/th&gt;
+      &lt;td colspan="2"&gt;77&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+&lt;/table&gt;</pre>
+
+<p>{{htmlattrxref("scope","th")}}、{{htmlelement("caption")}}、{{htmlelement("thead")}}、{{htmlelement("tbody")}} などの機能のおかげで、表はうまくマークアップされ、簡単に装飾を整えられ、アクセスしやすくなりました。 残念なことに、画面に表示したときは見栄えがよくありません（<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a> でライブを見る）。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p>
+
+<p>それは窮屈に見え、読みにくく、そして退屈です。 これを修正するために CSS を使用する必要があります。</p>
+
+<h2 id="Active_learning_Styling_our_table" name="Active_learning_Styling_our_table">テーブルのスタイリング</h2>
+
+<p>テーブルの例を一緒にスタイリングしてみましょう。</p>
+
+<ol>
+ <li>まず始めに、<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">サンプルマークアップ</a>のローカルコピーを作成し、<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> と <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a> の両方の画像をダウンロードして、3つのファイルをローカルコンピュータのどこかの作業ディレクトリに配置します。</li>
+ <li>次に、<code>style.css</code> という名前の新しいファイルを作成し、他のファイルと同じディレクトリに保存します。</li>
+ <li>{{htmlelement("head")}} の内側に次の HTML 行を配置して、CSS を HTML にリンクします。
+  <pre class="brush: html notranslate">&lt;link href="style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+</ol>
+
+<h3 id="Spacing_and_layout" name="Spacing_and_layout">スペーシングとレイアウト</h3>
+
+<p>最初にすべきことは、スペーシングやレイアウトを整理することです — デフォルトの表の装飾はとても窮屈です！ これを行うには、<code>style.css</code> ファイルに次の CSS を追加します。</p>
+
+<pre class="brush: css notranslate">/* spacing */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}</pre>
+
+<p>注意すべき最も重要な部分は次のとおりです。</p>
+
+<ul>
+ <li>{{cssxref("table-layout")}} の値を <code>fixed</code> に設定すると、デフォルトで表の動作が多少予測しやすくなるため、通常は表に設定することをお勧めします。 通常、表の列は、含まれるコンテンツの量に応じてサイズが変更される傾向があり、これは奇妙な結果を生むことがあります。 <code>table-layout: fixed</code> を使うと、見出しの幅に応じてカラムのサイズを調整し、その内容を適切に処理することができます。そのために、<code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) セレクタ（<code>&lt;thead&gt;</code> 要素の中の <code>&lt;th&gt;</code> 要素で、シーケンス中の <em>n</em> 番目の子を選択する）で4つの異なる見出しを選択し、それらに設定されたパーセンテージの幅を与えています。列全体の幅はその見出しの幅に従うので、表の列のサイズを変更するのに適した方法です。 Chris Coyier は、このテクニックを <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a> でさらに詳しく説明しています。<br>
+  <br>
+  これは 100% の {{cssxref("width")}} と結合されています。 つまり、表は入れられているコンテナをすべて満たし、とてもレスポンシブになります（しかし、狭い画面幅で見栄えを良くするにはまだ作業が必要です）。</li>
+ <li>{{cssxref("border-collapse")}} の <code>collapse</code> の値は、あらゆる表の装飾の取り組みにおける標準的なベストプラクティスです。 デフォルトでは、下の画像に示すように、表要素に境界線を設定すると、境界線の間に間隔が空くことになります。<img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;"> これはあまり見栄えがよくありません（それはあなたが望む外観かもしれませんが、誰が知っていますか？）。 <code>border-collapse: collapse;</code> を設定すると、境界線は1つに折りたたまれ、次のようにずっと良く見えます。<img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li>
+ <li>表全体を囲むように {{cssxref("border")}} を付けています。 これは、後で表のヘッダーとフッターに境界線を付けるために必要です — 表の外側全体に境界線がなく、ギャップで終わる場合、それは本当に奇妙でまとまりのないものに見えます。</li>
+ <li>{{htmlelement("th")}} 要素と {{htmlelement("td")}} 要素に {{cssxref("padding")}} を設定しました。 これにより、データ項目に余裕を持たせることができ、表がもっと見やすくなります。</li>
+</ul>
+
+<p>この時点で、表はすでにずっと良く見えています。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Some_simple_typography" name="Some_simple_typography">簡単なタイポグラフィ</h3>
+
+<p>それでは、テキストを少し整理しましょう。</p>
+
+<p>まず第一に、パンクバンドについての表にふさわしいフォントを <a href="https://www.google.com/fonts">Google Fonts</a> で見つけてあります。 望むならそこに行って、別なものを探すことができます。私たちが提供する {{htmlelement("link")}} 要素とカスタムの {{cssxref("font-family")}} 宣言を Google Fonts が与えるものと置き換えるだけです。</p>
+
+<p>まず、HTML <code>head</code> の既存の {{htmlelement("link")}} 要素のすぐ上に、次の <code>&lt;link&gt;</code> 要素を追加します。</p>
+
+<pre class="brush: html notranslate">&lt;link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'&gt;</pre>
+
+<p>そして、<code>style.css</code> ファイルの以前の追加の下に、次の CSS を追加します。</p>
+
+<pre class="brush: css notranslate">/* typography */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}</pre>
+
+<p>ここに表に固有のものは何もありません。 読みやすくするために、次のようにフォントの装飾を調整しています。</p>
+
+<ul>
+ <li>グローバルなサンセリフのフォントスタックを設定しました。 これは純粋に装飾的な選択です。 また、素敵に汚れた、パンクな外観のために {{htmlelement("thead")}} 要素内の見出しと {{htmlelement("tfoot")}} 要素内の見出しにもカスタムフォントを設定しました。</li>
+ <li>読みやすくするために、見出しとセルに {{cssxref("letter-spacing")}} を設定しています。 繰り返しますが、主に装飾的な選択です。</li>
+ <li>{{htmlelement("tbody")}} 内の表セル内のテキストを見出しと揃えるように中央揃えにしました。 デフォルトでは、セルは {{cssxref("text-align")}} に <code>left</code> の値が与えられ、見出しは <code>center</code> の値が与えられますが、一般的には、両方の揃えを同じに設定する方が見栄えがよくなります。 見出しフォントのデフォルトの太字は、見た目を区別するのに十分です。</li>
+ <li>{{htmlelement("tfoot")}} 内の見出しは、データと視覚的に関連付けやすくなるように右揃えしています。</li>
+</ul>
+
+<p>結果は少しきれいに見えます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Graphics_and_colors" name="Graphics_and_colors">グラフィックスと色</h3>
+
+<p>今度はグラフィックと色です！ 表はパンクとその態度でいっぱいですので、それに合わせていくつかの明るい印象的な装飾を与える必要があります。 心配しないで、表をそんなに騒々しくする必要はありません — もっと微妙で上品な何かを選ぶことができます。</p>
+
+<p>次の CSS を <code>style.css</code> ファイルの一番下に再び追加してください。</p>
+
+<pre class="brush: css notranslate">thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+</pre>
+
+<p>繰り返しますが、ここでは表に固有のものは何もありませんが、いくつか注意することは価値があります。</p>
+
+<p>{{htmlelement("thead")}} と {{htmlelement("tfoot")}} に {{cssxref("background-image")}} を追加し、ヘッダー内とフッター内のすべてのテキストの {{cssxref("color")}} を白に変更して（そして {{cssxref("text-shadow")}} を指定して）読みやすくしています。 読みやすいように、テキストが背景と比べてコントラストがあるようにしてください。</p>
+
+<p>また、ヘッダー内とフッター内の {{htmlelement("th")}} 要素と {{htmlelement("td")}} 要素に線形グラデーションを追加して、テクスチャをきれいにし、それらの要素に明るい紫色の境界線を付けました。 複数のネストした要素を使用できるようにしておくと、スタイルを重ね合わせることができます。 はい、複数の背景画像を使用して {{htmlelement("thead")}} 要素と {{htmlelement("tfoot")}} 要素に背景画像と線形グラデーションの両方を配置することもできましたが、複数の背景画像や線形グラデーションをサポートしない古いブラウザーの利点のために別々に行うことにしました。</p>
+
+<h4 id="Zebra_striping" name="Zebra_striping">ゼブラストライピング</h4>
+
+<p><strong>ゼブラストライプ</strong>（zebra stripes）を実装する方法を示すために別のセクションを捧げたいと思います — 表のさまざまなデータ行を解析して読みやすくするために、行の色を交互に並べます。 <code>style.css</code> ファイルの一番下に次の CSS を追加します。</p>
+
+<pre class="brush: css notranslate">tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}</pre>
+
+<ul>
+ <li>先ほど、{{cssxref(":nth-child")}} セレクタが特定の子要素を選択するために使われていたのを見ました。 式をパラメータとして指定することもできるので、一連の要素を選択します。 式 <code>2n-1</code> はすべての奇数番号の子（1、3、5 など）を選択し、式 <code>2n</code> はすべての偶数番号の子（2、4、6 など）を選択します。 上のコードでは <code>odd</code> と <code>even</code> のキーワードを使っていますが、それは前述の式とまったく同じです。 この場合、奇数行と偶数行に異なる（けばけばしい）色を付けます。</li>
+ <li>また、すべての本体行に繰り返しの背景タイルを追加しました。 これは、テクスチャを提供するためのわずかなノイズです（視覚的な歪みが少しある半透明の <code>.png</code>）。</li>
+ <li>最後に、<code>:nth-child</code> セレクタをサポートしていないブラウザーでも本体行に背景があるように、表全体の背景色を単色にしました。</li>
+</ul>
+
+<p>この色の爆発により、以下のような見た目になります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p>
+
+<p>さて、これはあなたの好みではなく、少々限度を超えているかもしれませんが、ここで主張しようとしているのは、表が退屈で学術的である必要はないということです。</p>
+
+<h3 id="Styling_the_caption" name="Styling_the_caption">キャプションの装飾</h3>
+
+<p>表でやるべきことがもう一つあります — キャプションの装飾です。 これを行うには、<code>style.css</code> ファイルの一番下に次のコードを追加します。</p>
+
+<pre class="brush: css notranslate">caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}</pre>
+
+<p>{{cssxref("caption-side")}} プロパティに、<code>bottom</code> の値が与えられている以外に、ここで注目に値するものは何もありません。 これにより、キャプションは表の下に配置され、他の宣言と共にこの最終的な外観が得られます（<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a> でライブで見る）。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p>
+
+<h2 id="Table_styling_quick_tips" name="Table_styling_quick_tips">表の装飾のちょっとした助言</h2>
+
+<p>先に進む前に、上に示した最も有用なポイントの簡単なリストをお送りします。</p>
+
+<ul>
+ <li>表のマークアップをできる限り単純にし、物事を柔軟に保ちます。 例えば、パーセントを使用することによって、デザインはよりレスポンシブになります。</li>
+ <li>{{cssxref("table-layout")}}<code>: fixed</code> を使用すると、見出し（{{htmlelement("th")}}）の {{cssxref("width")}} を設定して列幅を簡単に設定でき、より予測可能な表レイアウトを作成できます。</li>
+ <li>{{cssxref("border-collapse")}}<code>: collapse</code> を使用して、表要素の境界線を互いに折りたたみ、見た目をよりきれいにして制御しやすくします。</li>
+ <li>{{htmlelement("thead")}}、{{htmlelement("tbody")}}、{{htmlelement("tfoot")}} を使用して表を論理的なまとまりに分割し、CSSを適用するための特別な場所を提供することで、必要に応じてスタイルを重ねることが容易になります。</li>
+ <li>行を読みやすくするために、ゼブラストライピングを使用します。</li>
+ <li>{{cssxref("text-align")}} を使用して、{{htmlelement("th")}} と {{htmlelement("td")}} のテキストを揃えることで、きれいにして見やすくします。</li>
+</ul>
+
+<h2 id="あなたのスキルをテストしてください！">あなたのスキルをテストしてください！</h2>
+
+<p>この記事では多くの情報を取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストをいくつか見つけることができます。<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Tables_tasks">Test your skills: tables</a> を参照してください。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>テーブルのスタイリングも終わりに近づいてきたので、他にも何か時間を割くものが必要になってきました。次の記事では、CSS をデバッグする方法を探ります。レイアウトが思うように見えない、プロパティが適用されないなどの問題を解決する方法です。これには、ブラウザの DevTools を使用して問題を解決する方法についての情報も含まれています。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/the_box_model/index.html b/files/ja/learn/css/building_blocks/the_box_model/index.html
new file mode 100644
index 0000000000..aca49d9dd1
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/the_box_model/index.html
@@ -0,0 +1,343 @@
+---
+title: ボックスモデル
+slug: Learn/CSS/Building_blocks/The_box_model
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - border
+  - box model
+  - display
+  - margin
+  - padding
+translation_of: Learn/CSS/Building_blocks/The_box_model
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>
+
+<p>CSS にはボックスの概念があり、これを理解することは CSS でレイアウトを作成したりアイテム同士を揃えたりするためのコツとなります。このレッスンでは CSS ボックスモデルを詳しく解説し、その仕組みと関連する用語を理解することでより複雑なレイアウトができるようにします。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>) および CSS に関するアイデア (<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>) に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>CSS のボックスモデルとその構成要素、代替モデルへの切り替えについて学ぶ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Block_and_inline_boxes" name="Block_and_inline_boxes">ブロックボックスとインラインボックス</h2>
+
+<p>CSS には、<strong>ブロックボックス</strong>と<strong>インラインボックス</strong>の 2 種類のボックスがあります。これらの特性は、ページフローの観点から、およびページ上の他のボックスとの関係でボックスがどのように動作するかを示します。</p>
+
+<p>ボックスがブロックとして定義されている場合、次のように動作します:</p>
+
+<ul>
+ <li>ボックスはインライン方向に伸びて、コンテナで使用可能なスペースを埋めます。 ほとんどの場合、これは、ボックスが container と同じ幅になり、使用可能なスペースの 100% を占めることを意味します。</li>
+ <li>ボックスは新しい行に分割されます。</li>
+ <li>{{cssxref("width")}} と {{cssxref("height")}} のプロパティが尊重されます。</li>
+ <li>padding、margin および border により、他の要素がボックスから遠ざけられます。</li>
+</ul>
+
+<p>表示タイプをインラインに変更することを決定しない限り、デフォルトでは見出し (例: <code>&lt;h1&gt;</code>) や <code>&lt;p&gt;</code> などの要素はすべて外部表示タイプとして <code>block</code> を使用します。</p>
+
+<p>ボックスの外側の表示タイプが <code>inline</code> の場合:</p>
+
+<ul>
+ <li>ボックスは改行されません。</li>
+ <li>{{cssxref("width")}} と {{cssxref("height")}} のプロパティは適用されません。</li>
+ <li>padding、margin および border が適用されますが、他のインラインボックスがボックスから移動することはありません。</li>
+</ul>
+
+<p>リンクに使用される <code>&lt;a&gt;</code> 要素や、<code>&lt;span&gt;</code>、<code>&lt;em&gt;</code> および <code>&lt;strong&gt;</code> はすべて、デフォルトではインラインで表示される要素の例です。</p>
+
+<p>要素に適用されるボックスのタイプは、<code>block</code> や <code>inline</code> などの {{cssxref("display")}} プロパティ値によって定義され、<code>display</code> の<strong>外側</strong>の値に関連します。</p>
+
+<h2 id="Aside_Inner_and_outer_display_types" name="Aside_Inner_and_outer_display_types">余談: 内側と外側の表示タイプ</h2>
+
+<p>この時点で、<strong>内側</strong>と<strong>外側</strong>の表示タイプについても説明するべきでしょう。上記のように、CSS のボックスには<em>外側</em>の表示タイプがあり、ボックスがブロックかインラインかを詳細に示します。</p>
+
+<p>ただし、ボックスには内部表示タイプもあり、これにより、そのボックス内の要素のレイアウト方法が決まります。デフォルトでは、ボックス内の要素は<strong><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常のフロー</a></strong>でレイアウトされます。つまり、他のブロック要素やインライン要素と同じように動作します（上記で説明したように）。</p>
+
+<p>ただし、<code>flex</code> などの <code>display</code> の値を使用して、内部の表示タイプを変更できます。要素に <code>display: flex;</code> を設定する場合、外側の表示タイプは <code>block</code> ですが、内側の表示タイプは <code>flex</code> に変更されます。このボックスの直接の子要素はすべてフレックスアイテムになり、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> 仕様で規定されているルールに従ってレイアウトされます。これについては後で学習します。</p>
+
+<div class="blockIndicator note">
+<p>注：ディスプレイの値、およびブロックおよびインラインレイアウトでのボックスの動作の詳細については、<a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">ブロックおよびインラインレイアウト</a>に関する MDN ガイドを参照してください。 　</p>
+</div>
+
+<p>CSS レイアウトについてさらに詳しく学習すると、<code>flex</code> や、例えば <code><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">grid</a></code> のようなボックスに設定できる他のさまざまな内部の値と出会うでしょう。</p>
+
+<p>ただし、ブロックおよびインラインレイアウトは、ウェブ上のデフォルトの動作です。前述のように、<em>通常のフロー</em>と呼ばれることもあります。他の指示がない場合、ボックスはブロックまたはインラインボックスとしてレイアウトされるためです。</p>
+
+<h2 id="Examples_of_different_display_types" name="Examples_of_different_display_types">さまざまな表示タイプの例</h2>
+
+<p>次に進み、いくつかの例を見てみましょう。以下に、3 つの異なる HTML 要素があります。これらはすべて、外部表示タイプの <code>block</code> を持っています。1 つ目は段落で、CSS で border が追加されています。ブラウザーはこれを block box としてレンダリングするため、段落は新しい行で始まり、利用可能な全幅に拡張されます。</p>
+
+<p>2 番目はリストで、これは <code>display：flex</code> を使用してレイアウトされます。これにより、コンテナ内のアイテムのフレックスレイアウトが確立されますが、リスト自体は block boxであり、段落と同様に、container の幅いっぱいに拡張され、新しい行に分割されます。</p>
+
+<p>この下にブロックレベルの段落があり、その中に 2 つの <code>&lt;span&gt;</code> 要素があります。通常、これらの要素は <code>inline</code> ですが、要素の 1 つにブロックのクラスがあり、<code>display: block</code> に設定しました。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}}</p>
+
+<p>この次の例では、<code>inline</code> 要素の動作を確認できます。最初の段落の <code>&lt;span&gt;</code> はデフォルトではインラインのため、強制的に改行しません。</p>
+
+<p>また、<code>display: inline-flex</code> に設定された <code>&lt;ul&gt;</code> 要素があり、一部の flex アイテムの周りにインラインボックスを作成します。</p>
+
+<p>最後に、<code>display: inline</code> に設定された 2 つの段落があります。inline flex container と段落はすべて、ブロックレベルの要素として表示されている場合のように新しい行に分割されるのではなく、1 行で一緒に実行されます。</p>
+
+<p><strong>この例では、<code>display: inline</code> を <code>display: block</code> に、または<code>display: inline-flex</code> を <code>display: flex</code> に変更して、これらの表示モードの間を切り替えられます。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}</p>
+
+<p>これらのレッスンの後半では、フレックスレイアウトなどの問題と出会います。現時点で覚えておくべき重要な点は、<code>display</code> プロパティの値を変更すると、ボックスの外側の表示タイプがブロックかインラインかを変更できるため、レイアウト内の他の要素と一緒に表示する方法が変わることです。</p>
+
+<p>レッスンの残りの部分では、外側のディスプレイタイプに集中します。</p>
+
+<h2 id="What_is_the_CSS_box_model" name="What_is_the_CSS_box_model">CSS のボックスモデルとは？</h2>
+
+<p>完全な CSS ボックスモデルはブロックボックスに適用され、インラインボックスはボックスモデルで定義された動作の一部のみを使用します。 モデルは、ボックスのさまざまな部分 (マージン、ボーダー、パディング、コンテンツ) がどのように連携してページに表示できるボックスを作成するかを定義します。 さらに複雑さを追加するために、標準および代替ボックスモデルがあります。</p>
+
+<h3 id="Parts_of_a_box" name="Parts_of_a_box">ボックスの構成</h3>
+
+<p>CSSでブロックボックスを構成するには、次のものがあります。</p>
+
+<ul>
+ <li><strong>Content box</strong>: コンテンツが表示される領域。{{cssxref ("width")}} や {{cssxref("height")}} などのプロパティを使用してサイズを変更できます。</li>
+ <li><strong>Padding box</strong>: パディングはコンテンツの周囲に空白として配置されます。 そのサイズは {{cssxref ("padding")}} および関連するプロパティを使用して制御できます。</li>
+ <li><strong>Border box</strong>: 境界ボックスは、コンテンツとパディングをラップします。そのサイズとスタイルは、{{cssxref ("border")}} および関連するプロパティを使用して制御できます。</li>
+ <li><strong>Margin box</strong>: マージンは最も外側のレイヤーで、このボックスと他の要素の間の空白としてコンテンツ、パディング、および境界線をラップします。そのサイズは、{{cssxref ("margin")}} および関連するプロパティを使用して制御できます。</li>
+</ul>
+
+<p>以下の図は、これらのレイヤーを示しています:<img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<h3 id="The_standard_CSS_box_model" name="The_standard_CSS_box_model">CSS ボックスモデルの標準</h3>
+
+<p>標準のボックスモデルでは、ボックスに <code>width</code> と <code>height</code> を指定すると、<em>コンテンツボックス</em>の幅と高さが定義されます。 次に、すべての padding と border がその幅と高さに追加され、ボックスが占める合計サイズが取得されます。 これを下の画像に示します。</p>
+
+<p>ボックスに <code>width</code>、<code>height</code>、<code>margin</code>、<code>border</code> および <code>padding</code> を定義する次の CSS があると仮定した場合:</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 350px;
+  height: 150px;
+  margin: 25px;
+  padding: 25px;
+  border: 5px solid black;
+}
+</pre>
+
+<p>標準のボックスモデルを使用してボックスが占めるスペースは、実際には 410px (350 + 25 + 25 + 5 + 5) で、高さは 210px (150 + 25 + 25 + 5 + 5) であり、padding と border は コンテンツボックスに使用される幅に追加されます。<img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> マージンは、ボックスの実際のサイズにはカウントされません。確かに、ボックスがページ上で占める合計スペースに影響しますが、ボックスの外側のスペースにのみ影響します。ボックスの領域は境界線で停止します—マージンまでは達しません。</p>
+</div>
+
+<h3 id="The_alternative_CSS_box_model" name="The_alternative_CSS_box_model">CSS ボックスモデルの代替</h3>
+
+<p>ボックスの実際のサイズを取得するために border と padding を追加する必要があるのはかなり不便だと思うかもしれませんが、正しい感覚でしょう！このため、CSS には、標準ボックスモデルのしばらく後に導入された代替ボックスモデルがありました。このモデルを使用すると、幅はページ上の表示ボックスの幅になるため、コンテンツ領域の幅は、その幅からパディングとボーダーの幅を引いたものになります。上記と同じ CSS を使用すると、以下の結果が得られます (幅 = 350px、高さ = 150px)。</p>
+
+<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p>
+
+<p>デフォルトでは、ブラウザーは、標準のボックスモデルを使用します。もし要素に対して代替モデルをオンにしたい場合は、<code>box-sizing: border-box</code> を設定することでそうできます。これにより、設定した任意のサイズで定義された領域として境界ボックスを取るようにブラウザーに指示しています。</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  box-sizing: border-box;
+} </code></pre>
+
+<p>すべての要素で代替ボックスモデルを使用することを望み、かつこれが開発者の間で一般的な選択である場合、以下のスニペットで見られるように、<code>&lt;html&gt;</code> 要素で <code>box-sizing</code> プロパティを設定して、他のすべての要素でその値を継承するように設定してください。この背景にある考え方を理解したい場合は、<a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">ボックスサイズ設定に関する CSS トリック</a>の記事を参照してください。</p>
+
+<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 興味深い歴史 — Internet Explorer は以前は代替ボックスモデルにデフォルト設定されていましたが、切り替え可能なメカニズムはありませんでした。</p>
+</div>
+
+<h2 id="Playing_with_box_models" name="Playing_with_box_models">ボックスモデルを試してみる</h2>
+
+<p>以下の例では、2 つのボックスを見ることができます。両方とも <code>.box</code> のクラスを持ち、同じ <code>width</code>、<code>height</code>、<code>margin</code>、<code>border</code>、および<code>padding</code> を提供します。唯一の違いは、2 番目のボックスが代替ボックスモデルを使用するように設定されていることです。</p>
+
+<p><strong>2 番目のボックスのサイズを変更 (<code>.alternate</code> クラスに CSS を追加) して、幅と高さを最初のボックスに一致させることはできますか？</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">ここ</a>でこのタスクの解決策を見つけることができます。</p>
+</div>
+
+<h3 id="Use_browser_DevTools_to_view_the_box_model" name="Use_browser_DevTools_to_view_the_box_model">ブラウザーの開発ツールを利用して、ボックスモデルを見てみる</h3>
+
+<p><a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発ツール</a>を使用すると、ボックスモデルをとても簡単に理解できます。Firefox の DevTools で要素を調べると、要素のサイズに加えて、margin、padding、border を確認できます。 この方法で要素を検査することは、あなたのボックスが本当にあなたが思っているサイズであるかどうかを知る素晴らしい方法です！</p>
+
+<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p>
+
+<h2 id="Margins_padding_and_borders" name="Margins_padding_and_borders">Margins、padding および borders</h2>
+
+<p>上記の例では、{{cssxref ("margin") }}、{{cssxref ("padding") }} および{{cssxref ("border") }} のプロパティが動作しているのを見てきました。 この例で使用されるプロパティは <strong>shorthands</strong> であり、ボックスの 4 辺すべてを一度に設定できます。これらの shorthands には、同等の longhand プロパティもあり、ボックスのさまざまな側面を個別に制御できます。</p>
+
+<p>これらのプロパティをさらに詳しく見てみましょう。</p>
+
+<h3 id="Margin" name="Margin">マージン</h3>
+
+<p>マージンは、ボックスの周りの見えないスペースです。 他の要素をボックスから遠ざけます。 マージンには正または負の値を設定できます。 ボックスの片側に負のマージンを設定すると、ページ上の他の部分と重なる場合があります。 標準または代替のボックスモデルを使用しているかどうかにかかわらず、表示ボックスのサイズが計算された後、マージンは常に追加されます。</p>
+
+<p>{{cssxref ("margin") }} プロパティを使用して要素のすべてのマージンを一度に制御するか、同等の longhand properties を使用して各辺を個別に制御できます。</p>
+
+<ul>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+</ul>
+
+<p><strong>次の例では、マージン値を変更して、この要素と含まれる要素の間のスペース (負のマージンの場合) を作成または削除するマージンのためにボックスがどのように押し出されるかを確認してください。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}}</p>
+
+<h4 id="Margin_collapsing" name="Margin_collapsing">マージンの相殺</h4>
+
+<p>マージンについて理解する重要なことは、マージンの相殺の概念です。 マージンが接する 2 つの要素が あり、両方のマージンが正の場合、それらのマージンは結合して 1 つのマージンになります。これは、個々のマージンのうちの最大サイズです。一方または両方のマージンが負の場合、負の値の量が合計から差し引かれます。</p>
+
+<p>以下の例では、2 つの段落があります。 上の段落には、50 ピクセルの <code>margin-bottom</code> があります。2 番目の段落の <code>margin-top</code> は 30 ピクセルです。マージンは一緒に折りたたまれているため、ボックス間の実際のマージンは 50 ピクセルであり、2 つのマージンの合計ではありません。</p>
+
+<p><strong>これをテストするには、第二段落の <code>margin-top</code> を 0 に設定します。2 つの段落間のマージンは変更されません。第一段落の <code>margin-bottom</code> に設定された 50 ピクセルを保持します。-10pxに設定すると、全体のマージンが40pxになることがわかります— 50pxから差し引かれま</strong>す。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}}</p>
+
+<p>マージンが相殺される場合と相殺されない場合を規定する多くのルールがあります。 詳細については、<a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺</a>に関する詳細ページをご覧ください。現時点で覚えておくべき主なことは、マージンの相殺が起こることです。マージンによるスペースを作成していて、期待したスペースが得られない場合、おそらくこれが起こっています。</p>
+
+<h3 id="Borders" name="Borders">Borders</h3>
+
+<p>border は、ボックスの margin と padding の間に描かれます。標準ボックスモデルを使用している場合、border のサイズがボックスの <code>width</code> と <code>height</code> に追加されます。代替ボックスモデルを使用している場合、border のサイズが利用可能な <code>width</code> と <code>height</code> の一部を占めるため、コンテンツボックスが小さくなります。</p>
+
+<p>border のスタイル設定には、多数のプロパティがあります。4 つの border があり、各 border には、操作したいスタイル、width、color があります。</p>
+
+<p>{{cssxref("border")}} プロパティを使用して、4 つすべての border の width、color およびスタイルを一度に設定できます。</p>
+
+<p>各辺のスタイルを個別に設定するには、次を使用できます:</p>
+
+<ul>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+</ul>
+
+<p>すべての辺の幅、スタイル、色を設定するには、次を使用します:</p>
+
+<ul>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+</ul>
+
+<p>片側の色、スタイル、または width を設定するには、最もきめ細かい longhand プロパティのいずれかを使用できます:</p>
+
+<ul>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+</ul>
+
+<p><strong>以下の例では、さまざまなショートハンドとロングハンドを使用して border を作成しています。 さまざまなプロパティを試して、それらがどのように機能するか理解していることを確認してください。border プロパティの MDN ページには、選択可能なさまざまな border スタイルに関する情報が表示されます。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}}</p>
+
+<h3 id="Padding" name="Padding">パディング</h3>
+
+<p>padding は、border とコンテンツ領域の間にあります。margin とは異なり、負の量の padding はできないため、値は 0 または正の値でなければなりません。要素に適用された背景は padding の背後に表示され、通常は border からコンテンツ遠ざけるために使用されます。</p>
+
+<p>{{cssxref("padding")}} プロパティを使用して要素の各側の padding を個別に制御するか、同等のロングハンドプロパティを使用して各側を個別に制御できます。</p>
+
+<ul>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+</ul>
+
+<p><strong>以下の例で <code>.box</code> クラスの padding の値を変更すると、ボックスに関連してテキストの開始位置が変わることがわかります。</strong></p>
+
+<p><strong><code>.container</code> クラスの padding を変更することもできます。これにより、container とボックスの間にスペースができます。padding は任意の要素で変更でき、border と要素内にあるものとの間にスペースを作ります。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}}</p>
+
+<h2 id="The_box_model_and_inline_boxes" name="The_box_model_and_inline_boxes">ボックスモデルとインラインボックス</h2>
+
+<p>上記のすべては、ブロックボックスに完全に適用されます。一部のプロパティは<code>&lt;span&gt;</code> 要素によって作成されたものなどの、インラインボックスにも適用できます。</p>
+
+<p>以下の例では、段落内に <code>&lt;span&gt;</code> があり、<code>width</code>、<code>height</code>、<code>margin</code>、<code>border</code> および <code>padding</code> が適用されています。width と height が無視されていることがわかります。マージン、パディング、ボーダーは尊重されますが、他のコンテンツとインラインボックスの関係は変わらないため、パディングとボーダーは段落内の他の単語と重なります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}}</p>
+
+<h2 id="Using_display_inline-block" name="Using_display_inline-block">display: inline-block を使用する</h2>
+
+<p><code>display</code> には特別な値があり、<code>inline</code> と <code>block</code> の中間に位置するものを提供します。これは、アイテムを新しい行に分割したくないが、<code>width</code> と <code>height</code> を尊重し、上記の上書きを避けたい場合に便利です。</p>
+
+<p><code>display: inline-block</code> を持つ要素は、私たちがすでに知っているブロックのサブセットを実行します:</p>
+
+<ul>
+ <li><code>width</code> と <code>height</code> のプロパティが尊重されます。</li>
+ <li>padding、margin、および border により、他の要素がボックスから遠ざけられます。</li>
+</ul>
+
+<p>ただし、新しい行に分割されることはなく、<code>width</code> プロパティと <code>height</code> プロパティを明示的に追加した場合にのみ、コンテンツよりも大きくなります。</p>
+
+<p><strong>次の例では、<code>&lt;span&gt;</code> 要素に <code>display: inline-block</code> を追加しました。これを</strong> <strong><code>display: block</code> </strong> <strong>変更したり、行を完全に削除したりして、表示モデルの違いを確認してください。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}}</p>
+
+<p>これが役立つのは、padding を追加して、リンクのヒット領域を大きくしたい場合です。<code>&lt;a&gt;</code> は <code>&lt;span&gt;</code> のようなインライン要素です。 <code>display：inline-block</code> を使用して padding を設定できるようにし、ユーザーがリンクをクリックしやすくします。</p>
+
+<p>これはナビゲーションバーにかなり頻繁に表示されます。以下のナビゲーションは、flexbox を使用して行に表示され、<code>&lt;a&gt;</code> にカーソルを合わせたときに背景色を変更できるように、<code>&lt;a&gt;</code> 要素に padding を追加しました。paddingは、<code>&lt;ul&gt;</code> 要素の border に重なるように見えます。これは、<code>&lt;a&gt;</code>がインライン要素であるためです。</p>
+
+<p><strong><code>display: inline-block</code> を <code>.links-list a</code> セレクターを使用してルールに追加すると、padding が他の要素によって尊重されるようにすることで、この問題がどのように修正されるかがわかります。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>以上が、ボックスモデルについて理解する必要があるほとんどのことです。レイアウト内の大きなボックスの大きさについて混乱している場合は、このレッスンに戻ってください。</p>
+
+<p>次のレッスンでは<a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景とボーダー</a>を使用してプレーンボックスをより面白くする方法を見ていきます。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し (オーバーフロー)</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/building_blocks/values_and_units/index.html b/files/ja/learn/css/building_blocks/values_and_units/index.html
new file mode 100644
index 0000000000..1ebb091ee2
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/values_and_units/index.html
@@ -0,0 +1,407 @@
+---
+title: CSS の値と単位
+slug: Learn/CSS/Building_blocks/Values_and_units
+tags:
+  - Beginner
+  - CSS
+  - Function
+  - Image
+  - Learn
+  - Number
+  - Position
+  - color
+  - length
+  - percentage
+  - units
+  - values
+translation_of: Learn/CSS/Building_blocks/Values_and_units
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div>
+
+<p><font>CSS で使用されるすべてのプロパティには、特定の値または組み合わせのみが許可されており、MDN の各プロパティに関するページでは有効な値を理解するのに役立ちます。このレッスンでは、もっとも一般的な値と単位について見ていきます。</font></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS の動作概念（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>CSS プロパティで使用されるさまざまな種類の値と単位について学ぶ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_is_a_CSS_value" name="What_is_a_CSS_value">CSS での値とは？</h2>
+
+<p>CSS の仕様や MDN のプロパティページでは、<code>&lt;color&gt;</code> や <code>&lt;length&gt;</code> のような角括弧で囲まれた値を見つけることができます。<code>&lt;color&gt;</code> の値がその特定のプロパティとして妥当なとき、ここではそのプロパティの妥当な色を表していることを意味しています。具体的な値は <code><a href="/ja/docs/Web/CSS/color_value">&lt;color&gt;</a></code> のリファレンスページを参照してください。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <em>データタイプ </em>を参照する CSS の値を確認しましょう。これは、基本的に交換可能です — データタイプとして参照する、CSS であなたが見るものは装飾のための値を示しています。</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>:  CSS の値は&lt;&gt;括弧で示すことが多く、CSS のプロパティによって違います(例えば{{cssxref("color")}} プロパティや <a href="/ja/docs/Web/CSS/color_value">&lt;color&gt;</a> データタイプがあります)。CSS のデータタイプ型と HTML の要素は違いますので、混乱しないでください。両方とも&lt;&gt;括弧を使います　— しかしそれらを使用するコンテキストは全く異なります。</p>
+</div>
+
+<p>次の例では、キーワードを使用して章立ての色を設定し、かつ背景色を <code>rgb()</code> 関数を使って指定します。:</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} </code>
+</pre>
+
+<p>CSS の値は指定可能なサブ値の集合を定義します。これは、<code>&lt;color&gt;</code> が妥当な箇所では、異なる種類の色の値、キーワード、16進数、<code>rgb()</code> 関数などで設定できるかどうか考える必要はありません。あなたのブラウザーがサポートしていると仮定できる、<em>あらゆる</em> 利用可能な <code>&lt;color&gt;</code> の値が指定できます。MDN のページはそれぞれのブラウザーがサポートしている値の情報を提供します。例えば、<code><a href="/ja/docs/Web/CSS/color_value">&lt;color&gt;</a></code> のページには、ブラウザーの互換性のセクションがあり、サポートされているそれぞれの種類を見られます。</p>
+
+<p>ここでは見ることが多いいくつかのタイプの値や単位を確認しましょう。また例のさまざまな値を変えて試しましょう。</p>
+
+<h2 id="Numbers_lengths_and_percentages" name="Numbers_lengths_and_percentages">数値・長さ・割合</h2>
+
+<p>CSS では数値データ型をいくつかみるでしょう。次のものは数値に分類されています。:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">データタイプ</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/ja/docs/Web/CSS/integer">&lt;integer&gt;</a></code></td>
+   <td><code>&lt;integer&gt;</code> (整数)は、<code>1024</code> や <code>-55</code> のようなすべての整数です。</td>
+  </tr>
+  <tr>
+   <td><code><a href="/ja/docs/Web/CSS/number">&lt;number&gt;</a></code></td>
+   <td><code>&lt;number&gt;</code> (数)は 10進数です。小数点のあるものとないものがあります。例えば、<code>0.255</code>、<code>128</code> や <code>-1.2</code> です。</td>
+  </tr>
+  <tr>
+   <td><code>&lt;dimension&gt;</code></td>
+   <td><code>&lt;dimension&gt;</code> (寸法)は <code>&lt;number&gt;</code> に付属するものです。例えば、<code>45deg</code>, <code>5s</code>, それに <code>10px</code> です。<code>&lt;dimension&gt;</code> には <code><a href="/ja/docs/Web/CSS/length">&lt;length&gt;</a></code> (長さ), <code><a href="/ja/docs/Web/CSS/angle">&lt;angle&gt;</a></code> (角度), <code><a href="/ja/docs/Web/CSS/time">&lt;time&gt;</a></code> (時間), さらに <code><a href="/ja/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> (解像度)型があります。<a href="/ja/docs/Web/CSS/resolution">.</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/ja/docs/Web/CSS/percentage">&lt;percentage&gt;</a></code></td>
+   <td><code>&lt;percentage&gt;</code> (パーセント)は他の値との割合を表します。例えば、<code>50%</code>. この値は常に他の量との相対比です。例えば、ある要素の長さは、その親要素の長さが関連しています。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Lengths" name="Lengths">Lengths(長さ)</h3>
+
+<p>数値型でもっともよく遭遇するのは、<code>&lt;length&gt;</code>です。例えば、<code>10px</code> (ピクセル) や <code>30em</code> です。CSS で使用される長さの種類は二つに分けられます。relative(相対)と absolute(絶対)です。この違いを理解することは非常に重大です。</p>
+
+<h4 id="Absolute_length_units" name="Absolute_length_units">絶対長の単位</h4>
+
+<p>次の単位はすべて <strong>absolute</strong> length units(絶対的な長さの単位) です。この単位は、他の長さとの関係で決まりません。一般的にこの単位は常に同じサイズと考えられます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unit</th>
+   <th scope="col">名前</th>
+   <th scope="col">換算</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cm</code></td>
+   <td>Centimeters センチメートル</td>
+   <td>1cm = 96px/2.54</td>
+  </tr>
+  <tr>
+   <td><code>mm</code></td>
+   <td>Millimeters ミリメートル</td>
+   <td>1mm = 1/10 cm</td>
+  </tr>
+  <tr>
+   <td><code>Q</code></td>
+   <td>Quarter-millimeters 1/4 ミリメートル</td>
+   <td>1Q = 1/40 1cm</td>
+  </tr>
+  <tr>
+   <td><code>in</code></td>
+   <td>Inches インチ</td>
+   <td>1in = 2.54cm = 96px</td>
+  </tr>
+  <tr>
+   <td><code>pc</code></td>
+   <td>Picas パイカ</td>
+   <td>1pc = 1in の 1/6</td>
+  </tr>
+  <tr>
+   <td><code>pt</code></td>
+   <td>Points ポイント</td>
+   <td>1pt = 1in の 1/72</td>
+  </tr>
+  <tr>
+   <td><code>px</code></td>
+   <td>Pixels ピクセル</td>
+   <td>1px =  1in の 1/96</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>これらの値は印刷には便利ですが、画面出力には向いていません。私たちは、スクリーン上の長さに、例えば <code>cm</code> (センチメートル)を使いません。よく使用するのは <code>px</code> (pixels/ピクセル)になります。</p>
+
+<h4 id="Relative_length_units" name="Relative_length_units">相対長の単位</h4>
+
+<p>Relative length units (相対的な長さの単位) は、何かとの比較によってサイズが決まります。それは、例えば、親要素のフォントサイズかもしれませんし、ビューポート(画面幅)かもしれません。この相対的な長さ単位はが便利なのは、それを作成するときにいくつかの点に注意して、そのページ内のテキストのサイズや他の要素の相対的なサイズで作成したときです。次の表にウェブ開発で便利な単位を紹介します。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unit</th>
+   <th scope="col">関係先</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>em</code></td>
+   <td>親要素のフォントサイズ.</td>
+  </tr>
+  <tr>
+   <td><code>ex</code></td>
+   <td>その要素のフォントの文字 "x" の高さ</td>
+  </tr>
+  <tr>
+   <td><code>ch</code></td>
+   <td>その要素のフォントの文字 "0" の幅</td>
+  </tr>
+  <tr>
+   <td><code>rem</code></td>
+   <td>ルート要素のフォントサイズ</td>
+  </tr>
+  <tr>
+   <td><code>lh</code></td>
+   <td>その要素の line-hight プロパティと同じ</td>
+  </tr>
+  <tr>
+   <td><code>vw</code></td>
+   <td>ビューポート幅の 1%</td>
+  </tr>
+  <tr>
+   <td><code>vh</code></td>
+   <td>ビューポート高さの 1%</td>
+  </tr>
+  <tr>
+   <td><code>vmin</code></td>
+   <td>ビューポート幅と高さの小さい方の 1%</td>
+  </tr>
+  <tr>
+   <td><code>vmax</code></td>
+   <td>ビューポート幅と高さの大きい方の 1%</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Exploring_an_example" name="Exploring_an_example">試してみる</h4>
+
+<p>次の例で、絶対的な長さの単位と相対的な長さの単位の振る舞いの違いを確認しましょう。最初のボックスには {{cssxref("width")}} がピクセル単位で指定されています。 <span class="tlid-translation translation" lang="ja"><span title="">絶対単位なので、この幅は他の何が変わっても同じままです。</span></span></p>
+
+<p>二番目のボックスは相対的な長さの単位の、ビューポート幅に関連した <code>vw</code> を使用しています。この値は、ビューポート幅と関連しており、10vw は ビューポート幅の 10% にあたります。もしブラウザー幅を変化させた場合、このボックスのサイズは変化します。しかし、このページは <code><a href="/ja/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code> に埋め込んであるため、次の例は動作しません。この動作を確認するには、<a href="https://mdn.github.io/css-examples/learn/values-units/length.html">このリンクをブラウザーの別タブで開いて、例を確認してください。</a></p>
+
+<p>三番目のボックスは <code>em</code> 単位を使います。この単位はフォントサイズに関連しています。<code>1em</code> にあたるフォントサイズ設定は {{htmlelement("div")}}で指定してあります。これは<code>.wrapper</code> クラスがあります。 <span class="tlid-translation translation" lang="ja"><span title="">この値を1.5emに変更すると、すべての要素のフォントサイズが増加しますが、最後の項目のみ width がフォントサイズに相対的であるため、最後の項目のみが広くなります。</span></span></p>
+
+<p>上の手順を行った後で、これらの値を変更してどのようにふるまうかを確認してください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p>
+
+<h4 id="ems_and_rems" name="ems_and_rems">em と rem</h4>
+
+<p><code>em</code> と <code>rem</code> は開発者がボックスやテキストまですべてのサイズを変更するときによく遭遇する相対的な長さの単位です。これらがどのように動作するか、どのように違いがあるかを理解しましょう。特に<a href="/ja/docs/Learn/CSS/Styling_text">スタイルテキスト</a> や <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>のようなより複雑なテーマを扱うようになったときに価値があります。以下の例は、デモを提供しています。</p>
+
+<p>この HTML はネストしたリストの組です。全部で 3 つのリストがあり、どちらも同じ HTML です。唯一異なるのは、最初のものは <em>ems </em>クラスを持っており、二つ目のものは <em>rems</em> クラスを持っていることです。</p>
+
+<p>始めるにあたって、<code>&lt;html&gt;</code> 要素のフォントサイズを 16px に指定しました。</p>
+
+<p><strong>要約すると、em 単位は活字で言えば「私の親要素のフォントサイズ」を意味します。</strong><code>ems</code> の <code>class</code> を持つ {{htmlelement("ul")}} 内の {{htmlelement("li")}} 要素は、親要素からサイズを受け取ります。そのため、入れ子の各レベルは、それぞれのフォントサイズが <code>1.3em</code> (親のフォントサイズの1.3倍)に設定されているため、徐々に大きくなっていきます。</p>
+
+<p><strong>要約すると、この rem 単位は活字でいえば、「ルート要素のフォントサイズ」を意味します。</strong>(rem は"root em"を意味します) この <code>rems</code> の <code>class</code> を持つ {{htmlelement("ul")}} の内部の {{htmlelement("li")}} 要素はルート要素(<code>&lt;html&gt;</code>)からサイズ情報を取得します。 これは、ネストの各レベルが大きくなり続けないことを意味します。</p>
+
+<div title="ただし、CSSで&lt;html> font-sizeを変更すると、その他のすべて（remサイズとemサイズの両方のテキスト）が相対的に変更されることがわかります。">ただし、CSSで <code>&lt;html&gt;</code> の <code>font-size</code> を変更すると、その他のすべて（ <code>rem</code> サイズと <code>em</code> サイズの両方のテキスト）が相対的に変更されることがわかります。</div>
+
+<div title="ただし、CSSで&lt;html> font-sizeを変更すると、その他のすべて（remサイズとemサイズの両方のテキスト）が相対的に変更されることがわかります。"></div>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p>
+
+<h3 id="Percentages" name="Percentages">Percentages(パーセント)</h3>
+
+<p>多くの場合、percentage (パーセント)は length(長さ)と同じ方法で使用します。percentages のあるものは、ある他の値との相対的な値を設定します。例えば、あなたがある要素の <code>font-size</code> に percentage を設定した場合、その親要素の <code>font-size</code> のパーセントを意味します。もしある <code>width</code> の値に percentage を使用した場合、その親要素の <code>width</code> のパーセントに設定されます。</p>
+
+<p>次の例では二つのパーセントでサイズ指定したボックスと、ピクセルでサイズ指定したボックスがあり、これらはそれぞれ同じクラス名を持っています。これは、それぞれ 200px と 40% の幅に設定されています。</p>
+
+<p>ここで異なるのは、二番目のボックスは 400 ピクセル幅のラッパーの内側にあることです。200px で指定したボックスは、一番目と二番目が同じ幅になっています。しかし、二番目の 40%指定したボックスは違います。二番目のボックスは 400 ピクセルの 40% の幅になります。最初のものよりかなり狭くなっています。</p>
+
+<p><strong>ラップするボックスの幅またはパーセントの値を変更してその影響を確認してください。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p>
+
+<p>次の例はフォントサイズをパーセントで指定しています。それぞれの <code>&lt;li&gt;</code> は 80% の <code>font-size</code> です。そのため、ネストしたリストはその親のサイズを継承するため、徐々にフォントサイズが小さくなっています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p>
+
+<p>注意: 多くの値には length(長さ) と percentage(パーセント)の両方を受け付けますが、中には length しか受け付けないものもあります。どのような値が受け付けられるかを確認するには、MDN プロパティリファレンスページを参照してください。許可される値が <code><a href="/ja/docs/Web/CSS/length-percentage">&lt;length-percentage&gt;</a></code> の場合は length と percentage の両方を使用できます。しかし許可される値が <code>&lt;length&gt;</code> の場合、percentage は使用できません。</p>
+
+<h3 id="Numbers" name="Numbers">Numbers(数)</h3>
+
+<p>一部の値は、単位のない数値を受け入れます。 単位のない数値を受け入れるプロパティの例は、要素の不透明度（透明度）を制御する <code>opacity</code> プロパティです。 このプロパティは、<code>0</code>（完全に透明）〜 <code>1</code>（完全に不透明）の数値を受け入れます。</p>
+
+<p><strong>この下の例を見てください。<code>opacity</code> を <code>0</code> から <code>1</code> までの間の数に変えて、この箱とそのコンテンツがどのよう表示されるかを確認してください。</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: CSS で値として数を使用する場合、その値を引用符で囲んではなりません。</p>
+</div>
+
+<h2 id="Color" name="Color">色</h2>
+
+<p>CSS で色を指定する方法はたくさんありますが、その中には最近実装されたものもあります。テキストの色を指定する場合でも、背景の色を指定する場合でも、CSSではどこでも同じ色の値を使うことができます。</p>
+
+<p>最近のコンピューターで利用できる標準的な色のシステムは 24 ビットです。これは赤、緑、青のチャンネルでそれぞれ 256 の値を持てるため、およそ 1670万色 (256 x 256 x 256 = 16,777,216) の色を指定できることになります。CSS で色を指定するさまざまな方法を見てみましょう。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: このチュートリアルでは、普通のブラウザーがサポートしている、標準的な色の指定方法を見ていきます。他にも方法がありますが、それらはサポートされていないこともあり、標準的な方法ではありません。</p>
+</div>
+
+<h3 id="Color_keywords" name="Color_keywords">カラーキーワード</h3>
+
+<p>この学習の章や MDN でもよく例を見る方法にカラーキーワードがあります。これは色を指定する方法で非常に単純で理解しやすいものです。カラーキーワードは、その色の名前そのものを入力するだけです。このカラーキーワードのリストは <code><a href="/ja/docs/Web/CSS/color_value">&lt;color&gt;</a></code> の値のページで確認できます。</p>
+
+<p><strong>下の練習で別のカラーキーワードを試して、それがどのように作用するのか確認してください。</strong></p>
+
+<h3 id="Hexadecimal_RGB_values" name="Hexadecimal_RGB_values">16進数 RGB</h3>
+
+<p>次のカラーの値の種類は、あたながよく遭遇する 16進数を使うものです。それぞれの 16進数の値には、ハッシュ記号(#) に続いて、6 個の 16進数の数が続きます。この数には、0 から f までの 16 個の文字を使用します。(ここで f は 15 に相当) — つまり <code>0123456789abcdef</code> を使用します。この値の二文字はそれぞれ赤、緑、青のカラーチャンネルの値を表しています。そのため、16 x 16 = 256 つまり、それぞれのチャンネルに 256通りの値を指定できます。</p>
+
+<p>これらの値は少し複雑で、わかりにくいものです。しかし、16進数はキーワードより多くの用途で使用されます。あなたのカラースキームで表す、好きな色を 16進数で表現できるのです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p>
+
+<p><strong>もう一度、値を変更させてどのように色が変化するか確認しましょう。</strong></p>
+
+<h3 id="RGB_and_RGBA_values" name="RGB_and_RGBA_values">RGB と RGBA</h3>
+
+<p>第三の方法として、RGB を説明します。RGB の値は関数 <code>rgb()</code> に渡して使います。この関数は、3 つのパラメータを受け取り、それぞれ、赤、緑、青のチャンネルの色の値として扱います。ちょうど 16進数での表記とよく似ています。RGB は 2 つの 16進数で表すのと違い 0 から 255 の 10進数の数で指定します。こちらの方が少しわかりやすいです。</p>
+
+<p>最後の表記を書き直して、RGB で表現してみましょう。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p>
+
+<p>また、RGBA カラー方式もあります。これは、RGB カラー方式とまったく同じ方法で、RGB で表すすべての値を使用できます。しかし、RGBA は 4 つのパラメータをとり、4番目のパラメータは色のアルファチャンネル、つまり色の不透明度(または透明度)を表します。この 4番目のパラメータの値が  <code>0</code> のとき完全な透明を表し、<code>1</code> のとき完全な不透明を表します。その間の値を指定してさまざまなレベルの透明度を指定できます。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 色でアルファチャンネルを設定することと、より前に学んだ、{{cssxref("opacity")}} プロパティで設定することの違いに注意しましょう。opacity プロパティで設定した場合、その要素と要素内のすべてが透明になります。一方、RGBA カラーを指定した場合、透明になるのはそのカラーだけです。</p>
+</div>
+
+<p>下記の例では、色付きの箱に含まれる背景画像を追加しました。そして箱にいろいろな透過値をセットしました — アルファチャンネルが小さくなるときに背景がどう表示されるか注意してみてください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p>
+
+<p><strong>この例では、アルファチャンネル値を変更してみて、色の出力にどう影響するのかを見ています。</strong></p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: ある時点で、最新のブラウザが更新され、rgba() と rgb()、そして hsl() と hsla() (後述) がお互いの純粋なエイリアスとなり、全く同じ動作をするようになりました。このため <code>rgba()</code> と <code>rgb()</code> の両方はアルファチャンネル値のある/ない色を受け入れています。上記の例の <code>rgba()</code> 関数を <code>rgb()</code> に変更して色が動作するのを見てください! どのスタイルを使うのかはあなた次第ですが、不透明と透明の色定義に別の関数を使うのは (とても) 少しブラウザーサポートが良くなって、コード内のどこで透明色を使っているかの目印になります。</p>
+</div>
+
+<h3 id="HSL_and_HSLA_values" name="HSL_and_HSLA_values">HSL と HSLA</h3>
+
+<p>RGB よりサポートがちょっと少ないのが HSL 色モデルです (IE の古いバージョンではサポートされません)、これはデザイナーの関心から実装されました。赤、緑、青の代わりに、<code>hsl()</code> 関数は 色相(hue), 彩度(saturation), 輝度(lightness) の値を取り、これは約 1670 万色を、別の方法で分別するのに使われます。</p>
+
+<ul>
+ <li><strong>色相(Hue)</strong>: 色のベースとなるシェード。これは 0 から 360 の値を取り、色相環の角度を表します。</li>
+ <li><strong>彩度(Saturation)</strong>: 色がどれだけ飽和しているか? これは 0–100% の値を取り、0 は色がなく (グレーのシェードに見える)、100% はフルカラーの飽和となります。</li>
+ <li><strong>(Lightness)</strong>: 色がどれだけ明るいのか? こりは 0–100% の値を取り、0 は明度がなく (完全な黒に見える)、100% はフルの明度です (完全な白となる)。</li>
+</ul>
+
+<p>RGB の例を HSL の色に更新すると次のようになります:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p>
+
+<p>RGB に RGBA があるように、HSL には同様な HSLA があり、アルファチャンネルの指定が同様にできます。デモとして RGBA の例を HSLA 色を使うようにしたものは次の通りです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p>
+
+<p>プロジェクトでどの色の値を使っても良いです。たいていのプロジェクトではカラーパレットを決めてから、この色（と決定した色指定の方法）を、プロジェクト全体を通して使います。色モデルを混用することもできますが、一貫させるために通常はプロジェクト全体で同じものを使うのがベストです!</p>
+
+<h2 id="Images" name="Images">画像</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/image">&lt;image&gt;</a></code> データタイプは画像が妥当な値となる場合に使われます。これは <code>url()</code> 関数で指定される実際の画像ファイルか、グラデーションです。</p>
+
+<p>下記の例では画像とグラデーションを CSS <code>background-image</code> プロパティに使っています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <code>&lt;image&gt;</code> がとり得る他の値もありますが、それは新しくてブラウザーサポートが貧弱です。それについて知りたい場合、MDN の <code><a href="/ja/docs/Web/CSS/image">&lt;image&gt;</a></code> データタイプのページを確認してください。</p>
+</div>
+
+<h2 id="Position" name="Position">位置</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/position_value">&lt;position&gt;</a></code> データタイプは 2次元座標を表しており、背景画像のような項目 (<code><a href="/ja/docs/Web/CSS/background-position">background-position</a></code> にて)の位置を決めるのに使われます。これは <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>,  <code>center</code> のようなキーワードを取って、ボックスの上や左の隅からオフセットさせる長さの値とともに、2次元のボックスの特定の境界にアイテムを揃えます。</p>
+
+<p>典型的な位置の値は 2 つの値を持ち — 最初は水平位置を、2 つ目は垂直位置をセットします。1 つの軸だけの値を指定する場合、もう 1 つはデフォルトで <code>center</code> となります。</p>
+
+<p>次の例では、背景画像をキーワードを使ってコンテナの右端の上から 40px の位置に配置しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p>
+
+<p><strong>この値でいろいろ遊んでみて、画像がどう移動するか見てください。</strong></p>
+
+<h2 id="Strings_and_identifiers" name="Strings_and_identifiers">文字列と識別子</h2>
+
+<p>上記の例を通じて、キーワードが値として使われる場所を見てきました (例えば、<code>&lt;color&gt;</code> キーワードの例として <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, <code>goldenrod</code>)。このキーワードをより正確に述べると、CSS が理解できる特別な値の <em>識別子</em> です。このためそれは引用符で囲まれておらず、文字列として扱われません。</p>
+
+<p>CSS で文字列が使われる場所もあります、例えば、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#before%E3%81%8A%E3%82%88%E3%81%B3_after%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E7%94%9F%E6%88%90">生成されたコンテンツを指定するとき</a>です。この場合、値は文字列を示すようクォートで囲まれます。下記の例ではクォートで囲まれていない color キーワードと生成されたコンテンツ文字列を一緒に使っています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p>
+
+<h2 id="Functions" name="Functions">関数</h2>
+
+<p>最後に見る値は関数として知られる値です。プログラミングでは、関数とは、繰り返されるタスクを実行するのに何度も呼ばれる、開発者とコンピューター両方の手間を省いてくれる、再利用できるコードの一部分です。関数は通常 JavaScript, Python, C++のような言語と関連付けられますが、CSS にもプロパティ値として存在しています。私たちはすでに色の節で <code>rgb()</code>、 <code>hsl()</code> などの関数を見ています。ファイルから画像を返すのに使われた値 — <code>url()</code> — も関数です。</p>
+
+<p>従来のプログラミング言語にあるような動作をする値は CSS の <code>calc()</code> 関数です。この関数を使うと CSS 内で簡単な計算を行うことができます。特にプロジェクトの CSS を書く際に定義できない値を計算したい場合や、実行時にブラウザに計算させる必要がある場合に便利です。</p>
+
+<p>例えば、下記では <code>calc()</code> を使って <code>20% + 100px</code> の幅を出しています。20% は親コンテナである <code>.wrapper</code> の幅から計算され、その幅が変わると変更されます。親の 20% がいくらになるのか分からないので、この計算を事前にすることはできません。そのため代わりにブラウザーに計算してもらうよう <code>calc()</code> を使います。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p>
+
+<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2>
+
+<p>この記事では多くをカバーしましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_tasks">Test your skills: Values and unit</a> を見てください。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>ここまで最もよく見かける値と単位を一通り見てきました。<a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位</a> のリファレンスページで、さまざまなタイプをすべて見ることができます。多くはこのレッスンを進んでいくと出てくるでしょう。</p>
+
+<p>覚えておくべき重要なことは、各プロパティには許可される値の定義されたリストがあり、各値にはサブ値が何であるかを説明する定義があるということです。詳細は MDN で調べることができます。</p>
+
+<p>例えば、<code><a href="/ja/docs/Web/CSS/image">&lt;image&gt;</a> </code>でもカラーグラデーションを作成できることを理解しておくと便利ですが、たぶん当たり前の知識ではないでしょう!</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
+  <ul>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
+   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
+</ol>
diff --git a/files/ja/learn/css/css_layout/flexbox/index.html b/files/ja/learn/css/css_layout/flexbox/index.html
new file mode 100644
index 0000000000..688db60aec
--- /dev/null
+++ b/files/ja/learn/css/css_layout/flexbox/index.html
@@ -0,0 +1,349 @@
+---
+title: フレックスボックス
+slug: Learn/CSS/CSS_layout/Flexbox
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - CSS layouts
+  - CodingScripting
+  - Flexible Boxes
+  - Guide
+  - Layout
+  - Layouts
+  - Learn
+  - flexbox
+translation_of: Learn/CSS/CSS_layout/Flexbox
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><span class="seoSummary"><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>（Flexbox）は、項目を行または列にレイアウトするための1次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>フレックスボックス・レイアウトシステムを使用してウェブのレイアウトを作成する方法を習得する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Why_Flexbox" name="Why_Flexbox">なぜフレックスボックスなのか？</h2>
+
+<p>長い間、CSS レイアウトを作成するために利用可能な唯一の信頼できるクロスブラウザー互換ツールは<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a>と<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a>のようなものでした。 これらは問題なく機能しますが、いくつかの点ではかなり限定的でイライラするものです。</p>
+
+<p>次のような単純なレイアウト要件は、このようなツールを使用しても、便利で柔軟な方法で実現するのが困難または不可能です。</p>
+
+<ul>
+ <li>コンテンツのブロックをその親内で垂直方向に中央揃えにします。</li>
+ <li>コンテナのすべての子が、使用可能な幅や高さに関係なく、使用可能な幅や高さについて等しい量を占めるようにします。</li>
+ <li>複数列レイアウトのすべての列に、異なる量のコンテンツが含まれていても、同じ高さを採用するようにします。</li>
+</ul>
+
+<p>以降のセクションで見るように、フレックスボックスは多くのレイアウト作業をずっと簡単にします。 さあ始めましょう！</p>
+
+<h2 id="Introducing_a_simple_example" name="Introducing_a_simple_example">簡単な例の紹介</h2>
+
+<p>この記事では、フレックスボックスがどのように機能するのかを理解するのに役立つ一連の演習を進めていくようにします。 まず始めに、github リポジトリから最初のスターターファイル <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> のローカルコピーを作成し、最新のブラウザー（Firefox や Chrome など）にロードして、コードエディタでコードを確認してください。 ここでも<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">ライブを見る</a>ことができます。</p>
+
+<p>内部に最上位の見出しを持つ {{htmlelement("header")}} 要素と、3つの {{htmlelement("article")}} を含む {{htmlelement("section")}} 要素があります。 これらを使用して、かなり標準的な3列のレイアウトを作成します。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<h2 id="Specifying_what_elements_to_lay_out_as_flexible_boxes" name="Specifying_what_elements_to_lay_out_as_flexible_boxes">柔軟な箱としてレイアウトする要素を指定</h2>
+
+<p>まず最初に、どの要素を柔軟な箱（flexible box）としてレイアウトするかを選択する必要があります。 これを行うために、あなたが影響を与えたい要素の親要素に {{cssxref("display")}} の特別な値を設定します。 この場合、{{htmlelement("article")}} 要素をレイアウトしたいので、これを {{htmlelement("section")}} に設定します（これがフレックスコンテナになります）。</p>
+
+<pre class="brush: css notranslate">section {
+  display: flex;
+}</pre>
+
+<p>この結果は次のようになります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p>
+
+<p>それで、このたった一つの宣言が必要なものすべてを与えてくれます — 信じられないでしょ？ 同じ幅の列を持つ複数列のレイアウトがあり、列の高さはすべて同じです。 これは、フレックス項目（フレックスコンテナの子）に与えられるデフォルト値が、このような一般的な問題を解決するために設定されているためです。 それらについての詳細は後で。</p>
+
+<div class="note">
+<p><strong>注</strong>: インライン項目を柔軟な箱としてレイアウトしたい場合は、<code>inline-flex</code> を {{cssxref("display")}} の値として設定することもできます。</p>
+</div>
+
+<h2 id="An_aside_on_the_flex_model" name="An_aside_on_the_flex_model">フレックスモデルのさておき</h2>
+
+<p>要素が柔軟な箱として配置されるとき、それらは次のように2つの軸に沿って配置されます。</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li>主軸（<strong>main axis</strong>）は、フレックス項目が配置されている方向に走る軸です（例えば、ページを横切る行、またはページ下の列として）。 この軸の始点と終点は、主始点（<strong>main start</strong>）と主終点（<strong>main end</strong>）と呼ばれます。</li>
+ <li>交差軸（<strong>cross axis</strong>）は、フレックス項目が配置されている方向に対して垂直に走る軸です。 この軸の始点と終点は、交差始点（<strong>cross start</strong>）と交差終点（<strong>cross end</strong>）と呼ばれます。</li>
+ <li><code>display: flex</code> が設定されている親要素（この例では {{htmlelement("section")}}）は、フレックスコンテナ（<strong>flex container</strong>）と呼ばれます。</li>
+ <li>フレックスコンテナ内の柔軟な箱としてレイアウトされている項目は、フレックス項目（<strong>flex item</strong>）と呼ばれます（この例では {{htmlelement("article")}} 要素）。</li>
+</ul>
+
+<p>次のセクションを進むときには、この用語集のことを覚えておいてください。 使用されている用語のいずれかについて混乱した場合は、いつでもここを参照することができます。</p>
+
+<h2 id="Columns_or_rows" name="Columns_or_rows">列それとも行？</h2>
+
+<p>フレックスボックスは {{cssxref("flex-direction")}} というプロパティを提供します。 これは主軸が走る方向（フレックスボックスの子がどの方向にレイアウトされるか）を指定します — デフォルトではこれは <code>row</code> に設定されていて、ブラウザーのデフォルト言語が動作する方向（英語のブラウザーの場合は左から右に）にそれらが横一列にレイアウトされます。</p>
+
+<p>次の宣言を {{htmlelement("section")}}）の規則に追加してみてください。</p>
+
+<pre class="brush: css notranslate">flex-direction: column;</pre>
+
+<p>これにより、CSS を追加する前と同じように、項目が縦一列のレイアウトに戻されます。 先に進む前に、この宣言を例から削除してください。</p>
+
+<div class="note">
+<p><strong>注</strong>: <code>row-reverse</code> と <code>column-reverse</code> の値を使用して、フレックス項目を逆方向にレイアウトすることもできます。 これらの値も試してみてください！</p>
+</div>
+
+<h2 id="Columns_or_rows" name="Columns_or_rows">ラッピング</h2>
+
+<p>レイアウトの幅や高さが決まっているときに発生する問題の1つは、最終的にはフレックスボックスの子がコンテナをオーバーフローさせてレイアウトが壊れることです。 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> の例を見て、それを<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">ライブで見て</a>みてください（この例に沿って進めたい場合は、このファイルのローカルコピーを取ってください）。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+
+<p>ここで実際に子がコンテナから抜け出しているのを見ます。 これを修正できる1つの方法は、{{htmlelement("section")}}）の規則に次の宣言を追加することです。</p>
+
+<pre class="brush: css notranslate">flex-wrap: wrap;</pre>
+
+<p>また、{{htmlelement("article")}} の規則に次の宣言を追加します。</p>
+
+<pre class="brush: css notranslate">flex: 200px;</pre>
+
+<p>試してみてください。 これが含まれていると次のようにレイアウトがはるかに良く見えることがわかります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">現在、複数の行があります — 多くのフレックスボックスの子が各行に納められているので、オーバーフローは次のラインに移動します。 <code>article</code> に設定した <code>flex: 200px</code> の宣言は、それぞれが少なくとも 200px 幅になることを意味します。 このプロパティについては後で詳しく説明します。 また、最後の行の最後の数個の子がそれぞれ幅広になっているので、依然として行全体がいっぱいになっていることに気付くかもしれません。</p>
+
+<p>しかし、ここでできることは他にもあります。 まず最初に、{{cssxref("flex-direction")}} プロパティの値を <code>row-reverse</code> に変更してみてください。 これで、まだ複数行のレイアウトがあることがわかりますが、ブラウザーウィンドウの反対側の隅から開始して逆方向に流れます。</p>
+
+<h2 id="flex-flow_shorthand" name="flex-flow_shorthand">flex-flow 一括指定</h2>
+
+<p>この時点で、{{cssxref("flex-flow")}} という {{cssxref("flex-direction")}} と {{cssxref("flex-wrap")}} の一括指定が存在することに注目する価値があります。 例えば、次のように置き換えることができます。</p>
+
+<pre class="brush: css notranslate">flex-direction: row;
+flex-wrap: wrap;</pre>
+
+<p>を</p>
+
+<pre class="brush: css notranslate">flex-flow: row wrap;</pre>
+
+<h2 id="Flexible_sizing_of_flex_items" name="Flexible_sizing_of_flex_items">フレックス項目の柔軟なサイズ変更</h2>
+
+<p>それでは、最初の例に戻って、フレックス項目の占めるスペースの割合を制御する方法を見てみましょう。 ローカルコピーの <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> を起動するか、新しい出発点として <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> のコピーを入手してください（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">ライブで見る</a>）。</p>
+
+<p>まず、CSS の一番下に次の規則を追加します。</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1;
+}</pre>
+
+<p>これは、各フレックス項目が主軸に沿って使用可能なスペースのうちどれだけを占めるかを決定する、無単位の割合値です。 この場合、各 {{htmlelement("article")}} 要素に 1 の値を与えています。 つまり、パディングやマージンなどを設定した後の残りの予備スペースのうちから、すべてが同じ量を占めます。 これは割合であり、各フレックス項目に 400000 の値を指定してもまったく同じ効果があることを意味します。</p>
+
+<p>それでは、前の規則の下に次の規則を追加します。</p>
+
+<pre class="brush: css notranslate">article:nth-of-type(3) {
+  flex: 2;
+}</pre>
+
+<p>リフレッシュすると、3番目の {{htmlelement("article")}} が他の2つの幅の2倍の幅を占めます。 合計で 4 割合単位が使用可能です。 最初の2つのフレックス項目はそれぞれ 1 単位ずつ持つため、それぞれ使用可能なスペースの 1/4 を占めます。 3つ目は 2 単位を持っているので、それは使用可能なスペースの 2/4（または 1/2）を占めます。</p>
+
+<p><code>flex</code> の値内に最小サイズ値を指定することもできます。 既存の <code>article</code> の規則を次のように更新してみてください。</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}</pre>
+
+<p>これは基本的に「各フレックス項目には最初に 200px の使用可能なスペースが与えられます。 その後、残りの使用可能なスペースは割合単位に従って共有されます。」と述べています。 リフレッシュしてみると、スペースの共有方法に違いが見られます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<p>フレックスボックスの真の価値は、その柔軟性/応答性に見ることができます — ブラウザーウィンドウのサイズを変更したり、別の {{htmlelement("article")}} 要素を追加したりしても、レイアウトは問題なく機能します。</p>
+
+<h2 id="flex_shorthand_versus_longhand" name="flex_shorthand_versus_longhand">flex: 一括指定対個別指定</h2>
+
+<p>{{cssxref("flex")}} は、最大3つの異なる値を指定できる{{cssxref("Shorthand_properties","一括指定プロパティ")}}です。</p>
+
+<ul>
+ <li>上記で説明した無単位の割合値。 これは {{cssxref("flex-grow")}} 個別指定プロパティを使用して個別に指定できます。</li>
+ <li>{{cssxref("flex-shrink")}} というフレックス項目がコンテナをオーバーフローしているときに有効になる、2番目の無単位の割合値。 これは、各フレックス項目のサイズからオーバーフローする量を取り除き、それらがコンテナからオーバーフローするのを防ぐために指定します。 これはかなり高度なフレックスボックスの機能で、この記事ではこれ以上説明しません。</li>
+ <li>上記で説明した最小サイズ値。 これは、{{cssxref("flex-basis")}} の個別指定値を使用して個別に指定できます。</li>
+</ul>
+
+<p>本当に必要な場合以外は、個別指定の flex プロパティを使用しないことをお勧めします（例えば、以前に設定したものを上書きする場合など）。 それらは多くの余分なコードが書かれることにつながり、多少混乱するかもしれません。</p>
+
+<h2 id="Horizontal_and_vertical_alignment" name="Horizontal_and_vertical_alignment">水平方向と垂直方向の配置</h2>
+
+<p>フレックスボックスの機能を使用して、主軸または交差軸に沿ってフレックス項目を整列させることもできます。 新しい例である <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> を見て（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">ライブも見る</a>）、これを調べてみましょう。 これは、きちんとした柔軟なボタン/ツールバーに変わります。 現時点では、いくつかのボタンが左上隅に詰まった水平のメニューバーが表示されます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p>
+
+<p>まず、この例のローカルコピーを取ります。</p>
+
+<p>それでは、例の CSS の最後に次のものを追加してください。</p>
+
+<pre class="brush: css notranslate">div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>ページをリフレッシュすると、ボタンが横方向と縦方向に中央揃えになっていることがわかります。 これを2つの新しいプロパティを介して行いました。</p>
+
+<p>{{cssxref("align-items")}} は、フレックス項目が交差軸上のどこに配置されるかを制御します。</p>
+
+<ul>
+ <li>デフォルトでは、この値は <code>stretch</code> です。 これは、すべてのフレックス項目を交差軸の方向に親を埋めるように引き伸ばします。 親が交差軸方向に固定幅を持っていない場合、すべてのフレックス項目は最長のフレックス項目と同じ長さになります。 これが最初の例がデフォルトで同じ高さの列を得た方法です。</li>
+ <li>上記のコードで使用した <code>center</code> の値により、項目は固有の寸法を維持しますが、交差軸の中心に配置されます。 これが、この例のボタンが縦方向に中央揃えされている理由です。</li>
+ <li><code>flex-start</code> や <code>flex-end</code> のような値を持つこともできます。 これは、すべての項目をそれぞれ交差軸の始点や終点に揃えます。 詳細については {{cssxref("align-items")}} を参照してください。</li>
+</ul>
+
+<p>{{cssxref("align-self")}} プロパティを適用することで、個々のフレックス項目の {{cssxref("align-items")}} のふるまいを上書きできます。 例えば、CSS に次のコードを追加してみてください。</p>
+
+<pre class="brush: css notranslate">button:first-child {
+  align-self: flex-end;
+}</pre>
+
+<p>これがどのような影響を与えるのかを見て、終了したらもう一度削除します。</p>
+
+<p>{{cssxref("justify-content")}} は、フレックス項目が主軸上のどこに配置されるかを制御します。</p>
+
+<ul>
+ <li>デフォルト値は <code>flex-start</code> です。 これにより、すべての項目が主軸の始点に配置されます。</li>
+ <li>それらを終点に配置させるために <code>flex-end</code> を使うことができます。</li>
+ <li><code>center</code> は <code>justify-content</code> のための値でもあり、フレックス項目を主軸の中心に配置します。</li>
+ <li>上記で使用した値、<code>space-around</code> は便利です。 両端に少しのスペースを残して、すべての項目を主軸に沿って均等に配置します。</li>
+ <li>もう1つの値、<code>space-between</code> があります。 これは、両端にスペースを残さないという点を除けば、<code>space-around</code> に非常に似ています。</li>
+</ul>
+
+<p>続ける前に、これらの値を使用してそれらがどのように機能するかを確認することをお勧めします。</p>
+
+<h2 id="Ordering_flex_items" name="Ordering_flex_items">フレックス項目の順序付け</h2>
+
+<p>フレックスボックスには、ソース順に影響を与えずにフレックス項目のレイアウトの順序を変更する機能もあります。 これも従来のレイアウト方法では不可能なことです。</p>
+
+<p>このコードは簡単です。 ボタンバーのサンプルコードに次の CSS を追加してみてください。</p>
+
+<pre class="brush: css notranslate">button:first-child {
+  order: 1;
+}</pre>
+
+<p>リフレッシュすると、[Smile] ボタンが主軸の終点に移動したことがわかります。 これがどのように機能するかについてもう少し詳しく説明しましょう。</p>
+
+<ul>
+ <li>デフォルトでは、すべてのフレックス項目の {{cssxref("order")}} の値は 0 です。</li>
+ <li>大きな <code>order</code> の値が設定されているフレックス項目は、小さな <code>order</code> の値を持つ項目よりも表示順序の後半に表示されます。</li>
+ <li>同じ <code>order</code> の値を持つフレックス項目は、ソース順で表示されます。 そのため、2、1、1、0 の <code>order</code> の値がそれぞれ設定された4つの項目がある場合、それらの表示順序は 4、2、3、1 となります。</li>
+ <li>3番目の項目は2番目の後に表示されます。 これは、同じ <code>order</code> の値を持ち、ソース順でそれより後にあるためです。</li>
+</ul>
+
+<p>負の <code>order</code> の値を設定して、0 が設定されている項目よりも早く項目を表示することができます。 例えば、次の規則を使用して、[Blush] ボタンを主軸の始点に表示させることができます。</p>
+
+<pre class="brush: css notranslate">button:last-child {
+  order: -1;
+}</pre>
+
+<h2 id="Nested_flex_boxes" name="Nested_flex_boxes">ネストしたフレックスボックス</h2>
+
+<p>フレックスボックスを使ってかなり複雑なレイアウトを作成することは可能です。 フレックス項目をフレックスコンテナとしても設定して、その子も柔軟な箱のようにレイアウトできるようにしてもまったく問題ありません。 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> を見てください（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">ライブも見る</a>）。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>このための HTML はかなり単純です。 3つの {{htmlelement("article")}} を含む {{htmlelement("section")}} 要素があります。 3番目の {{htmlelement("article")}} には3つの {{htmlelement("div")}} が含まれています。</p>
+
+<pre class="notranslate">section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button</pre>
+
+<p>レイアウトに使用したコードを見てみましょう。</p>
+
+<p>まず、{{htmlelement("section")}} の子を柔軟な箱として配置するように設定します。</p>
+
+<pre class="brush: css notranslate">section {
+  display: flex;
+}</pre>
+
+<p>次に、{{htmlelement("article")}} 自体にいくつかの <code>flex</code> の値を設定します。 ここで2番目の規則に特に注意してください — 3番目の {{htmlelement("article")}} は、その子もフレックス項目のようにレイアウトするように設定していますが、今回はそれらを <code>column</code> のようにレイアウトしています。</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+</pre>
+
+<p>次に、最初の {{htmlelement("div")}} を選択します。 最初に <code>flex: 1 100px;</code> を使用して効果的にそれの最小の高さを 100px にしてから、その子（{{htmlelement("button")}} 要素）もフレックス項目のように配置されるように設定します。 ここでそれらをラッピングする行にレイアウトし、先ほど見た個々のボタンの例で行ったように、それらを使用可能なスペースの中央に配置します。</p>
+
+<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child {
+  flex: 1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>最後に、ボタンのサイズを設定しましたが、もっとおもしろいことに、<code>1 auto</code> の <code>flex</code> の値を設定しています。 これは非常に興味深い効果があり、ブラウザーウィンドウの幅を変更してみるとわかります。 ボタンは可能な限り多くのスペースを占有し、できるだけ同じラインに配置できますが、同じラインに収まりきらなくなった場合は、ドロップダウンして新しいラインを作成します。</p>
+
+<pre class="brush: css notranslate">button {
+  flex: 1 auto;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}</pre>
+
+<h2 id="Cross_browser_compatibility" name="Cross_browser_compatibility">クロスブラウザー互換性</h2>
+
+<p>フレックスボックスのサポートは、Firefox、Chrome、Opera、Microsoft Edge、IE 11、Android / iOS の新しいバージョンなど、ほとんどの新しいブラウザーで利用できます。 ただし、フレックスボックスをサポートしていない古いブラウザーもまだあります（または、しますが、本当に古い、時代遅れのバージョンをサポートします）。</p>
+
+<p>あなたがただ学んで実験している間、これはあまり重要ではありません。 ただし、実際のウェブサイトでフレックスボックスを使用することを検討している場合は、テストを行い、できるだけ多くのブラウザーでユーザーエクスペリエンスが許容範囲内であることを確認する必要があります。</p>
+
+<p>フレックスボックスはいくつかの CSS 機能よりも少しトリッキーです。 例えば、ブラウザーに CSS ドロップシャドウがない場合でも、そのサイトは引き続き使用可能です。 ただし、フレックスボックス機能をサポートしていないと、レイアウトが完全に壊れて使用できなくなる可能性があります。</p>
+
+<p><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>のモジュールでは、クロスブラウザーのサポートの問題を解決するための戦略について説明します。</p>
+
+<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2>
+
+<p>この記事では多くをカバーしましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a> を見てください。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>これで、フレックスボックスの基本についてのツアーは終了です。 私たちはあなたが楽しみを持って、学習と共に前進するにつれてそれと一緒に良い遊びがあることを願っています。 次に、CSS レイアウトのもう1つの重要な側面、CSS グリッドについて見ていきます。</p>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<div>
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
+</div>
diff --git a/files/ja/learn/css/css_layout/floats/index.html b/files/ja/learn/css/css_layout/floats/index.html
new file mode 100644
index 0000000000..8de6f5367f
--- /dev/null
+++ b/files/ja/learn/css/css_layout/floats/index.html
@@ -0,0 +1,528 @@
+---
+title: フロート
+slug: Learn/CSS/CSS_layout/Floats
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - Clearing
+  - CodingScripting
+  - Floats
+  - Guide
+  - Layout
+  - columns
+  - multi-column
+translation_of: Learn/CSS/CSS_layout/Floats
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><span class="seoSummary">{{cssxref("float")}} プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの1つになりました。 この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>ウェブページ上に浮動の特長を作成する方法と、<code>clear</code> プロパティおよびその他のフロートのクリア方法の使い方を習得します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="The_background_of_floats" name="The_background_of_floats">フロートの背景</h2>
+
+<p>画像の左や右を包み込むテキストにより、テキストの列内に浮かぶ画像を含む単純なレイアウトをウェブ開発者が実装できるようにするために {{cssxref("float")}} プロパティが導入されました。 あなたが新聞のレイアウトで得るかもしれない種類のものです。</p>
+
+<p>しかしウェブ開発者はすぐに画像だけでなく何でも浮かべることができることに気づいたので、フロートの使用は広がりました。 例えば、<a href="https://css-tricks.com/snippets/css/drop-caps/">drop-caps</a> のような楽しいレイアウト効果です。</p>
+
+<p>フロートは一般に、互いに並ぶように浮動する複数列の情報を含むウェブサイト全体のレイアウトを作成するために使用されてきました（デフォルトのふるまいでは、列はソースに表れる順序と同じ順序で上下に配置されます）。 より新しくより良いレイアウトテクニックが利用可能なので、このようにフロートを使うことは<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のテクニック</a>とみなされるべきです。</p>
+
+<p>この記事では、フロートの正しい使い方に集中します。</p>
+
+<h2 id="A_simple_float_example" name="A_simple_float_example">簡単なフロートの例</h2>
+
+<p>フロートの使い方を探りましょう。 要素の周りにテキストのブロックを浮かべることを含む本当に簡単な例から始めましょう。 コンピュータ上に新しい <code>index.html</code> ファイルを作成し、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">簡単な HTML テンプレート</a>を使ってそれを埋め、適切な場所に以下のコードを挿入することで、フォローすることができます。 セクションの一番下では、最終的なコードがどのようになるべきかの実例を見ることができます。</p>
+
+<p>まず、簡単な HTML から始めましょう。 HTML の <code>body</code> に次のコードを追加し、それまでの内部にあるものはすべて削除します。</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. &lt;/p&gt;
+
+&lt;p&gt;Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;</pre>
+
+<p>次の CSS を HTML に適用します（{{htmlelement("style")}} 要素を使用するか、{{htmlelement("link")}} を使用して別の <code>.css</code> ファイルを作成するか、選択します）。</p>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}</pre>
+
+<p>保存してリフレッシュすると予想していたものとよく似たものが表示されます — <code>box</code> が通常フローでテキストの上側に表示されます。 テキストをそれの周囲に浮かべるには、次のように <code>.box</code> 規則に {{cssxref("float")}} と {{cssxref("margin-right")}} プロパティを追加します。</p>
+
+<pre class="brush: css notranslate">.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}</pre>
+
+<p>保存してリフレッシュすると、次のようになります。</p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Float_Example_1">Float Example 1</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p>
+
+<p>フロートがどのように機能するかを考えてみましょう。 <code>float</code> が設定されている要素（この場合は {{htmlelement("div")}} 要素）は、文書の通常のレイアウトフローから除かれ、その親コン​​テナ（この場合は {{htmlelement("body")}}）の左側に固定されます。 通常のレイアウトフローで浮動要素の下側に来るコンテンツは、それを包み込み、浮動要素の最上部まで、その右側のスペースを埋めます。 そこで、それは止まるでしょう。</p>
+
+<p>コンテンツを右に浮かべるとまったく同じ効果が得られますが、逆になります。 つまり、浮動要素は右に固定され、コンテンツはその左側を包み込みます。 <code>float</code> の値を <code>right</code> に変更し、最後のルールセットで {{cssxref("margin-right")}} を {{cssxref("margin-left")}} に置き換えて、結果がどうなるかを確認してください。</p>
+
+<p>テキストを押しのけるためにフロートにマージン（margin、余白）を追加することはできますが、テキストをフロートから遠ざけるためにテキストにマージンを追加することはできません。 これは、浮動要素は通常フローから外され、後続項目のボックスが実際にはフロートの背後にあるためです。 例にいくつかの変更を加えることによってこれを実証することができます。</p>
+
+<p>テキストの最初の段落、つまり浮動ボックスの直後の段落に <code>special</code> のクラスを追加してから、CSS に次の規則を追加します。 これらは後続段落に背景色を与えます。</p>
+
+<pre class="brush: css notranslate">.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+
+<p>効果を見やすくするために、フロートの <code>margin-right</code> を <code>margin</code> に変更すると、フロートの全周にマージンができます。 以下の例のように、浮動ボックスの真下にある段落の背景を見ることができます。</p>
+
+<div id="Float_2">
+<div class="hidden">
+<h6 id="Float_Example_2">Float Example 2</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p class="special"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p>
+
+<p>後続要素の<a href="/ja/docs/Web/CSS/Visual_formatting_model#Line_boxes">行ボックス</a>は短くなっているのでテキストはフロートの周りを囲みますが、フロートは通常フローから除かれるため、段落の周りのボックスは依然として全幅のままです。</p>
+
+<h2 id="Clearing_floats" name="Clearing_floats">フロートのクリア</h2>
+
+<p>フロートは通常フローから除かれ、他の要素がその横に表示されることを見てきました。 したがって、後続要素の上方向への移動を止めたい場合は、それをクリアする必要があります; これは {{cssxref("clear")}} プロパティによって達成されます。</p>
+
+<p>前の例の HTML では、浮動項目の下の2番目の段落に <code>cleared</code> のクラスを追加します。 次に、CSS に以下を追加してください。</p>
+
+<pre class="brush: css notranslate">.cleared {
+  clear: left;
+}
+</pre>
+
+<div id="Float_3">
+<div class="hidden">
+<h6 id="Float_Example_3">Float Example 3</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p class="special"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.cleared {
+  clear: left;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p>
+
+<p>後続段落で、浮動要素がクリアされ、並んで現れなくなったことがわかります。 <code>clear</code> プロパティは次の値を受け入れます。</p>
+
+<ul>
+ <li><code>left</code>: 左に浮いている項目をクリアします。</li>
+ <li><code>right</code>: 右に浮いている項目をクリアします。</li>
+ <li><code>both</code>: 左や右に浮いている項目をどちらもクリアします。</li>
+</ul>
+
+<h2 id="Clearing_boxes_wrapped_around_a_float" name="Clearing_boxes_wrapped_around_a_float">フロートを包み込むボックスのクリア</h2>
+
+<p>浮動要素に後続するものをクリアする方法はわかりましたが、背の高いフロートと短い段落があり、その両方の要素の周りをボックスが包む場合はどうなるか見てみましょう。 最初の段落と浮動ボックスが <code>wrapper</code> のクラスの {{htmlelement("div")}} に囲まれるように文書を変更します。</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>CSS で、<code>.wrapper</code> クラスに次の規則を追加してからページをリロードします。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}</pre>
+
+<p>加えて、元の <code>.cleared</code> クラスを削除します。</p>
+
+<pre class="brush: css notranslate" id="ct-0">.cleared {
+    clear: left;
+}</pre>
+
+<p>段落に背景色を与えた例と同じように、背景色がフロートの背後にあることがわかります。</p>
+
+<div id="Float_4">
+<div class="hidden">
+<h6 id="Float_Example_4">Float Example 4</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p>
+
+<p>前と同じように、これもまた、フロートが通常フローから外されたためです。 コンテンツが短い場合でも、ボックスの底に浮動項目とラッピングコンテンツを包む必要がある場合には、後続要素のクリアでは、このボックスのクリアの問題を解決することはできません。 これに対処する方法は3つあります。 そのうちの2つはすべてのブラウザーで機能します — それでもやや厄介です — そしてこの状況に適切に対処する3番目の新しい方法です。</p>
+
+<h3 id="The_clearfix_hack" name="The_clearfix_hack">clearfix ハック</h3>
+
+<p>この状況に伝統的に対処してきた方法は、「clearfix ハック」として知られているものを使うことです。 これはフロートとラッピングコンテンツを含むボックスの後に生成したコンテンツを挿入し、両方をクリアするように設定することを含みます。</p>
+
+<p>例に次の CSS を追加します。</p>
+
+<pre class="brush: css notranslate">.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}</pre>
+
+<p>ページをリロードすると、ボックスはクリアされます。 これは、項目の下に <code>&lt;div&gt;</code> などの HTML 要素を追加して <code>clear: both</code> に設定した場合と基本的に同じです。</p>
+
+<div id="Float_5">
+<div class="hidden">
+<h6 id="Float_Example_5">Float Example 5</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;      </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p>
+
+<h3 id="Using_overflow" name="Using_overflow">オーバーフローを使用する</h3>
+
+<p>別の方法は、<code>wrapper</code> の {{cssxref("overflow")}} プロパティを <code>visible</code> 以外の値に設定することです。</p>
+
+<p>前のセクションで追加した clearfix の CSS を削除し、代わりに <code>wrapper</code> の規則に <code>overflow: auto</code> を追加してください。 前と同じように、ボックスはクリアされます。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}</pre>
+
+<div id="Float_6">
+<div class="hidden">
+<h6 id="Float_Example_6">Float Example 6</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p>
+
+<p>この例は、<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>（<strong>block formatting context</strong>、BFC）と呼ばれるものを作成することによって機能します。 これはページの中にあるミニレイアウトのようなもので、その中にすべてが含まれているので、浮動要素は BFC の中に含まれ、背景は両方の項目の背後にあります。 これは通常はうまくいきますが、場合によっては、オーバーフローを使用することによる意図しない結果が原因で、不要なスクロールバーや切り取られた影が見つかることがあります。</p>
+
+<h3 id="display_flow-root" name="display_flow-root">display: flow-root</h3>
+
+<p>この問題を解決する現代的な方法は、<code>display</code> プロパティの <code>flow-root</code> という値を使うことです。 これはハックを使用せずに BFC を作成するためだけに存在します — それを使用しても意図しない結果が生じることはありません。 <code>.wrapper</code> 規則から <code>overflow: auto</code> を削除し、<code>display: flow-root</code> を追加してください。 これを<a href="/ja/docs/Web/CSS/display#Browser_compatibility">サポートするブラウザー</a>を持っていると仮定すると、ボックスはクリアされます。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}</pre>
+
+<div id="Float_7">
+<div class="hidden">
+<h6 id="Float_Example_7">Float Example 7</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p>
+
+<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2>
+
+<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/CSS/CSS_layout/Floats_skills">Test your skills: Floats</a> を見てください。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>あなたは今、現代のウェブ開発でフロートについて知っておくべきことがすべてわかっています。 過去のレイアウト方法の使用方法については、<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a>に関する記事を参照してください。 古いプロジェクトで作業している場合に便利です。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/ja/learn/css/css_layout/fundamental_layout_comprehension/index.html
new file mode 100644
index 0000000000..42e19361bc
--- /dev/null
+++ b/files/ja/learn/css/css_layout/fundamental_layout_comprehension/index.html
@@ -0,0 +1,91 @@
+---
+title: 基礎的なレイアウトの理解
+slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension
+tags:
+  - Assessment
+  - Beginner
+  - CSS
+  - Layout
+  - Learn
+translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><span class="seoSummary">このモジュールを乗り越えてきたならば、今日 CSS レイアウトを行うために知っておくべきことや、より古い CSS を使って作業するために必要なことの基本についてはすでに説明しているはずです。 このタスクでは、さまざまなテクニックを使用して簡単なウェブページレイアウトを作成することによって、あなたの知識の一部をテストします。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>このモジュールで説明してきた基本的なレイアウトスキルの理解をテストすること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Project_Brief" name="Project_Brief">プロジェクトの概要</h2>
+
+<p>生の HTML、基本的な CSS、そして画像が提供されています — これで、次の画像にそっくりなデザインのレイアウトを作成する必要があります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16076/layout-task-complete.png" style="height: 706px; width: 1000px;"></p>
+
+<h3 id="Basic_Setup" name="Basic_Setup">基本設定</h3>
+
+<p>HTML、CSS、および6枚の画像を<a href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">ここからダウンロード</a>できます。</p>
+
+<p>HTML ドキュメントとスタイルシートをコンピュータ上のディレクトリに保存し、画像を <code>images</code> という名前のフォルダに追加します。 ブラウザーで <code>index.html</code> ファイルを開くと、次の画像のような基本的なスタイルは設定されているがレイアウトが設定されていないページが表示されます。</p>
+
+<p>この出発点には、通常フローでブラウザーに表示されるレイアウトのすべての内容が含まれています。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16075/layout-task-start.png" style="height: 675px; width: 1000px;"></p>
+
+<h3 id="Your_tasks" name="Your_tasks">あなたのタスク</h3>
+
+<p>あなたは今レイアウトを実装する必要があります。 達成する必要があるタスクは次のとおりです。</p>
+
+<ol>
+ <li>ナビゲーション項目を、項目間に等間隔のスペースを置いて、1行に並べて表示します。</li>
+ <li>ナビゲーションバーはコンテンツと一緒にスクロールし、ビューポートの上部に到達するとそこに固定されるべきです。</li>
+ <li>記事の中にある画像は、それを囲むテキストを持つべきです。</li>
+ <li>{{htmlelement("article")}} 要素と {{htmlelement("aside")}} 要素は、2列のレイアウトとして表示するべきです。 ブラウザーウィンドウが小さくなると列が狭くなるように、列は柔軟なサイズにするべきです。</li>
+ <li>写真は、画像間に1ピクセルの間隔を空けて2列のグリッドとして表示するべきです。</li>
+</ol>
+
+<p>このレイアウトを実現するために HTML を編集する必要はなく、使用するべきテクニックは次のとおりです。</p>
+
+<ul>
+ <li>位置指定</li>
+ <li>フロート</li>
+ <li>フレックスボックス</li>
+ <li>CSS グリッドレイアウト</li>
+</ul>
+
+<p>これらのタスクのいくつかを達成することができるいくつかの方法があり、物事を行うための唯一の正しい方法も間違った方法も、多くの場合ありません。 いくつかの異なる方法を試して、どれが最もうまくいくかを確かめてください。 実験しながらメモを取ってください。 この演習のディスカッションスレッドまたは <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで、自分のアプローチについて常に議論することができます。</p>
+
+<h2 id="Assessment" name="Assessment">評価</h2>
+
+<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982">この演習についてのディスカッションスレッド</a>や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！</p>
+
+<div>{{PreviousMenu("Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</div>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/grids/index.html b/files/ja/learn/css/css_layout/grids/index.html
new file mode 100644
index 0000000000..d7ca3601c3
--- /dev/null
+++ b/files/ja/learn/css/css_layout/grids/index.html
@@ -0,0 +1,722 @@
+---
+title: グリッド
+slug: Learn/CSS/CSS_layout/Grids
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - CSS Grids
+  - CodingScripting
+  - Grids
+  - Guide
+  - Layout
+  - Learn
+  - Tutorial
+  - grid design
+  - grid framework
+  - grid system
+translation_of: Learn/CSS/CSS_layout/Grids
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><span class="seoSummary">CSS グリッドレイアウト（Grid Layout）は、ウェブ用の2次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できるようにする多くの機能があります。 この記事では、ページレイアウトを始めるために知っておくべきことをすべて説明します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>と<a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>グリッドレイアウトシステムの背後にある基本概念と、CSS グリッドを使用してグリッドレイアウトを実装する方法を理解すること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_is_grid_layout" name="What_is_grid_layout">グリッドレイアウトとは？</h2>
+
+<p>グリッドとは、水平方向と垂直方向のラインを集めたもので、デザイン要素を並べて表示することができます。 ページ間を移動するときに要素が跳び回ったり幅が変わったりしないようなデザインを作成するのに役立ちます。 これにより、ウェブサイトの一貫性が向上します。</p>
+
+<p>グリッドには通常、列（<strong>column</strong>）、行（<strong>row</strong>）、そしてそれぞれの行と列の間のギャップ（通常はガター（<strong>gutter</strong>）と呼ばれます）があります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p>
+
+<h2 id="Creating_your_grid_in_CSS" name="Creating_your_grid_in_CSS">CSS でグリッドを作りましょう</h2>
+
+<p>デザインに必要なグリッドを決定したら、CSS グリッドレイアウトを使用して CSS でそのグリッドを作成し、その上に項目を配置できます。 最初にグリッドレイアウトの基本機能を見てから、プロジェクト用のシンプルなグリッドシステムを作成する方法を探ります。</p>
+
+<p>The following video provides a nice visual explanation of using CSS Grid:</p>
+
+<p>{{EmbedYouTube("KOvGeFUHAC0")}}</p>
+
+<h3 id="Defining_a_grid" name="Defining_a_grid">グリッドを定義する</h3>
+
+<p>出発点として、テキストエディタとブラウザーで<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">出発点ファイル</a>をダウンロードして開きます（<a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">ここでライブを見る</a>こともできます）。 いくつかの子項目を持つコンテナの例が表示されます。 デフォルトではこれらは通常フローで表示されるので、ボックスは上下に表示されます。 このレッスンの最初の部分でこのファイルを使用して、グリッドのふるまいを確認するための変更を加えます。</p>
+
+<p>グリッドを定義するために、{{cssxref("display")}} プロパティに <code>grid</code> の値を使います。 フレックスボックスと同様に、これによりグリッドレイアウトがオンになり、コンテナの直接の子すべてがグリッド項目になります。 次のものをファイル内の CSS に追加してください。</p>
+
+<pre class="brush: css notranslate">.container {
+    display: grid;
+}</pre>
+
+<p>フレックスボックスとは異なり、項目はすぐには違ったようには見えません。 <code>display: grid</code> を宣言すると1列のグリッドになるので、項目は通常フローで表示されるように上下に表示され続けます。</p>
+
+<p>よりグリッドらしく見せるには、グリッドにいくつかの列を追加する必要があります。 ここに 200 ピクセルの列を3つ追加しましょう。 これらの列トラックを作成するために、任意の長さの単位やパーセントを使用できます。</p>
+
+<pre class="brush: css notranslate">.container {
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+}</pre>
+
+<p>CSS 規則に2番目の宣言を追加してからページをリロードすると、作成したグリッドの各セルに項目が1つずつ再配置されていることがわかります。</p>
+
+<div id="Grid_1">
+<div class="hidden">
+<h6 id="Simple_Grid_Example">Simple Grid Example</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}          </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+ &lt;div&gt;One&lt;/div&gt;
+ &lt;div&gt;Two&lt;/div&gt;
+ &lt;div&gt;Three&lt;/div&gt;
+ &lt;div&gt;Four&lt;/div&gt;
+ &lt;div&gt;Five&lt;/div&gt;
+ &lt;div&gt;Six&lt;/div&gt;
+ &lt;div&gt;Seven&lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<pre class="brush: css notranslate">.container {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+} </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p>
+
+<h3 id="Flexible_grids_with_the_fr_unit" name="Flexible_grids_with_the_fr_unit">fr 単位での柔軟なグリッド</h3>
+
+<p>長さとパーセントを使用してグリッドを作成するだけでなく、<code>fr</code> 単位を使用して柔軟にグリッドの行と列のサイズを変更できます。 この単位は、グリッドコンテナ内の使用可能スペースの割合を表します。</p>
+
+<p>トラックのリストを次の定義に変更し、<code>1fr</code> のトラックを3つ作成します。</p>
+
+<pre class="brush: css notranslate">.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}</pre>
+
+<p>あなたは今、柔軟なトラックを持っているのを見るべきです。 <code>fr</code> 単位はスペースを比例して配分するので、トラックには異なる正の値を指定できます。 例えば次のように定義を変更したとします。</p>
+
+<pre class="brush: css notranslate">.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+}</pre>
+
+<p>最初のトラックの使用可能スペースは <code>2fr</code> になり、他の2つのトラックの使用可能スペースは <code>1fr</code> になり、最初のトラックのサイズが大きくなります。 <code>fr</code> 単位と固定長トラックを混在させることができます — そのような場合、固定長トラックに必要なスペースは、スペースが他のトラックに分配される前に取り除かれます。</p>
+
+<div id="Grid_2">
+<div class="hidden">
+<h6 id="Simple_Grid_Example_with_fr_units">Simple Grid Example with fr units</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+                </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Seven&lt;/div&gt;
+&lt;/div&gt;                        </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: <code>fr</code> 単位は、<em>すべて</em>のスペースではなく、<em>使用可能</em>なスペースを分配します。 あなたのトラックの1つがその中に大きな何かを持っているならば、共有する空きスペースは少なくなります。</p>
+</div>
+
+<h3 id="Gaps_between_tracks" name="Gaps_between_tracks">トラック間のギャップ</h3>
+
+<p>トラック間のギャップを作成するには、列間のギャップには {{cssxref("grid-column-gap")}} プロパティ、行間のギャップには {{cssxref("grid-row-gap")}} プロパティ、両方を同時に設定するには {{cssxref("grid-gap")}} プロパティを使用します。</p>
+
+<pre class="brush: css notranslate">.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-gap: 20px;
+}</pre>
+
+<p>これらのギャップは、長さの単位またはパーセントのいずれでもかまいませんが、<code>fr</code> 単位ではありません。</p>
+
+<div id="Grid_3">
+<div class="hidden">
+<h6 id="Simple_Grid_Example_with_fr_units_2">Simple Grid Example with fr units</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+                </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Seven&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: <code>*gap</code> プロパティは以前は <code>grid-</code> という接頭辞を付けていましたが、これは仕様変更されています。 その意図はそれらを複数のレイアウト方法で使えるようにすることです。 接頭辞の付いたバージョンはエイリアスとして保持されるため、しばらくの間は安全に使用できます。 安全のために、コードをより万全にするために、両方のプロパティを倍増して追加することができます。</p>
+</div>
+
+<pre class="brush: css notranslate">.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+  gap: 20px;
+}</pre>
+
+<h3 id="Repeating_track_listings" name="Repeating_track_listings">トラックリストの繰り返し</h3>
+
+<p>反復記法を使用して、トラックリストの全部または一部を繰り返すことができます。 トラックリストを次のように変更します。</p>
+
+<pre class="brush: css notranslate">.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}</pre>
+
+<p>今までと同じ3つの <code>1fr</code> のトラックが手に入ります。 repeat 関数に渡す最初の値はリストを繰り返す回数で、2番目の値はトラックリストで、1つ以上のトラックを繰り返すことができます。</p>
+
+<h3 id="The_implicit_and_explicit_grid" name="The_implicit_and_explicit_grid">暗黙的グリッドと明示的グリッド</h3>
+
+<p>ここまでは列トラックのみを指定しましたが、コンテンツを保持するために行が作成されています。 これは明示的グリッド対暗黙的グリッドの例です。 明示的グリッドは、<code>grid-template-columns</code> または <code>grid-template-rows</code> を使用して作成したものです。 暗黙的グリッドは、コンテンツがそのグリッドの外側、例えば行に配置されたときに作成されます。 明示的グリッドと暗黙的グリッドは、フレックスボックスの主軸および交差軸と類似しています。</p>
+
+<p>デフォルトでは、暗黙的グリッドに作成されたトラックは <code>auto</code> でサイズ調整されます。 これは一般に、コンテンツに合わせて十分に大きいことを意味します。 暗黙的グリッドのトラックにサイズを指定したい場合は、{{cssxref("grid-auto-rows")}} プロパティと {{cssxref("grid-auto-columns")}} プロパティを使用できます。 CSS に <code>100px</code> の値で <code>grid-auto-rows</code> を追加すると、作成された行の高さは 100 ピクセルになります。</p>
+
+<div id="Grid_4">
+<div class="hidden">
+<h6 id="Simple_Grid_Example_with_fr_units_3">Simple Grid Example with fr units</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}                  </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Seven&lt;/div&gt;
+&lt;/div&gt;
+                        </pre>
+</div>
+
+<pre class="brush: css notranslate">.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 20px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p>
+
+<h3 id="The_minmax_function" name="The_minmax()_function">minmax() 関数</h3>
+
+<p>100 ピクセルより高いコンテンツを追加する場合、100 ピクセルの高さのトラックはあまり役に立ちません。 その場合、オーバーフローが発生します。 トラックの高さは<em>最低</em> 100 ピクセルで、さらに多くのコンテンツがトラックに入る場合は拡大できると良いでしょう。 ウェブについてのかなり基本的な事実は、あなたが実際に何かがどれほど高くなるかを本当に知らないということです。 追加のコンテンツや大きなフォントサイズは、あらゆる次元でピクセルパーフェクトになろうとするデザインに問題を引き起こす可能性があります。</p>
+
+<p>{{cssxref("minmax")}} 関数を使用すると、トラックの最小サイズと最大サイズ、例えば <code>minmax(100px, auto)</code> を設定できます。 最小サイズは 100 ピクセルですが、最大サイズは <code>auto</code> で、コンテンツに合わせて拡大されます。 次のように <code>minmax</code> の値を使用するように <code>grid-auto-rows</code> を変更してみてください。</p>
+
+<pre class="brush: css notranslate">.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: 20px;
+}</pre>
+
+<p>追加のコンテンツを追加すると、それが収まるようにトラックが拡大されます。 拡張は行に沿って行われることに注意してください。</p>
+
+<h3 id="As_many_columns_as_will_fit" name="As_many_columns_as_will_fit">収まる限り多くの列</h3>
+
+<p>トラックリスト、反復記法、{{cssxref("minmax")}} について学んだことのいくつかを組み合わせて、便利なパターンを作成できます。 グリッドに、コンテナに収まるだけの数の列を作成するように依頼できると便利な場合があります。 これを行うには、{{cssxref("repeat")}} 記法を使用して <code>grid-template-columns</code> の値を設定しますが、数値を渡す代わりにキーワード <code>auto-fill</code> を渡します。 関数の2番目のパラメータには、<code>minmax()</code> を使用し、最小値は、必要な最小トラックサイズに等しく、最大値は <code>1fr</code> です。</p>
+
+<p>以下の CSS を使用して、今すぐあなたのファイルで次を試してください。</p>
+
+<div id="Grid_5">
+<div class="hidden">
+<h6 id="As_many_columns_as_will_fit_2">As many columns as will fit</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+                </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Seven&lt;/div&gt;
+&lt;/div&gt;                      </pre>
+</div>
+
+<pre class="brush: css notranslate">.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-auto-rows: minmax(100px, auto);
+  grid-gap: 20px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p>
+
+<p>これは、グリッドがコンテナに収まるだけの数の 200 ピクセルの列を作成し、その後すべての列の間で残っているスペースを共有するためです — 最大は <code>1fr</code> で、すでにご存じのとおり、トラック間でスペースを均等に配分するためのものです。</p>
+
+<h2 id="Line-based_placement" name="Line-based_placement">ラインベースの配置</h2>
+
+<p>グリッドの作成から、グリッド上に物を配置することに移ります。 グリッドは常にラインを持っていて、そのラインは 1 から始まり、文書の書字方向モード（Writing Mode）に関連しています。 したがって、英語では、桁の1ライン目がグリッドの左側にあり、行の1ライン目が一番上にあります。 アラビア語では、アラビア語は右から左に書かれているので、桁の1ライン目が右側になります。</p>
+
+<p>開始ラインと終了ラインを指定することで、これらのラインに従って物を配置できます。 次のプロパティを使用してこれを行います。</p>
+
+<ul>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+</ul>
+
+<p>これらのプロパティはすべて値としてライン番号を持つことができます。 次の一括指定プロパティを使用することもできます。</p>
+
+<ul>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+</ul>
+
+<p>これにより、開始ラインと終了ラインを <code>/</code> （スラッシュ文字）で区切って一度に指定できます。</p>
+
+<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">出発点としてこのファイルをダウンロードする</a>か、<a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html">ここにあるライブを見てください</a>。 それはすでに定義されたグリッドを持ち、そして簡単な記事が概説されています。 自動配置により、作成したグリッドの各セルに項目を1つずつ配置していることがわかります。</p>
+
+<p>代わりに、グリッドラインを使用して、サイトのすべての要素をグリッドに配置します。 CSS の最後に次の規則を追加してください。</p>
+
+<pre class="brush: css notranslate">header {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 3;
+  grid-row: 3;
+}</pre>
+
+<div id="Grid_6">
+<div class="hidden">
+<h6 id="Line-based_placement_2">Line-based placement</h6>
+
+<pre class="brush: css notranslate">                body {
+                    width: 90%;
+                    max-width: 900px;
+                    margin: 2em auto;
+                    font: .9em/1.2 Arial, Helvetica, sans-serif;
+                }
+
+                .container {
+                    display: grid;
+                    grid-template-columns: 1fr 3fr;
+                    grid-gap: 20px;
+                }
+header {
+    grid-column: 1 / 3;
+    grid-row: 1;
+}
+
+article {
+    grid-column: 2;
+    grid-row: 2;
+}
+
+aside {
+    grid-column: 1;
+    grid-row: 2;
+}
+
+footer {
+    grid-column: 1 / 3;
+    grid-row: 3;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;header&gt;This is my lovely blog&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;My article&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt;
+    &lt;h2&gt;Other things&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
+&lt;/div&gt;               </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: 終点の列または行のラインをターゲットとして値 <code>-1</code> を使用し、負の値を使用して終点から内側に向かって数えることもできます。 しかしこれは明示的グリッドに対してのみ有効です。 値 <code>-1</code> は、<a href="/ja/docs/Glossary/Grid">暗黙的グリッド</a>の終点のラインをターゲットにしません。</p>
+</div>
+
+<h2 id="Positioning_with_grid-template-areas" name="Positioning_with_grid-template-areas">grid-template-areas での配置</h2>
+
+<p>項目をグリッドに配置する別の方法は、{{cssxref("grid-template-areas")}} プロパティを使用して、デザインのさまざまな要素に名前を付けることです。</p>
+
+<p>最後の例からラインベースの配置を削除して（またはファイルを再ダウンロードして新しい出発点にして）、次の CSS を追加します。</p>
+
+<pre class="brush: css notranslate">.container {
+  display: grid;
+  grid-template-areas:
+      "header header"
+      "sidebar content"
+      "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}</pre>
+
+<p>ページをリロードすると、ライン番号を使用しなくても項目が以前と同じように配置されたことがわかります！</p>
+
+<div id="Grid_7">
+<div class="hidden">
+<h6 id="Line-based_placement_3">Line-based placement</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}
+
+.container {
+  display: grid;
+  grid-template-areas:
+  "header header"
+  "sidebar content"
+  "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}
+                </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;header&gt;This is my lovely blog&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;My article&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt;&lt;h2&gt;Other things&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
+&lt;/div&gt;                     </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p>
+
+<p><code>grid-template-area</code> の規則は次のとおりです。</p>
+
+<ul>
+ <li>グリッドのすべてのセルを塗りつぶす必要があります。</li>
+ <li>2つのセルにまたがるようにするには、名前を繰り返します。</li>
+ <li>セルを空のままにするには、<code>.</code> （ピリオド）を使用します。</li>
+ <li>領域は長方形である必要があります。 例えば、L字型の領域を持つことはできません。</li>
+ <li>領域は異なる場所で繰り返すことはできません。</li>
+</ul>
+
+<p>あなたは私たちのレイアウトで遊ぶことができます。 例えば、フッターをコンテンツの下にだけあるように変更し、サイドバーをずっと下に広げるように変更できます。 これは、何が起こっているのかが CSS から明らかなので、レイアウトを記述するためのとても良い方法です。</p>
+
+<h2 id="A_CSS_Grid_grid_framework" name="A_CSS_Grid_grid_framework">CSS グリッド、グリッドフレームワーク</h2>
+
+<p>グリッドの「フレームワーク」は、12列または16列のグリッドと CSS グリッドを基にし、そのようなフレームワークを提供するためにサードパーティ製ツールを必要としません — すでに仕様にあります。</p>
+
+<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">出発点ファイルをダウンロードしてください</a>。 これには、12列のグリッドが定義されたコンテナと、前の2つの例で使用したのと同じマークアップが含まれています。 ラインベースの配置を使用して、次のようにコンテンツを12列のグリッドに配置できます。</p>
+
+<pre class="brush: css notranslate">header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}</pre>
+
+<div id="Grid_8">
+<div class="hidden">
+<h6 id="A_CSS_Grid_Grid_System">A CSS Grid Grid System</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0,1fr));
+  grid-gap: 20px;
+}
+
+header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}
+                </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;header&gt;This is my lovely blog&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;My article&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt;&lt;h2&gt;Other things&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
+&lt;/div&gt;
+                        </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p>
+
+<p><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox のグリッドインスペクタ</a>を使用してデザイン上のグリッドラインをオーバーレイすると、12列グリッドがどのように機能するかがわかります。</p>
+
+<p><img alt="私たちのデザインの上に重ねられた12列のグリッド。" src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png" style="height: 1026px; width: 2028px;"></p>
+
+<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2>
+
+<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/CSS/CSS_layout/Grid_skills">Test your skills: Grids</a> を見てください。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>この概要では、CSS グリッドレイアウトの主な機能について説明しました。 あなたのデザインでそれを使い始めることができるはずです。 仕様をさらに深く掘り下げるには、以下にあるグリッドレイアウトのガイドを読んでください。</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS グリッドのガイド</a></li>
+ <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS グリッドインスペクター: グリッドレイアウトを調査する</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/index.html b/files/ja/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..419de7d135
--- /dev/null
+++ b/files/ja/learn/css/css_layout/index.html
@@ -0,0 +1,80 @@
+---
+title: CSS レイアウト
+slug: Learn/CSS/CSS_layout
+tags:
+  - Beginner
+  - CSS
+  - Floating
+  - Grids
+  - Guide
+  - Landing
+  - Layout
+  - Learn
+  - Module
+  - Multiple column
+  - Positioning
+  - alignment
+  - flexbox
+  - float
+  - table
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな <code>display</code> の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。</p>
+
+<h2 id="Prerequisites" name="Prerequisites">前提知識</h2>
+
+<p>このモジュールを始める前に、次のことを理解しているべきです。</p>
+
+<ol>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で説明したように、HTML についての基本的な知識があること。</li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>で説明したように、CSS の基本を容易にこなせること。</li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスを装飾する方法</a>を理解していること。</li>
+</ol>
+
+<div class="note">
+<p><strong>注: </strong>使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、<a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/ja/">Thimble</a> などのオンラインコーディングプログラムで（ほとんどの）コードサンプルを試すことができます。</p>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<p>これらの記事では、CSS で利用可能な基本的なレイアウトのツールとテクニックについての教育を提供します。 レッスンの最後には、ウェブページをレイアウトすることによって、レイアウト方法の理解を確認するのに役立つ評価試験があります。</p>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></dt>
+ <dd>この記事では、以前のモジュールで既に触れた CSS レイアウト機能のいくつか（さまざまな {{cssxref("display")}} の値など）を要約し、このモジュール全体で取り上げるいくつかの概念を紹介します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></dt>
+ <dd>ウェブページ上の要素は、通常フローを変えるために何かをするまで、通常フローに従ってレイアウトされます。 この記事では、通常フローを変える方法を学ぶための基礎として、通常フローの基本について説明します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></dt>
+ <dd>
+ <p><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">フレックスボックス</a>は、項目を行または列にレイアウトするための1次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。</p>
+ </dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></dt>
+ <dd>CSS グリッドレイアウトは、ウェブ用の2次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できるようにする多くの機能があります。 この記事では、ページレイアウトを始めるために知っておくべきことをすべて説明します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></dt>
+ <dd>{{cssxref("float")}} プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの1つになりました。 この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></dt>
+ <dd>位置指定を使用すると、通常のドキュメントレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな {{cssxref("position")}} の値とその使い方について説明します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></dt>
+ <dd>段組みレイアウトの仕様では、新聞に見られるような、コンテンツを段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></dt>
+ <dd>Web 対応デバイスでより多様な画面サイズが登場するにつれて、レスポンシブ Web デザイン（RWD）の概念が登場しました。 これは、さまざまな画面幅、解像度などに合わせて Web ページがレイアウトと外観を変更できるようにする一連の実践です。 これは、マルチデバイス Web 向けのデザイン方法を変更したアイデアであり、この記事では、それをマスターするために知っておくべき主なテクニックを理解するのに役立ちます。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></dt>
+ <dd><strong>CSS メディアクエリー</strong>を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定した規則に一致する場合にのみ CSS を適用できます。 メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブ Web デザイン（responsive web design、RWD）の重要な部分ですが、例えば、ユーザーはマウスではなくタッチスクリーンを使用しているというような、サイトが実行されている環境に関する他のものを検出するためにも使用できます。 このレッスンでは、最初にメディアクエリーで使用される構文について学習し、次に単純なデザインでどのようにレスポンシブにするかを示す実際の例で使用してみます。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></dt>
+ <dd>グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前はフロートや他のレイアウト機能を使用して実装される傾向がありました。 あなたはレイアウトをいくつかの列（例えば 4、6、または 12）として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザのサポート</a></dt>
+ <dd>
+ <p>このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法をサポートしていないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブテクニックを使用する方法について説明します。</p>
+ </dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">評価試験: 基礎的なレイアウトの理解</a></dt>
+ <dd>ウェブページをレイアウトすることによって、さまざまなレイアウト方法に関する知識をテストするための評価試験です。</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">実用的な位置指定の例</a></dt>
+ <dd>この記事では、位置指定でどのようなことができるかを説明するために、実際に使用されるいくつかの例を作成する方法を示します。</dd>
+</dl>
diff --git a/files/ja/learn/css/css_layout/introduction/index.html b/files/ja/learn/css/css_layout/introduction/index.html
new file mode 100644
index 0000000000..3425a29729
--- /dev/null
+++ b/files/ja/learn/css/css_layout/introduction/index.html
@@ -0,0 +1,720 @@
+---
+title: CSS レイアウト入門
+slug: Learn/CSS/CSS_layout/Introduction
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - Floats
+  - Grids
+  - Introduction
+  - Layout
+  - Learn
+  - Positioning
+  - Tables
+  - flexbox
+  - flow
+translation_of: Learn/CSS/CSS_layout/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><span class="seoSummary">この記事では、以前のモジュールで既に触れた CSS レイアウト機能のいくつか（さまざまな {{cssxref("display")}} の値など）を要約し、このモジュール全体で取り上げるいくつかの概念を紹介します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基礎（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>CSS ページレイアウトのテクニックの概要を説明します。 各テクニックは、以降のチュートリアルで詳細に学ぶことができます。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>CSS のページレイアウト技術によって、ウェブページに含まれる要素の位置を制御できます。通常のレイアウトフローによる初期配置、隣接する要素、それらの親コンテナ、またはメインビューポート、ウィンドウの位置、といったものが位置を制御する基準になりえます。 このモジュールでは次に挙げるページレイアウト技術の詳細について説明します。</p>
+
+<ul>
+ <li>通常フロー</li>
+ <li>{{cssxref("display")}} プロパティ</li>
+ <li>フレックスボックス</li>
+ <li>グリッド</li>
+ <li>フロート</li>
+ <li>位置指定</li>
+ <li>表レイアウト</li>
+ <li>段組みレイアウト</li>
+</ul>
+
+<p>どの技術にも、それぞれ用途、長所、短所があり、単独で使用するようには設計されていません。 ひとつひとつの技術がどのように設計されているかを理解することは、それぞれのタスクに最適なレイアウト方法を判断するための基礎になるでしょう。</p>
+
+<h2 id="Normal_flow" name="Normal_flow">通常フロー</h2>
+
+<p>通常フロー（Normal flow）は、ページレイアウトの制御を何もしない場合に、ブラウザーがデフォルトで HTML ページをレイアウトする方法です。 次の簡単な HTML の例を見てみましょう。</p>
+
+<pre class="brush: html">&lt;p&gt;I love my cat.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Buy cat food&lt;/li&gt;
+  &lt;li&gt;Exercise&lt;/li&gt;
+  &lt;li&gt;Cheer up friend&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;The end!&lt;/p&gt;</pre>
+
+<p>デフォルトでは、ブラウザーはこのコードを次のように表示します。</p>
+
+<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p>
+
+<p>ここでは、HTML がソースコードに現れる順序どおりに表示されていることに注意してください — 最初の段落の後に番号なしリストが続き、その後に2番目の段落が続きます。</p>
+
+<p>上下に並んで表示される要素は<em>ブロック</em>要素と呼ばれています。段落内の個々の単語と同じように横に並んで表示される<em>インライン</em>要素とは対照的です。</p>
+
+<div class="note">
+<p><strong>注</strong>: ブロック要素のコンテンツがレイアウトされる方向は、ブロック方向（Block Direction）と呼ばれます。 ブロック方向は、英語などの横書きモード（Horizontal Writing Mode）の言語では垂直に走ります。 日本語のような縦書きモード（Vertical Writing Mode）では、どの言語でも水平に走ります。 対応するインライン方向（Inline Direction）は、インラインコンテンツ（文など）が走る方向です。</p>
+</div>
+
+<p>CSSで何かをレイアウトするとその要素を通常フローから遠ざけることになりますが、ページ上の多くの要素は通常フローにしたがって適宜レイアウトされます。これが、構造化された HTML 文書から始めることが非常に重要である理由です。 なぜなら、多くの要素のレイアウトに一から悪戦苦闘するかわりに、あらかじめ多くのものがレイアウトされている現状で作業できるからです。</p>
+
+<p>CSS で要素をどのように配置するかを変更できる方法は次のとおりです。</p>
+
+<ul>
+ <li><strong>{{cssxref("display")}} プロパティ</strong> — <code>block</code>、<code>inline</code>、<code>inline-block</code> などの標準値は、要素が通常フローでどのようにふるまうかを変更することができます（詳細については、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS ボックスの種類</a>を参照してください）。それから、<a href="/ja/docs/Learn/CSS/CSS_layout/Grids">CSS グリッド</a>や<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>のように、<code>display</code> の値によってオンにされるレイアウト方法全体があります。</li>
+ <li><strong>フロート</strong> — <code>left</code> のような {{cssxref("float")}} の値を適用すると、雑誌のレイアウトで画像の周囲をテキストが取り囲むことがあるように、要素の片側に沿ってブロックレベル要素が折り返されることがあります。</li>
+ <li><strong>{{cssxref("position")}} プロパティ</strong> — 他のボックス内のボックスの配置を正確に制御できます。 通常フローでは <code>static</code> 位置指定がデフォルトですが、他の値を使用して要素を異なる方法でレイアウトすることもできます。 例えば、ブラウザーのビューポートの左上に固定するなどです。</li>
+ <li><strong>表レイアウト</strong> — HTML 表の一部をスタイルするために設計された機能は、<code>display: table</code> とそれに関連するプロパティを使用して、表以外の要素にも使用できます。</li>
+ <li><strong>段組みレイアウト</strong> — <a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウト</a>のプロパティを使用すると、新聞のようにブロックのコンテンツを段組みにレイアウトできます。</li>
+</ul>
+
+<h2 id="The_display_property" name="The_display_property">display プロパティ</h2>
+
+<p>CSS でページレイアウトを実現するための主な方法は、<code>display</code> プロパティのすべての値です。 このプロパティにより、デフォルトの表示方法を変更することができます。 通常フローに属するすべての要素には <code>display</code> の値が設定されており、この値によって要素のデフォルトのふるまいが決まります。 例えば、英語の文書内で{{htmlelement("p", "段落")}}が上から下へ表示されるのは、<code>display: block</code> でスタイルが設定されているためです。 段落内のテキストの周囲にリンクを作成しても、そのリンクは残りのテキストとインラインのままで、改行しません。 これは、{{htmlelement("a")}} 要素がデフォルトで <code>display: inline</code> であるためです。</p>
+
+<p>このような display のデフォルトのふるまいは変更できます。 例えば、{{htmlelement("li")}} 要素はデフォルトで <code>display: block</code> です。 つまり、英語の文書ではリスト項目は上下に表示されます。 <code>display</code> の値を <code>inline</code> に変更した場合、単語が文中で行うように、それらは互いに隣接して表示されます。 任意の要素に対して <code>display</code> の値を変更できるということは、どのように見えるかについて心配することなく、<ruby>意味論的<rp>(</rp><rt>semantic</rt><rp>)</rp></ruby>な視点で HTML 要素を選択できるということです。 見た目はあなたが変えることができるものです。</p>
+
+<p>ひとつの項目を <code>block</code> から <code>inline</code> に、またはその逆に切り替えてデフォルトの表示方法を変更することに加えて、より大きい単位で作用するいくつかのレイアウト手法を <code>display</code> の値を通じて使い始めることができます。 ただし、これらを使用するときは、通常、追加のプロパティを指定する必要があります。 要素のレイアウトを検討する目的において最も重要な値は <code>display: flex</code> と <code>display: grid</code> の2つです。</p>
+
+<h2 id="Flexbox" name="Flexbox">フレックスボックス</h2>
+
+<p>フレックスボックス（Flexbox）は <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module の略称で、行または列のいずれかとして、物を1次元にレイアウトすることを容易にするように設計されています。 フレックスボックスを使うには、<code>display: flex</code> をレイアウトしたい要素の親要素に適用します。 その直接の子はすべてフレックス項目になります。これは簡単な例で見ることができます。</p>
+
+<p>以下の HTML マークアップは、3つの {{htmlelement("div")}} 要素が入っている <code>wrapper</code> クラスを持つ包含要素を示しています。 デフォルトでは、これらは英語の文書では上下にブロック要素として表示されます。</p>
+
+<p>ただし、<code>display: flex</code> を親に追加すると、3つの項目は列に配置されます。 これは、それらが<em>フレックス項目</em>になり、フレックスボックスがそれらに与えるいくつかの初期値を使用するためです。 {{cssxref("flex-direction")}} の初期値は <code>row</code> なので、行として表示されます。 {{cssxref("align-items")}} プロパティの初期値は <code>stretch</code> であるため、それらはすべて最も高い項目の高さまで伸びているように見えます。 これは、項目がフレックスコンテナの高さまで伸びることを意味します。 この場合、項目は最も高い項目によって定義されます。 項目はすべてコンテナの先頭に配置され、行の末尾に余分なスペースが残ります。</p>
+
+<div id="Flex_1">
+<div class="hidden">
+<h6 id="Flexbox_Example_1">Flexbox Example 1</h6>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper &gt; div {
+    border-radius: 5px;
+    background-color: rgb(207,232,220);
+    padding: 1em;
+}
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: flex;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p>
+
+<p>フレックスコンテナに適用できる上記のプロパティに加えて、フレックス項目に適用できるプロパティがあります。 これらのプロパティは、とりわけ、項目のたわみ方を変えることができ、利用可能なスペースに収まるように項目を拡大および縮小することを可能にします。</p>
+
+<p>この単純な例として、すべての子項目に <code>1</code> の値の {{cssxref("flex")}} プロパティを追加できます。 これにより、末尾にスペースを残すのではなく、すべての項目が拡大してコンテナがいっぱいになります。 より多くのスペースがあるならば、項目はより広くなり、スペースが少ないと狭くなります。 さらに、マークアップに別の要素を追加すると、項目はすべてスペースを空けるために小さくなります — サイズに関係なく、同じ大きさのスペースを占めるようにサイズが調整されます。</p>
+
+<div id="Flex_2">
+<div class="hidden">
+<h6 id="Flexbox_Example_2">Flexbox Example 2</h6>
+
+<pre class="brush: css">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: flex;
+}
+
+.wrapper &gt; div {
+    flex: 1;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;One&lt;/div&gt;
+    &lt;div class="box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p>
+
+<div class="note">
+<p><strong>注</strong>: これはフレックスボックスで可能なことの非常に短い紹介です。 詳細については、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>の記事を参照してください。</p>
+</div>
+
+<h2 id="Grid_Layout" name="Grid_Layout">グリッドレイアウト</h2>
+
+<p>フレックスボックスは1次元レイアウト用に設計されていますが、グリッドレイアウト（Grid Layout）は2次元用に設計されています — 行と列に物を並べます。</p>
+
+<p>繰り返しになりますが、<code>display: grid</code> という特定の <code>display</code> の値でグリッドレイアウト（Grid Layout）をオンにすることができます。 以下の例では、コンテナといくつかの子要素とともに、<code>flex</code> の例と同様のマークアップを使用しています。 <code>display: grid</code> の使用に加えて、{{cssxref("grid-template-rows")}} プロパティと {{cssxref("grid-template-columns")}} プロパティをそれぞれ使用して、親の行と列のトラックをいくつか定義します。 それぞれ <code>1fr</code> の3列と <code>100px</code> の2行を定義しました。 子要素に規則を置く必要はなく、自動的にグリッドが作成したセルに配置されます。</p>
+
+<div id="Grid_1">
+<div class="hidden">
+<h6 id="Grid_example_1">Grid example 1</h6>
+
+<pre class="brush: css">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;One&lt;/div&gt;
+    &lt;div class="box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box3"&gt;Three&lt;/div&gt;
+    &lt;div class="box4"&gt;Four&lt;/div&gt;
+    &lt;div class="box5"&gt;Five&lt;/div&gt;
+    &lt;div class="box6"&gt;Six&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p>
+
+<p>グリッドを作成したら、上記の自動配置のふるまいに頼らずに、明示的に項目を配置できます。 以下の2番目の例では、同じグリッドを定義しましたが、今回は3つの子項目を使用しています。 {{cssxref("grid-column")}} プロパティと {{cssxref("grid-row")}} プロパティを使用して各項目の開始ラインと終了ラインを設定しました。 これにより、項目が複数のトラックにまたがるようになります。</p>
+
+<div id="Grid_2">
+<div class="hidden">
+<h6 id="Grid_example_2">Grid example 2</h6>
+
+<pre class="brush: css">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;One&lt;/div&gt;
+    &lt;div class="box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p>
+
+<div class="note">
+<p><strong>注</strong>: これら2つの例は、グリッドレイアウトの機能のほんの一部です。 詳細については、<a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッドレイアウト</a>の記事を参照してください。</p>
+</div>
+
+<p>このガイドの残りの部分では、他のレイアウト方法について説明します。 これは、ページの主なレイアウト構造にとってはそれほど重要ではありませんが、それでも特定のタスクを達成するのに役立ちます。 各レイアウトタスクの性質を理解することで、デザインの特定の構成要素を見たときに、それに最も適したレイアウトの種類が明らかになることがすぐにわかります。</p>
+
+<h2 id="Floats" name="Floats">フロート</h2>
+
+<p>要素を浮動すると、その要素とそれに通常フローで続くブロックレベル要素のふるまいが変わります。 要素が左または右に移動されて通常フローから除かれ、囲むコンテンツが浮動項目の周囲に浮かびます。</p>
+
+<p>{{cssxref("float")}} プロパティには次の4つの可能な値があります。</p>
+
+<ul>
+ <li><code>left</code> — 要素を左に浮かべる。</li>
+ <li><code>right</code> — 要素を右に浮かべる。</li>
+ <li><code>none</code> — まったく浮動しないことを指定する。 これがデフォルト値です。</li>
+ <li><code>inherit</code> — <code>float</code> プロパティの値がこの要素の親要素から継承されるべきであることを指定します。</li>
+</ul>
+
+<p>以下の例では、<code>&lt;div&gt;</code> を左に浮かべ、テキストを要素から遠ざけるために右に {{cssxref("margin")}} を与えます。 これはそのボックスの周りに巻かれたテキストの効果を与え、そしてあなたが最新のウェブデザインで使用されるフロート（Floats）について知る必要があるものの大部分です。</p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Floats_example">Floats example</h6>
+
+<pre class="brush: css">body {
+    width: 90%;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+p {
+    line-height: 2;
+    word-spacing: 0.1rem;
+}
+
+.box {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css">
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: フロートについては、<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">float と clear</a> のプロパティに関するレッスンで詳しく説明しています。 フレックスボックスやグリッドレイアウトなどのテクニックの前は、列レイアウトの作成方法としてフロートが使用されていました。 あなたはまだウェブ上でこれらの方法に出くわすかもしれません。 これらについては、<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a>に関するレッスンで説明します。</p>
+</div>
+
+<h2 id="Positioning_techniques" name="Positioning_techniques">位置指定のテクニック</h2>
+
+<p>位置指定（Positioning）を使用すると、通常フローのときに要素を配置されていた場所から別の場所に移動できます。 位置指定はメインページのレイアウトを作成するための方法ではなく、ページ上の特定の項目の位置を管理および微調整することを目的としています。</p>
+
+<p>ただし、{{cssxref("position")}} プロパティに依存する特定のレイアウトパターンには便利なテクニックがあります。 位置指定を理解することは、通常フローを理解し、項目を通常フローから移動させることとは何かを理解するのに役立ちます。</p>
+
+<p>あなたが知っておくべき、次の5種類の位置指定があります。</p>
+
+<ul>
+ <li><strong>静的位置指定</strong>（Static positioning）は、すべての要素が取得するデフォルトです。 これは、「要素をドキュメントレイアウトフロー内の通常の位置に配置する — ここで見るべき特別なことは何もありません」という意味です。</li>
+ <li><strong>相対位置指定</strong>（Relative positioning）を使用すると、ページ上の要素の位置を変更して、通常フロー内の位置に相対的に移動できます — ページ上の他の要素と重なるようにすることも含まれます。</li>
+ <li><strong>絶対位置指定</strong>（Absolute positioning）では、要素は別のレイヤーに配置されているように、ページの通常のレイアウトフローから完全に外れます。 そこから、それをページの <code>&lt;html&gt;</code> 要素（あるいはそれに最も近くに位置する祖先要素）の端に相対的な位置に固定することができます。 これは、さまざまなコンテンツパネルを重ねて表示したり、必要に応じて表示/非表示にしたりするタブ付きボックスや、デフォルトでは画面外にありコントロールボタンを使用して画面上をスライドさせることができる情報パネルを作成するのに便利です。</li>
+ <li><strong>固定位置指定</strong>（Fixed positioning）は絶対位置指定と非常によく似ていますが、他の要素ではなく、ブラウザーのビューポートを基準にして要素を固定する点が異なります。 これは、他のコンテンツがスクロールしても常に画面上の同じ場所にとどまる永続的なナビゲーションメニューなどの効果を作成するのに役立ちます。</li>
+ <li><strong>粘着位置指定</strong>（Sticky positioning）は、要素が定義されたビューポートからのオフセットにぶつかるまで、要素は <code>position: static</code> のようにふるまい、その位置からは <code>position: fixed</code> のようにふるまう、より新しい位置指定方法です。</li>
+</ul>
+
+<h3 id="Simple_positioning_example" name="Simple_positioning_example">簡単な位置指定の例</h3>
+
+<p>これらのページレイアウトのテクニックに慣れるために、いくつかの簡単な例を紹介します。 例はすべて同じ HTML を特徴とするでしょう。 それは以下の通りです。</p>
+
+<pre class="brush: html">&lt;h1&gt;Positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p class="positioned"&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+
+<p>この HTML はデフォルトで次の CSS を使ってスタイルされます。</p>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+
+<p>レンダリングされた出力は次のとおりです。</p>
+
+<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p>
+
+<h3 id="Relative_positioning" name="Relative_positioning">相対位置指定</h3>
+
+<p>相対位置指定（Relative positioning）を使用すると、デフォルトで設定されている通常フローの位置から項目をずらすことができます。 これは、アイコンをテキストラベルに合わせるためにアイコンを少し下に移動するなどのタスクを実行できることを意味します。 これを行うには、相対位置指定を追加するために次の規則を追加します。</p>
+
+<pre class="brush: css">.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>ここで私たちは真ん中の段落に <code>relative</code> の {{cssxref("position")}} の値を与えます — これはそれ自身では何もしませんので、{{cssxref("top")}} プロパティと {{cssxref("left")}} プロパティも追加します。 これらは影響を受けた要素を右下に動かすのに役立ちます — これはあなたが期待していたのとは反対のように思えるかもしれませんが、要素の左側と上側を押されていると考える必要があり、その結果として右下に移動します。</p>
+
+<p>このコードを追加すると、次のようになります。</p>
+
+<div id="Relative_1">
+<div class="hidden">
+<h6 id="Relative_positioning_example">Relative positioning example</h6>
+
+<pre class="brush: html">&lt;h1&gt;Relative positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p class="positioned"&gt;This is my relatively positioned element.&lt;/p&gt;
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p>
+
+<h3 id="Absolute_positioning" name="Absolute_positioning">絶対位置指定</h3>
+
+<p>絶対位置指定（Absolute positioning）は、通常フローから要素を完全に除き、包含ブロックの端からのオフセットを使用して配置するために使用されます。</p>
+
+<p>元の位置指定のない例に戻ると、絶対位置指定を実装するために次の CSS 規則を追加できます。</p>
+
+<pre class="brush: css">.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>ここでは、真ん中の段落に <code>absolute</code> の {{cssxref("position")}} の値と、前と同じ {{cssxref("top")}} プロパティと {{cssxref("left")}} プロパティを与えます。 ただし、このコードを追加すると、次のようになります。</p>
+
+<div id="Absolute_1">
+<div class="hidden">
+<h6 id="Absolute_positioning_example">Absolute positioning example</h6>
+
+<pre class="brush: html">&lt;h1&gt;Absolute positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p class="positioned"&gt;This is my absolutely positioned element.&lt;/p&gt;
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+    position: absolute;
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p>
+
+<p>これはとても違います！ 位置指定要素は、ページレイアウトの残りの部分から完全に分離され、その上に配置されています。 他の2つの段落は、配置された兄弟が存在しないかのように一緒にいます。 {{cssxref("top")}} プロパティと {{cssxref("left")}} プロパティは、絶対位置指定要素に対しては、相対位置指定要素とは異なる効果があります。 この場合、オフセットはページの上側と左側から計算されています。 このコンテナになる親要素を変更することは可能で、<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a>のレッスンでそれを見ます。</p>
+
+<h3 id="Fixed_positioning" name="Fixed_positioning">固定位置指定</h3>
+
+<p>固定位置指定（Fixed positioning）は、絶対位置指定と同じ方法で、ドキュメントフローから要素を除きます。 ただし、コンテナからのオフセットが適用されるのではなく、ビューポートからのオフセットが適用されます。 項目がビューポートに対して固定されたままであるので、ページがその下でスクロールするときに固定されたままであるメニューのような効果を作成することができます。</p>
+
+<p>この例では、HTML を3段落のテキストにして、ページをスクロールさせます。 また、<code>position: fixed</code> を指定したボックスもあります。</p>
+
+<pre class="brush: html">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fixed&lt;/div&gt;
+
+&lt;p&gt;Paragraph 1.&lt;/p&gt;
+&lt;p&gt;Paragraph 2.&lt;/p&gt;
+&lt;p&gt;Paragraph 3.&lt;/p&gt;
+</pre>
+
+<div id="Fixed_1">
+<div class="hidden">
+<h6 id="Fixed_positioning_example">Fixed positioning example</h6>
+
+<pre class="brush: html">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fixed&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css">body {
+    width: 500px;
+    margin: 0 auto;
+}
+
+.positioned {
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p>
+
+<h3 id="Sticky_positioning" name="Sticky_positioning">粘着位置指定</h3>
+
+<p>粘着位置指定（Sticky positioning）は、私たちが自由に使える最後の位置指定方法です。 デフォルトの静的位置指定に固定位置指定を組み合わせたものです。 項目に <code>position: sticky</code> があるとき、それは定義したビューポートからのオフセットにぶつかるまで通常フローでスクロールします。 その時点で、<code>position：fixed</code> が適用されているかのように「動かなくなります」。</p>
+
+<div id="Sticky_1">
+<div class="hidden">
+<h6 id="Sticky_positioning_example">Sticky positioning example</h6>
+
+<pre class="brush: html">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;div class="positioned"&gt;Sticky&lt;/div&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+.positioned {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: 位置指定の詳細については、<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a>の記事をご覧ください。</p>
+</div>
+
+<h2 id="Table_layout" name="Table_layout">表レイアウト</h2>
+
+<p>HTML 表は表形式のデータを表示するのに適していますが、何年も前に — 基本的な CSS でさえブラウザー間で確実にサポートされる前に — ウェブ開発者はウェブページ全体のレイアウトにも表を使用していました — ヘッダー、フッター、異なる列などを、いろいろな表の行と列に配置します。 これは当時はうまくいきましたが、多くの問題を抱えています — 表レイアウトは柔軟性がなく、マークアップが非常に重く、デバッグが難しく、意味論的に間違っています（例えば、スクリーンリーダーのユーザーは表レイアウトをナビゲートするのに問題があります）。</p>
+
+<p>表のマークアップを使用したときに表がウェブページ上で表示される方法は、表レイアウトを定義する CSS プロパティのセットによるものです。 これらのプロパティは、表ではない要素をレイアウトするために使用することができ、その使用法は「CSS 表の使用」として説明されることがあります。</p>
+
+<p>以下の例はそのような使い方の1つを示しています。 フレックスボックスやグリッドをサポートしていない非常に古いブラウザーを使用しているような状況では、レイアウトに CSS 表を使用することをこの時点では過去の方法と見なすべきです。</p>
+
+<p>例を見てみましょう。 まず、HTML フォームを作成する簡単なマークアップです。 各入力要素にはラベルがあり、段落内にキャプションも含まれています。 各ラベル/入力ペアは、レイアウトのために {{htmlelement("div")}} で囲まれています。</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;p&gt;First of all, tell us your name and age.&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;First name:&lt;/label&gt;
+    &lt;input type="text" id="fname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Last name:&lt;/label&gt;
+    &lt;input type="text" id="lname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="age"&gt;Age:&lt;/label&gt;
+    &lt;input type="text" id="age"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>今、私たちの例のための CSS。 {{cssxref("display")}} プロパティの使用方法を除いて、ほとんどの CSS はかなり普通のものです。 {{htmlelement("form")}}、{{htmlelement("div")}}、{{htmlelement("label")}} と {{htmlelement("input")}} は、それぞれ表、表の行、表のセルのように表示されるように指示しています — 基本的に、それらは HTML 表のマークアップのようにふるまい、デフォルトでラベルと入力がうまく並ぶようにします。 あとは、サイズやマージンなどを少し追加するだけで、すべてが少し見栄えよくなります。</p>
+
+<p>あなたは、キャプションの段落に  <code>display：table-caption;</code> が与えられていることに気付くでしょう — これは表の {{htmlelement("caption")}} のようにふるまいます — そして <code>caption-side: bottom;</code> により、マークアップがソースの <code>&lt;input&gt;</code> 要素の前にある場合でも、スタイル設定の目的でキャプションが表の下部に表示されるようにします。 これにより、かなりの柔軟性が得られます。</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}</pre>
+
+<p>これにより、次のような結果が得られます。</p>
+
+<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p>
+
+<p>この例は <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> でもライブで見ることができます（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">ソースコード</a>も見る）。</p>
+
+<h2 id="Multi-column_layout" name="Multi-column_layout">段組みレイアウト</h2>
+
+<p>段組みレイアウトモジュール（Multi-column layout module）は、新聞のテキストの流れと同じように、コンテンツを列にレイアウトする方法を提供します。 ユーザーに強制的に上下にスクロールさせたくない場合は、列を上下に読むことはウェブのコンテキストではあまり役に立ちませんが、コンテンツを列に配置することは便利なテクニックです。</p>
+
+<p>ブロックを段組みコンテナに変えるには、次のどちらかを使います。 {{cssxref("column-count")}} プロパティは、ブラウザーにいくつの列を持たせたいかを指示します。 {{cssxref("column-width")}} プロパティは、ブラウザーにその幅以上の列をコンテナに入れるように指示します。</p>
+
+<p>以下の例では、<code>container</code> クラスを持つ <code>&lt;div&gt;</code> 要素を含む HTML ブロックから始めます。</p>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+    &lt;h1&gt;Multi-column layout&lt;/h1&gt;
+
+    &lt;p&gt;Paragraph 1.&lt;/p&gt;
+    &lt;p&gt;Paragraph 2.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<p>このコンテナでは 200 ピクセルの <code>column-width</code> を使用しているため、ブラウザーはコンテナに収まるだけの数の 200 ピクセルの列を作成し、作成された列間で残りのスペースを共有します。</p>
+
+<div id="Multicol_1">
+<div class="hidden">
+<h6 id="Multicol_example">Multicol example</h6>
+
+<pre class="brush: html">    &lt;div class="container"&gt;
+        &lt;h1&gt;Multi-column Layout&lt;/h1&gt;
+
+        &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+
+        &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+    &lt;/div&gt;
+        </pre>
+
+<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre>
+</div>
+
+<pre class="brush: css">    .container {
+        column-width: 200px;
+    }</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>この記事では、知っておくべきすべてのレイアウト技術について簡単に説明しました。 個々の技術の詳細については、続けて読んでください！</p>
+
+<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/legacy_layout_methods/index.html b/files/ja/learn/css/css_layout/legacy_layout_methods/index.html
new file mode 100644
index 0000000000..8c1c318e6f
--- /dev/null
+++ b/files/ja/learn/css/css_layout/legacy_layout_methods/index.html
@@ -0,0 +1,588 @@
+---
+title: 過去のレイアウト方法
+slug: Learn/CSS/CSS_layout/Legacy_Layout_Methods
+tags:
+  - Beginner
+  - CSS
+  - Floats
+  - Guide
+  - Layout
+  - Learn
+  - grid system
+  - legacy
+translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary"><span class="seoSummary">グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前はフロートや他のレイアウト機能を使用して実装される傾向がありました。 あなたはレイアウトをいくつかの列（例えば 4、6、または 12）として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>と<a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>CSS グリッドレイアウトがブラウザーで利用可能になる前に使用されていたグリッドレイアウトシステムの背後にある基本概念を理解すること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Layout_and_grid_systems_before_CSS_Grid_Layout" name="Layout_and_grid_systems_before_CSS_Grid_Layout">CSS グリッドレイアウト以前のレイアウトとグリッドシステム</h2>
+
+<p>CSS がごく最近まで内蔵されたグリッドシステムを持っていなかったことを、デザインをやってきた誰かは驚くかもしれません。 そして代わりにグリッドのようなデザインを作成するためにさまざまな次善の方法を用いていたようです。 今これらを「過去の」方法と呼んでいます。</p>
+
+<p>新しいプロジェクトでは、ほとんどの場合、CSS グリッドレイアウトを他の1つ以上の最新のレイアウト方法と組み合わせて使用​​して、任意のレイアウトの基礎とします。 しかし、時々、これらの過去の方法を使用している「グリッドシステム」に遭遇するでしょう。 それらがどのように機能するのか、そしてなぜそれらが CSS グリッドレイアウトと異なるのかを理解するのは価値があります。</p>
+
+<p>このレッスンでは、フロートとフレックスボックスに基づいたグリッドシステムとグリッドフレームワークの仕組みについて説明します。 グリッドレイアウトを勉強してきたので、おそらくこれがどれほど複雑であるかに驚くことでしょう！ この種のシステムを使用する既存のプロジェクトで作業できるようにすることに加えて、新しい方法をサポートしないブラウザー用の代替コードを作成する必要がある場合に、この知識は役に立ちます。</p>
+
+<p>これらのシステムを検討する際には、それらのどれも実際には CSS グリッドレイアウトがグリッドを作成する方法でグリッドを作成しないことに、留意する価値があります。 それらは項目にサイズを与え、グリッドのように<em>見える</em>ように一列に並べることによって機能します。</p>
+
+<h2 id="A_two_column_layout" name="A_two_column_layout">2列レイアウト</h2>
+
+<p>最も簡単な例として、2列のレイアウトから始めましょう。 コンピュータ上に新しい <code>index.html</code> ファイルを作成し、それを<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">単純な HTML テンプレート</a>で埋め、適切な場所に以下のコードを挿入することで、従うことができます。 このセクションの一番下には、最終的なコードがどのようになっているべきかの実例があります。</p>
+
+<p>まず最初に、列に入れるためにいくつかのコンテンツが必要です。 次のもので <code>body</code> の中に現在あるものはすべて置き換えます。</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;2 column layout example&lt;/h1&gt;
+&lt;div&gt;
+  &lt;h2&gt;First column&lt;/h2&gt;
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;Second column&lt;/h2&gt;
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>それぞれの列はそのコンテンツを含むために外側の要素が必要です。 この例では {{htmlelement("div")}} を選択しましたが、{{htmlelement("article")}}、{{htmlelement("section")}}、{{htmlelement("aside")}} など、より意味論的に適切なものを選択することもできます。</p>
+
+<p>今 CSS に対して、まず最初に、HTML に従うため、いくつかの基本的な設定を提供するために次を適用します。</p>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}</pre>
+
+<p><code>body</code> の幅が 900px になるまで、<code>body</code> はビューポートの幅の 90% になります。 この場合、<code>body</code> はこの幅に固定され、ビューポートの中央に配置されます。 デフォルトでは、その子（{{htmlelement("h1")}} と2つの {{htmlelement("div")}}）は <code>body</code> の幅の 100% にわたります。 2つの {{htmlelement("div")}} を互いに並べてフロートしたい場合は、それらの幅の合計をその親要素の幅の 100% 以下に設定して、互いに並んで収まるようにする必要があります。 CSS の最後に次を追加してください。</p>
+
+<pre class="brush: css notranslate">div:nth-of-type(1) {
+  width: 48%;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+}</pre>
+
+<p>ここでは、両方とも親の幅の 48% に設定しました — これは合計 96% で、2列の間のガターのために 4% の空きを残し、コンテンツに余裕を持たせることができます。 さらに次のようにして、列をフロートにする必要があります。</p>
+
+<pre class="brush: css notranslate">div:nth-of-type(1) {
+  width: 48%;
+  float: left;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+  float: right;
+}</pre>
+
+<p>これらすべてをまとめると、次のような結果が得られます。</p>
+
+<div id="Floated_Two_Col">
+<div class="hidden">
+<h6 id="Simple_two-column_layout" name="Simple_two-column_layout">Simple two-column layout</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;2 column layout example&lt;/h1&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;First column&lt;/h2&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;Second column&lt;/h2&gt;
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+div:nth-of-type(1) {
+  width: 48%;
+  float: left;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+  float: right;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}</p>
+
+<p>ここでは、すべての幅にパーセントを使用していることに気付くでしょう。 これは、さまざまな画面サイズに合わせて調整し、小さい画面サイズで列幅に同じ比率を維持する、<strong>リキッドレイアウト</strong>（liquid layout）を作成するため、非常に良い戦略です。 ブラウザーウィンドウの幅を調整して確認してください。 これはレスポンシブウェブデザインのための貴重なツールです。</p>
+
+<div class="note">
+<p><strong>注</strong>: この例は <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> で実行できます（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">ソースコード</a>も見る）。</p>
+</div>
+
+<h2 id="Creating_simple_legacy_grid_frameworks" name="Creating_simple_legacy_grid_frameworks">単純な過去のグリッドフレームワークを作成する</h2>
+
+<p>過去のフレームワークの大部分は、グリッドのように見えるものを作成するために、{{cssxref("float")}} プロパティのふるまいを使用して、ある列を別の列の隣にフロートします。 フロートによるグリッドを作成するプロセスを通して、これがどのように機能するかを説明し、<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロートとクリア</a>のレッスンで学んだことを基にしてさらに高度な概念を紹介します。</p>
+
+<p>作成する最も簡単な種類のグリッドフレームワークは固定幅のものです — デザインに必要な合計幅、列数、およびガター幅と列幅を求める必要があります。 ブラウザーの幅に合わせて増減する列を含むグリッドにデザインをレイアウトすることにした場合は、列とそれらの間のガターに対してパーセント幅を計算する必要があります。</p>
+
+<p>次のセクションでは、両方を作成する方法を見ていきます。 12列のグリッドを作成します — 12 が 6、4、3、および 2 で割り切れることを考えると、さまざまな状況に非常に適応できると見られる非常に一般的な選択です。</p>
+
+<h3 id="A_simple_fixed_width_grid" name="A_simple_fixed_width_grid">単純な固定幅グリッド</h3>
+
+<p>最初に固定幅の列を使用するグリッドシステムを作成しましょう。</p>
+
+<p>サンプルの <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> ファイルのローカルコピーを作成することから始めます。 このファイルには、<code>body</code> に次のマークアップが含まれています。</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;1&lt;/div&gt;
+    &lt;div class="col"&gt;2&lt;/div&gt;
+    &lt;div class="col"&gt;3&lt;/div&gt;
+    &lt;div class="col"&gt;4&lt;/div&gt;
+    &lt;div class="col"&gt;5&lt;/div&gt;
+    &lt;div class="col"&gt;6&lt;/div&gt;
+    &lt;div class="col"&gt;7&lt;/div&gt;
+    &lt;div class="col"&gt;8&lt;/div&gt;
+    &lt;div class="col"&gt;9&lt;/div&gt;
+    &lt;div class="col"&gt;10&lt;/div&gt;
+    &lt;div class="col"&gt;11&lt;/div&gt;
+    &lt;div class="col"&gt;12&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col span1"&gt;13&lt;/div&gt;
+    &lt;div class="col span6"&gt;14&lt;/div&gt;
+    &lt;div class="col span3"&gt;15&lt;/div&gt;
+    &lt;div class="col span2"&gt;16&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>目的は、これを 12 列 2 行のグリッドのデモ用グリッドに変換することです — 一番上の行は個々の列のサイズを示し、2番目の行はグリッド上のいくつかの異なるサイズの領域です。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p>
+
+<p>{{htmlelement("style")}} 要素に、次のコードを追加します。 これにより、<code>wrapper</code> コンテナの幅は 980 ピクセルになり、右側のパディングは 20 ピクセルになります。 これにより、列幅とガター幅の合計が 960 ピクセルになります — この場合、サイト上のすべての要素で {{cssxref("box-sizing")}} を <code>border-box</code> に設定しているため、パディングはコンテンツの幅の合計から差し引かれます（詳細については、<a href="/ja/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">ボックスモデルの完全な変更</a>を参照）。</p>
+
+<pre class="brush: css notranslate">* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 20px;
+}</pre>
+
+<p>次に、グリッドの各行を囲む <code>row</code> コンテナを使用して、ある行を別の行からクリアします。 前の規則の下に次の規則を追加します。</p>
+
+<pre class="brush: css notranslate">.row {
+  clear: both;
+}</pre>
+
+<p>このクリアを適用すると、各行を12列の要素で完全に埋める必要がなくなります。 行は分離されたままになり、互いに干渉しません。</p>
+
+<p>列の間のガターは 20 ピクセル幅です。 最初の列を含め、各列の左側にマージンとしてこれらのガターを作成して、コンテナの右側にある 20 ピクセルのパディングとのバランスを取ります。 だから全部で12のガターを持っています — 12 x 20 = 240。</p>
+
+<p>これを 960 ピクセルの合計幅から差し引いて、列に 720 ピクセルを与える必要があります。 これを 12 で割ると、各列の幅は 60 ピクセルになるはずです。</p>
+
+<p>次のステップは、<code>.col</code> クラスの規則を作成し、それを左にフロートして、ガターを形成する 20 ピクセルの {{cssxref("margin-left")}} と、60 ピクセルの {{cssxref("width")}} を与えることです。 CSS の最後に次の規則を追加してください。</p>
+
+<pre class="brush: css notranslate">.col {
+  float: left;
+  margin-left: 20px;
+  width: 60px;
+  background: rgb(255, 150, 150);
+}</pre>
+
+<p>これで、一番上の単一列の行がグリッドとしてきちんとレイアウトされます。</p>
+
+<div class="note">
+<p><strong>注</strong>: また、各列に薄い赤色を指定したので、各列がどれだけのスペースを占めているかを正確に確認できます。</p>
+</div>
+
+<p>複数列にまたがるコンテナのレイアウトには、必要な列数（足す、その間のガター）に合わせて {{cssxref("width")}} の値を調整するための特別なクラスを指定する必要があります。 コンテナが2〜12列にまたがるようにするために、追加のクラスを作成する必要があります。 それぞれの幅は、その列数の列幅にガター幅を加えた結果です。 ガター幅は常に列数より1つ少なくなります。</p>
+
+<p>CSS の最後に次を追加してください。</p>
+
+<pre class="brush: css notranslate">/* Two column widths (120px) plus one gutter width (20px) */
+.col.span2 { width: 140px; }
+/* Three column widths (180px) plus two gutter widths (40px) */
+.col.span3 { width: 220px; }
+/* And so on... */
+.col.span4 { width: 300px; }
+.col.span5 { width: 380px; }
+.col.span6 { width: 460px; }
+.col.span7 { width: 540px; }
+.col.span8 { width: 620px; }
+.col.span9 { width: 700px; }
+.col.span10 { width: 780px; }
+.col.span11 { width: 860px; }
+.col.span12 { width: 940px; }</pre>
+
+<p>これらのクラスを作成したら、グリッド上にさまざまな幅の列を配置できます。 効果を確認するには、ページを保存してブラウザーでロードします。</p>
+
+<div class="note">
+<p><strong>注</strong>: 上記の例がうまくいかない場合は、GitHub の<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">完成版</a>と比較してみてください（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">ライブでも見られます</a>）。</p>
+</div>
+
+<p>要素のクラスを変更したり、コンテナを追加したり削除したりして、レイアウトの変更方法を確認してください。 例えば、2行目を次のようにすることができます。</p>
+
+<pre class="brush: css notranslate">&lt;div class="row"&gt;
+  &lt;div class="col span8"&gt;13&lt;/div&gt;
+  &lt;div class="col span4"&gt;14&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>これで、グリッドシステムが機能したので、単純に行と各行の列数を定義してから、各コンテナに必要なコンテンツを埋めるだけです。 すばらしいです！</p>
+
+<h3 id="Creating_a_fluid_grid" name="Creating_a_fluid_grid">フルードグリッドを作成する</h3>
+
+<p>私たちのグリッドはうまく機能しますが、幅は固定されています。 ブラウザーの{{Glossary("viewport","ビューポート")}}で利用可能なスペースに応じて拡大縮小する柔軟な（フルード（fluid、流動的な））グリッドが本当に必要です。 これを実現するために、参照するピクセル幅をパーセントに変えることができます。</p>
+
+<p>固定幅を柔軟なパーセントベースのものに変換する式は次のとおりです。</p>
+
+<pre class="notranslate">target / context = result</pre>
+
+<p>列幅については、目標の幅（<strong>target width</strong>）は 60 ピクセル、コンテキスト（<strong>context</strong>）は 960 ピクセルの <code>wrapper</code> です。 パーセントを計算するために次のようにします。</p>
+
+<pre class="notranslate">60 / 960 = 0.0625</pre>
+
+<p>次に小数点を2桁移動して、6.25% のパーセントを得ます。 したがって、私たちの CSS では、60 ピクセルの列幅を 6.25% に置き換えることができます。</p>
+
+<p>ガター幅についても次のように同じことをする必要があります。</p>
+
+<pre class="notranslate">20 / 960 = 0.02083333333</pre>
+
+<p>そのため、<code>.col</code> 規則の 20 ピクセルの {{cssxref("margin-left")}} と、<code>.wrapper</code> 規則の 20 ピクセルの {{cssxref("padding-right")}} を 2.08333333% に置き換える必要があります。</p>
+
+<h4 id="Updating_our_grid" name="Updating_our_grid">グリッドを更新する</h4>
+
+<p>このセクションで始めるには、前のサンプルページの新しいコピーを作成するか、または出発点として使用するために <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a> コードのローカルコピーを作成してください。</p>
+
+<p>次のように（<code>.wrapper</code> セレクターの）2番目の CSS 規則を更新します。</p>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}</pre>
+
+<p>パーセントの {{cssxref("width")}} を指定しただけでなく、レイアウトが広くなり過ぎるのを防ぐために {{cssxref("max-width")}} プロパティも追加しました。</p>
+
+<p>次に、（<code>.col</code> セレクターの）4番目の CSS 規則を次のように更新します。</p>
+
+<pre class="brush: css notranslate">.col {
+  float: left;
+  margin-left: 2.08333333%;
+  width: 6.25%;
+  background: rgb(255, 150, 150);
+}</pre>
+
+<p>もう少し面倒な部分があります。 ピクセル幅ではなくパーセントを使用するようにすべての <code>.col.span</code> 規則を更新する必要があります。 これは電卓で少し時間がかかります。 あなたの努力を節約するために、それを下に用意しました。</p>
+
+<p>次のように CSS 規則の一番下のブロックを更新します。</p>
+
+<pre class="brush: css notranslate">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
+.col.span2 { width: 14.58333333%; }
+/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
+.col.span3 { width: 22.91666666%; }
+/* And so on... */
+.col.span4 { width: 31.24999999%; }
+.col.span5 { width: 39.58333332%; }
+.col.span6 { width: 47.91666665%; }
+.col.span7 { width: 56.24999998%; }
+.col.span8 { width: 64.58333331%; }
+.col.span9 { width: 72.91666664%; }
+.col.span10 { width: 81.24999997%; }
+.col.span11 { width: 89.5833333%; }
+.col.span12 { width: 97.91666663%; }</pre>
+
+<p>コードを保存してブラウザーにロードし、ビューポートの幅を変更してみます — 列の幅は適切に調整されるはずです。</p>
+
+<div class="note">
+<p><strong>注</strong>: 上記の例がうまくいかない場合は、<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">GitHub の完成版</a>と比較してみてください（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">ライブでも見られます</a>）。</p>
+</div>
+
+<h3 id="Easier_calculations_using_the_calc_function" name="Easier_calculations_using_the_calc()_function">calc() 関数を使ったより簡単な計算</h3>
+
+<p>CSS のすぐ内側で {{cssxref("calc","calc()")}} 関数を使って数学を行うことができます — これは CSS の値に簡単な数学の方程式を挿入して、値が何であるべきかを計算することを可能にします。 複雑な計算が必要な場合に特に便利です。 例えば、「この要素の高さは、常に親の高さの 100% から 50px を引いた値です」など、さまざまな単位を使用した計算も計算できます。 <a href="/ja/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">MediaRecorder API のチュートリアルからこの例</a>を参照してください。</p>
+
+<p>とにかく、私たちのグリッドに戻りましょう！ グリッドの複数の列にまたがる列は、合計幅が 6.25% x またがる列の数 + 2.08333333% x ガターの数（常に列の数 - 1）になります。 <code>calc()</code> 関数を使用すると、<code>width</code> の値の内側でこの計算を実行できます。 そのため、例えば、4列にまたがる項目であれば、次のようにします。</p>
+
+<pre class="brush: css notranslate">.col.span4 {
+  width: calc((6.25%*4) + (2.08333333%*3));
+}</pre>
+
+<p>規則の一番下のブロックを次のように置き換えてから、ブラウザーにリロードして、同じ結果になるかどうかを確認します。</p>
+
+<pre class="brush: css notranslate">.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
+.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
+.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
+.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
+.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
+.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
+.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
+.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
+.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
+.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
+.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre>
+
+<div class="note">
+<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a> で完成版を見ることができます（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">ライブでも見られます</a>）。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: これがうまくいかない場合は、ブラウザーが <code>calc()</code> 関数をサポートしていないことが考えられます。 ブラウザー間ではかなりよくサポートされています — IE9 までさかのぼります。</p>
+</div>
+
+<h3 id="Semantic_versus_“unsemantic”_grid_systems" name="Semantic_versus_“unsemantic”_grid_systems">意味論的グリッドシステム対「意味論的でない」グリッドシステム</h3>
+
+<p>マークアップにクラスを追加してレイアウトを定義するということは、コンテンツとマークアップが視覚的表現に結び付くことを意味します。 この CSS クラスの使い方は、コンテンツを説明するクラスの意味論的な使い方ではなく、「意味論的でない」（コンテンツがどのように見えるかを説明する）ものとして説明されることがあります。 これは、<code>span2</code>、<code>span3</code> などのクラスの場合です。</p>
+
+<p>これらが唯一のアプローチではありません。 代わりにグリッドを決定してから、サイズ情報を既存の意味論的クラスの規則に追加することができます。 例えば、8列にまたがる <code>content</code> のクラスが {{htmlelement("div")}} にある場合は、<code>span8</code> のクラスから <code>width</code> をコピーして、次のような規則を指定できます。</p>
+
+<pre class="brush: css notranslate">.content {
+  width: calc((6.25%*8) + (2.08333333%*7));
+}</pre>
+
+<div class="note">
+<p><strong>注</strong>: <a href="http://sass-lang.com/">Sass</a> などのプリプロセッサを使用する場合は、単純な mixin を作成してその値を挿入することができます。</p>
+</div>
+
+<h3 id="Enabling_offset_containers_in_our_grid" name="Enabling_offset_containers_in_our_grid">グリッドでオフセットしたコンテナを使えるようにする</h3>
+
+<p>作成したグリッドは、すべてのコンテナをグリッドの左側から始めてぴったり重ねる限り、うまく機能します。 最初のコンテナの前（または、コンテナ間）に空の列スペースを残したい場合は、視覚的にグリッドを横切って押すための左マージンを追加するためのオフセットクラスを作成する必要があります。 もっと数学！</p>
+
+<p>これを試してみましょう。</p>
+
+<p>以前のコードから始めるか、出発点として <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a> ファイルを使用してください。</p>
+
+<p>CSS でコンテナ要素を1列幅だけオフセットするクラスを作成しましょう。 CSS の最後に次を追加してください。</p>
+
+<pre class="brush: css notranslate">.offset-by-one {
+  margin-left: calc(6.25% + (2.08333333%*2));
+}</pre>
+
+<p>パーセントを自分で計算したい場合は、こちらを使用してください。</p>
+
+<pre class="brush: css notranslate">.offset-by-one {
+  margin-left: 10.41666666%;
+}</pre>
+
+<p>これで、このクラスを左側に1列幅の空きスペースに残したいコンテナに追加できます。 例えば、HTML に次のものがあるとします。</p>
+
+<pre class="brush: html notranslate">&lt;div class="col span6"&gt;14&lt;/div&gt;</pre>
+
+<p>これを次に置き換えてみてください。</p>
+
+<pre class="brush: html notranslate">&lt;div class="col span5 offset-by-one"&gt;14&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>注</strong>: オフセット用のスペースを確保するために、またがる列の数を減らす必要があることに注意してください！</p>
+</div>
+
+<p>違いを確認するには、ロードとリフレッシュを試してみるか、<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a> の例を確認してください（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">ライブでも見られます</a>）。 完成した例は次のようになります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p>
+
+<div class="note">
+<p><strong>注</strong>: 特別な演習として、<code>offset-by-two</code> クラスを実装できますか？</p>
+</div>
+
+<h3 id="Floated_grid_limitations" name="Floated_grid_limitations">フロートのグリッドの制限</h3>
+
+<p>このようなシステムを使用するときは、合計幅が正しく加算され、行に含むことができるよりも多くの列にまたがる要素を行に含めないように注意する必要があります。 フロートの機能のために、グリッドの列の数がグリッドに対して広くなりすぎると、最後の要素が次のラインにドロップダウンされ、グリッドが壊れます。</p>
+
+<p>また、要素のコンテンツがそれらが占める行よりも広くなると、オーバーフローしてだらしなく見えることも覚えておいてください。</p>
+
+<p>このシステムの最大の制限は、それが本質的に一次元であるということです。 私たちは列を扱っていて、要素は列にまたがっていますが、行には及んでいません。 これらの古いレイアウト方法では、高さを明示的に設定せずに要素の高さを制御することは非常に困難で、これも非常に柔軟性のない方法です — コンテンツが一定の高さになることを保証できる場合にのみ機能します。</p>
+
+<h2 id="Flexbox_grids" name="Flexbox_grids">フレックスボックスのグリッド？</h2>
+
+<p>以前の<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>に関する記事を読んだことがあれば、フレックスボックスがグリッドシステムを作成するための理想的な解決策であると考えるかもしれません。 利用可能な多くのフレックスボックスベースのグリッドシステムがあり、フレックスボックスは上記のグリッドを作成するときに私たちがすでに発見した問題の多くを解決することができます。</p>
+
+<p>ただし、フレックスボックスはグリッドシステムとして設計されたことはなく、その1つとして使用すると新しい一連の問題が発生します。 この簡単な例として、上記で使用したのと同じマークアップ例を使用し、次の CSS を使用して <code>wrapper</code>、<code>row</code>、<code>col</code> クラスをスタイルすることができます。</p>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+
+
+.row {
+  display: flex;
+}
+
+.col {
+  margin-left: 2.08333333%;
+  margin-bottom: 1em;
+  width: 6.25%;
+  flex: 1 1 auto;
+  background: rgb(255,150,150);
+}</pre>
+
+<p>あなた自身の例でこれらの置き換えをすることを試みるか、または <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html</a> の例のコードを見ることができます（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">ライブでも見られます</a>）。</p>
+
+<p>ここで各行をフレックスコンテナに変えています。 フレックスボックスベースのグリッドでは、合計が 100% 未満の要素を持つことができるようにするために、まだ行が必要です。 そのコンテナを <code>display: flex</code> に設定します。</p>
+
+<p><code>.col</code> では、{{cssxref("flex")}} プロパティの最初の値（{{cssxref("flex-grow")}}）を 1 に設定して項目を大きくできるようにし、2番目の値（{{cssxref("flex-shrink")}}）を 1 にして項目を縮小できるようにし、3番目の値（{{cssxref("flex-basis")}}）を <code>auto</code> に設定します。 この要素には {{cssxref("width")}} が設定されているので、<code>auto</code> はその幅を <code>flex-basis</code> の値として使用します。</p>
+
+<p>一番上のラインでは、グリッド上に12個のきちんとしたボックスが表示され、ビューポートの幅を変更すると、それらは均等に拡大および縮小されます。 しかし、次のラインでは、4つの項目しかなく、これらも基本の 60px から増減しています。 それらのうちの4つだけで、それらは上の行の項目よりもはるかに大きく成長することができ、その結果、それらはすべて2番目の行で同じ幅を占めます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p>
+
+<p>これを修正するには、その要素に対して <code>flex-basis</code> によって使用される値を置き換える幅を提供するために、<code>span</code> クラスを含める必要があります。</p>
+
+<p>それらは、直上の項目について何も知らないので、直上の項目によって使用されるグリッドを尊重もしません。</p>
+
+<p>フレックスボックスは設計上<strong>一次元</strong>です。 それは単一の次元、つまり行または列の次元を扱います。 列と行に厳密なグリッドを作成することはできません。 つまり、グリッドにフレックスボックスを使用する場合でも、フロートのレイアウトの場合と同様にパーセントを計算する必要があります。</p>
+
+<p>プロジェクトでは、フレックスボックスがフロートを介して提供する追加の位置合わせとスペース分配機能のために、フレックスボックスの「グリッド」を使用することを選択することもできます。 しかし、設計されたもの以外の何かのためのツールを使っているのだということを知っているべきです。 だからあなたは望む最終結果を得るために、それが追加の輪くぐりの輪を飛び越えさせているように感じているかもしれません。</p>
+
+<h2 id="Third_party_grid_systems" name="Third_party_grid_systems">サードパーティのグリッドシステム</h2>
+
+<p>グリッド計算の背後にある数学を理解したので、一般的に使用されているサードパーティのグリッドシステムのいくつかを検討するのに適した状況です。 ウェブ上で「CSS Grid framework」を検索すると、膨大な選択肢のリストが見つかるでしょう。 <a href="http://getbootstrap.com/">Bootstrap</a> や <a href="http://foundation.zurb.com/">Foundation</a> などの人気のあるフレームワークには、グリッドシステムが含まれています。 CSS やプリプロセッサを使用して開発されたスタンドアロンのグリッドシステムもあります。</p>
+
+<p>グリッドフレームワークを扱うための一般的なテクニックを説明しているので、これらのスタンドアロンシステムの1つを見てみましょう。これから使用するグリッドは、単純な CSS フレームワークである Skeleton の一部です。</p>
+
+<p>はじめに <a href="http://getskeleton.com/">Skeleton のウェブサイト</a>にアクセスし、「Download」を選択して ZIP ファイルをダウンロードします。 これを解凍し、<code>skeleton.css</code> ファイルと <code>normalize.css</code> ファイルを新しいディレクトリにコピーします。</p>
+
+<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a> ファイルのコピーを作成し、それを <code>skeleton.css</code> と <code>normalize.css</code> と同じディレクトリに保存します。</p>
+
+<p>その <code>head</code> に次を追加することによって、<code>skeleton.css</code> と <code>normalize.css</code> を HTML ページに含めます。</p>
+
+<pre class="brush: html notranslate">&lt;link href="normalize.css" rel="stylesheet"&gt;
+&lt;link href="skeleton.css" rel="stylesheet"&gt;</pre>
+
+<p>Skeleton にはグリッドシステム以上のものが含まれています — タイポグラフィや、出発点として使用できるその他のページ要素の CSS も含んでいます。 ただし、これらはデフォルトのままにします — ここで本当に関心があるのはグリッドです。</p>
+
+<div class="note">
+<p><strong>注</strong>: <a href="http://necolas.github.io/normalize.css/">Normalize</a> は Nicolas Gallagher によって書かれた本当に便利で小さな CSS ライブラリです。 これは基本的ないくつかの基本的なレイアウトの修正を自動的に行い、ブラウザー間でデフォルトの要素のスタイル設定をより一貫させます。</p>
+</div>
+
+<p>前の例と同様の HTML を使用します。 HTML の <code>body</code> に次を追加してください。</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;1&lt;/div&gt;
+    &lt;div class="col"&gt;2&lt;/div&gt;
+    &lt;div class="col"&gt;3&lt;/div&gt;
+    &lt;div class="col"&gt;4&lt;/div&gt;
+    &lt;div class="col"&gt;5&lt;/div&gt;
+    &lt;div class="col"&gt;6&lt;/div&gt;
+    &lt;div class="col"&gt;7&lt;/div&gt;
+    &lt;div class="col"&gt;8&lt;/div&gt;
+    &lt;div class="col"&gt;9&lt;/div&gt;
+    &lt;div class="col"&gt;10&lt;/div&gt;
+    &lt;div class="col"&gt;11&lt;/div&gt;
+    &lt;div class="col"&gt;12&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;13&lt;/div&gt;
+    &lt;div class="col"&gt;14&lt;/div&gt;
+    &lt;div class="col"&gt;15&lt;/div&gt;
+    &lt;div class="col"&gt;16&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p><br>
+ Skeleton を使い始めるためには、ラッパーの {{htmlelement("div")}} に <code>container </code>クラスを与える必要があります — これは既に HTML に含まれています。 これにより、最大幅 960 ピクセルのコンテンツが中央に配置されます。 ボックスが 960 ピクセルよりも広くならないことがわかります。</p>
+
+<p>このクラスを適用するときに使用される CSS を見るために <code>skeleton.css</code> ファイルを見ることができます。 <code>&lt;div&gt;</code> は <code>auto</code> の左右のマージンで中央に配置され、左右に 20 ピクセルのパディングが適用されます。 Skeleton はまた、先ほど行ったように {{cssxref("box-sizing")}} プロパティを <code>border-box</code> に設定するので、この要素のパディングとボーダーは合計幅に含まれます。</p>
+
+<pre class="brush: css notranslate">.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+}</pre>
+
+<p>要素が行内にある場合にのみ要素をグリッドの一部にすることができます。 前の例と同様に、<code>content</code> <code>&lt;div&gt;</code> と実際のコンテンツコンテナの <code>&lt;div&gt;</code> の間にネストした <code>row</code> クラスを持つ追加の <code>&lt;div&gt;</code> またはその他の要素が必要です。 これも既に行ってあります。</p>
+
+<p>それではコンテナボックスをレイアウトしましょう。 Skeleton は12列グリッドに基づいています。 一番上のラインのボックスはすべて、1列にまたがるようにするために <code>one column</code> クラスが必要です。</p>
+
+<p>次のスニペットに示すように、これらを追加します。</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="one column"&gt;1&lt;/div&gt;
+    &lt;div class="one column"&gt;2&lt;/div&gt;
+    &lt;div class="one column"&gt;3&lt;/div&gt;
+    /* and so on */
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>次に、2番目の <code>row</code> クラスのコンテナに、それらがまたがるべき列数を説明します。</p>
+
+<pre class="brush: html notranslate">&lt;div class="row"&gt;
+  &lt;div class="one column"&gt;13&lt;/div&gt;
+  &lt;div class="six columns"&gt;14&lt;/div&gt;
+  &lt;div class="three columns"&gt;15&lt;/div&gt;
+  &lt;div class="two columns"&gt;16&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>HTML ファイルを保存してブラウザーにロードして、効果を確認してください。</p>
+
+<div class="note">
+<p><strong>注</strong>: この例がうまく動作しない場合は、<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> ファイルと比較してみてください（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">ライブでも見られます</a>）。</p>
+</div>
+
+<p><code>skeleton.css</code> ファイルを見ると、これがどのように機能するかがわかります。 例えば、Skeleton には、「<code>three columns</code>」クラスを追加して要素をスタイルするための次の定義があります。</p>
+
+<pre class="brush: css notranslate">.three.columns { width: 22%; }</pre>
+
+<p>Skeleton（または他のグリッドフレームワーク）が行っていることはすべて、マークアップに追加することで使用できる定義済みクラスを設定することだけです。 これらのパーセントを自分で計算する作業を行ったのとまったく同じです。</p>
+
+<p>ご覧のとおり、Skeleton を使用するときには、CSS をほとんど書く必要がありません。 マークアップにクラスを追加すると、すべてのフロートが処理されます。 グリッドシステムのフレームワークを使用することを説得力のある選択にしたのは、レイアウトに対する責任を他に引き継ぐ、この能力です！ しかし最近では、CSS グリッドレイアウトを使用して、多くの開発者がこれらのフレームワークから CSS が提供する内蔵されたネイティブグリッドを使用するように移行しています。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>これで、さまざまなグリッドシステムの作成方法が理解できました。 これは、古いサイトでの作業や、CSS グリッドレイアウトのネイティブグリッドとこれらの古いシステムとの違いの理解に役立ちます。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/media_queries/index.html b/files/ja/learn/css/css_layout/media_queries/index.html
new file mode 100644
index 0000000000..6cfb1366b1
--- /dev/null
+++ b/files/ja/learn/css/css_layout/media_queries/index.html
@@ -0,0 +1,445 @@
+---
+title: メディアクエリーの初心者向けガイド
+slug: Learn/CSS/CSS_layout/Media_queries
+tags:
+  - Beginner
+  - CSS
+  - Layout
+  - Learn
+  - media query
+translation_of: Learn/CSS/CSS_layout/Media_queries
+---
+<p>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p>
+
+<p><strong>CSS メディアクエリー</strong>（CSS Media Query）を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定した規則に一致する場合にのみ CSS を適用できます。 メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブ Web デザイン（responsive web design、RWD）の重要な部分ですが、例えば、ユーザーはマウスではなくタッチスクリーンを使用しているというような、サイトが実行されている環境に関する他のものを検出するためにも使用できます。 このレッスンでは、最初にメディアクエリーで使用される構文について学習し、次に単純なデザインでどのようにレスポンシブにするかを示す実際の例で使用してみます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>と <a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>メディアクエリーの使用方法、およびそれらを使用してレスポンシブデザインを作成するための最も一般的なアプローチを理解する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Media_Query_Basics" name="Media_Query_Basics">メディアクエリーの基本</h2>
+
+<p>最も単純なメディアクエリーの構文は次のようになります。</p>
+
+<pre class="brush: css notranslate">@media <em>media-type</em> and (<em>media-feature-rule</em>) {
+  /* CSS 規則をここに */
+}</pre>
+
+<p>これは、次のもので構成されます。</p>
+
+<ul>
+ <li>メディアタイプ（media type）。 このコードがどのようなメディア（例えば、印刷、画面）のためのものであるかをブラウザーに伝えます。</li>
+ <li>メディア式。 規則（rule）または、含まれている CSS を適用するために合格する必要があるテストです。</li>
+ <li>CSS 規則のセット。 テストに合格し、メディアタイプが正しい場合に適用されます。</li>
+</ul>
+
+<h3 id="Media_types" name="Media_types">メディアタイプ</h3>
+
+<p>指定できるメディアの種類は次のとおりです。</p>
+
+<ul>
+ <li><code>all</code>（すべて）</li>
+ <li><code>print</code>（印刷）</li>
+ <li><code>screen</code>（画面）</li>
+ <li><code>speech</code>（音声合成）</li>
+</ul>
+
+<p>次のメディアクエリーは、ページが印刷される場合にのみ <code>body</code> を <code>12pt</code> に設定します。 ページがブラウザーにロードされるときは適用されません。</p>
+
+<pre class="brush: css notranslate"><code>@media print {
+    body {
+        font-size: 12pt;
+    }
+}</code></pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: ここでのメディアタイプは、いわゆる {{glossary("MIME type","MIME タイプ")}}とは異なります。</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: レベル3のメディアクエリー仕様には、他にも多くのメディアタイプが定義されています。 これらは非推奨であり、避けるべきです。</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: メディアタイプはオプションです。 メディアクエリーでメディアタイプを指定しない場合、メディアクエリーはデフォルトですべてのメディアタイプ用になります。</p>
+</div>
+
+<h3 id="Media_feature_rules" name="Media_feature_rules">メディア特性の規則</h3>
+
+<p>タイプを指定したら、規則を使用してメディア特性（media feature）を対象にできます。</p>
+
+<h4 id="Width_and_height" name="Width_and_height">幅と高さ</h4>
+
+<p>レスポンシブデザインを作成するために最も頻繁に検出される特性（そして広範なブラウザーサポートを備えた特性）は、ビューポートの幅で、ビューポートが特定の幅よりも上または下にある（または正確な幅の）場合に、CSS を適用できます。 これには、<code>min-width</code>、<code>max-width</code>、<code>width</code> のメディア特性を使用します。</p>
+
+<p>これらの特性は、さまざまな画面サイズに対応するレイアウトを作成するために使用されます。 例えば、ビューポートが正確に 600 ピクセルの場合に <code>body</code> のテキストの色を赤に変更するには、次のメディアクエリーを使用します。</p>
+
+<pre class="brush: css notranslate"><code>@media screen and (width: 600px) {
+    body {
+        color: red;
+    }
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">ソースを表示</a>します。</p>
+
+<p><code>width</code>（および <code>height</code>）のメディア特性は範囲として使用でき、<code>min-</code> または <code>max-</code> を前に付けて、指定された値が最小または最大であることを示します。 例えば、ビューポートが 600 ピクセルより狭い場合に色を青にするには、次のように <code>max-width</code> を使用します。</p>
+
+<pre class="brush: css notranslate"><code>@media screen and (max-width: 600px) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">ソースを表示</a>します。</p>
+
+<p>実際には、レスポンシブデザインでは最小値または最大値を使用する方がはるかに便利であるため、<code>width</code> または <code>height</code> を単独で使用することはほとんどありません。</p>
+
+<p>テストできるメディア特性は他にも多数ありますが、メディアクエリー仕様のレベル4および5で導入された新しい特性の一部は、ブラウザーサポートが制限されています。 各特性は、ブラウザーサポート情報とともに MDN で文書化されていて、完全なリストは、<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディアクエリーの使用: メディア特性</a>で見つけることができます。</p>
+
+<h4 id="Orientation" name="Orientation">オリエンテーション</h4>
+
+<p>よくサポートされているメディア特性の1つはオリエンテーション（<code>orientation</code>）です。 これにより、ポートレートモード（<code>portrait</code> mode、肖像画のような縦長）またはランドスケープモード（<code>landscape</code> mode、風景画のような横長）をテストできます。 デバイスがランドスケープの場合に本文の色を変更するには、次のメディアクエリーを使用します。</p>
+
+<pre class="brush: css notranslate"><code>@media (orientation: landscape) {
+    body {
+        color: rebeccapurple;
+    }
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">ソースを表示</a>します。</p>
+
+<p>標準のデスクトップビューはランドスケープであり、このオリエンテーションで適切に機能するデザインは、ポートレートモードの携帯電話またはタブレットで表示した場合に機能しない場合があります。 オリエンテーションのテストは、ポートレートモードのデバイス用に最適化されたレイアウトの作成に役立ちます。</p>
+
+<h4 id="Use_of_pointing_devices" name="Use_of_pointing_devices">ポインティングデバイスの使用</h4>
+
+<p>レベル4仕様の一部として、ホバー（<code>hover</code>）メディア特性が導入されました。 この特性は、ユーザーが要素の上にポインターを乗せることができるかどうかをテストできることを意味します。 つまり、本質的に何らかのポインティングデバイスを使用していることを意味します。 タッチスクリーンとキーボードナビゲーションはホバーしません。</p>
+
+<pre class="brush: css notranslate"><code>@media (hover: hover) {
+    body {
+        color: rebeccapurple;
+    }
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">ソースを表示</a>します。</p>
+
+<p>ユーザーがホバーできないことがわかっている場合、デフォルトでいくつかのインタラクティブ機能を表示できます。 ホバーできるユーザーの場合、リンクの上にポインターを乗せたときにそれらを利用可能にすることを選択できます。</p>
+
+<p>レベル4には、ポインター（<code>pointer</code>）メディア特性もあります。 これには、<code>none</code>（なし）、<code>fine</code>（細かい）、<code>coarse</code>（粗い）の3つの値があります。 <code>fine</code> ポインターは、マウスやトラックパッドのようなものです。 これにより、ユーザーは狭い領域を正確に対象にすることができます。 <code>coarse</code> ポインターは、タッチスクリーン上の指です。 値 <code>none</code> は、ユーザーにポインティングデバイスがないことを意味し、おそらく、キーボードのみ、または音声コマンドでナビゲートしています。</p>
+
+<p><code>pointer</code> を使用すると、ユーザーが画面に対して行っている操作の種類に対応する、より優れたインターフェイスを設計できます。 例えば、ユーザーがタッチスクリーンでデバイスと対話していることがわかっている場合、より大きなヒット領域を作成できます。</p>
+
+<h2 id="More_complex_media_queries" name="More_complex_media_queries">より複雑なメディアクエリー</h2>
+
+<p>考えられるさまざまなメディアクエリーのすべてを使用して、それらを組み合わせたり、いずれにも一致する可能性があるクエリーのリストを作成したりすることができます。</p>
+
+<h3 id="and_logic_in_media_queries" name="and_logic_in_media_queries">メディアクエリーの "and" 論理</h3>
+
+<p>メディア特性を組み合わせるには、上記で <code>and</code> を使用してメディアタイプとメディア特性を組み合わせるのとほぼ同じ方法で <code>and</code> を使用できます。 例えば、<code>min-width</code> と <code>orientation</code> をテストする場合があります。 ビューポートの幅が少なくとも 600 ピクセルで、デバイスがランドスケープモードの場合にのみ <code>body</code> のテキストは青色になります。</p>
+
+<pre class="brush: css notranslate"><code>@media screen and (min-width: 600px) and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">ソースを表示</a>します。</p>
+
+<h3 id="or_logic_in_media_queries" name="or_logic_in_media_queries">メディアクエリーの "or" 論理</h3>
+
+<p>クエリーのセットがあり、そのいずれかが一致する場合、これらのクエリーをコンマで区切ることができます。 次の例では、ビューポートの幅が少なくとも 600 ピクセルの場合、<strong>または</strong>デバイスがランドスケープの場合、テキストは青になります。 これらのいずれかが当てはまる場合、クエリーは一致します。</p>
+
+<pre class="brush: css notranslate"><code>@media screen and (min-width: 600px), screen and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">ソースを表示</a>します。</p>
+
+<h3 id="not_logic_in_media_queries" name="not_logic_in_media_queries">メディアクエリーの "not" 論理</h3>
+
+<p><code>not</code> 演算子を使用して、メディアクエリー全体を否定することができます。 これにより、メディアクエリー全体の意味が逆になります。 したがって、次の例では、オリエンテーションがポートレートの場合にのみテキストが青になります。</p>
+
+<pre class="brush: css notranslate"><code>@media not all and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">ソースを表示</a>します。</p>
+
+<h2 id="How_to_choose_breakpoints" name="How_to_choose_breakpoints">ブレークポイントの選択方法</h2>
+
+<p>レスポンシブデザインの初期には、多くのデザイナーが非常に具体的な画面サイズを対象にしようとしました。 人気のある携帯電話やタブレットの画面のサイズのリストは、それらのビューポートにきちんと一致するデザインを作成できるように公開されました。</p>
+
+<p>現在、非常に多様なサイズのデバイスが多すぎて、それを実現できません。 つまり、すべてのデザインにおいて特定のサイズを対象にするのではなく、コンテンツが何らかの方法で壊れ始める（starts to break）サイズでデザインを変更することをお勧めします。 おそらく、行の長さが非常に長くなるか、枠で囲まれたサイドバーが押しつぶされて読みにくくなります。 これが、メディアクエリーを使用して、使用可能なスペースに合わせてデザインをより良いものに変更するポイントです。 このアプローチは、使用されているデバイスの正確な寸法は問題ではなく、あらゆる範囲に対応できることを意味します。 メディアクエリーが導入されるポイントは、<strong>ブレークポイント</strong>（breakpoints）と呼ばれます。</p>
+
+<p>Firefox 開発ツールの<a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a>は、これらのブレークポイントがどこに行くべきかを判断するのに非常に便利です。 メディアクエリーを追加してデザインを微調整しながら、ビューポートを小さくしたり大きくしたりして、コンテンツが改善される場所を簡単に確認できます。</p>
+
+<p><img alt="Firefox 開発ツールのモバイルビューのレイアウトのスクリーンショット。" src="https://mdn.mozillademos.org/files/16867/rwd-mode.png" style="height: 917px; width: 1443px;"></p>
+
+<h2 id="Active_learning_mobile_first_responsive_design" name="Active_learning_mobile_first_responsive_design">能動的学習: モバイルファースト レスポンシブデザイン</h2>
+
+<p>レスポンシブデザインには、大きく分けて2つのアプローチがあります。 デスクトップまたは最も広いビューから始めて、ビューポートが小さくなるにつれて並べ替えるためのブレークポイントを追加するか、最小のビューから始めて、ビューポートが大きくなるにつれてレイアウトを追加することができます。 この2番目のアプローチは、<strong>モバイルファースト</strong> レスポンシブデザインと呼ばれ、多くの場合、従うべき最善のアプローチです。</p>
+
+<p>非常に小さなデバイスのビューは、通常フローで見られるように、多くの場合、コンテンツの単純な1列です。 これは、小さなデバイスに対して多くのレイアウトを行う必要がほとんどないことを意味します — ソースを適切な順序にすれば、デフォルトで読みやすいレイアウトになります。</p>
+
+<p>以下のチュートリアルでは、非常に単純なレイアウトでこのアプローチを説明します。 実稼働サイトでは、メディアクエリー内で調整する必要があるものが多くありますが、アプローチはまったく同じです。</p>
+
+<h3 id="Walkthrough_a_simple_mobile-first_layout" name="Walkthrough_a_simple_mobile-first_layout">チュートリアル: 単純なモバイルファーストのレイアウト</h3>
+
+<p>出発点は、レイアウトのさまざまな部分に背景色を追加するために CSS を適用した HTML ドキュメントです。</p>
+
+<pre class="brush: css notranslate"><code>* {
+    box-sizing: border-box;
+}
+
+body {
+    width: 90%;
+    margin: 2em auto;
+    font: 1em/1.3 Arial, Helvetica, sans-serif;
+}
+
+a:link,
+a:visited {
+    color: #333;
+}
+
+nav ul,
+aside ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav a:link,
+nav a:visited {
+    background-color: rgba(207, 232, 220, 0.2);
+    border: 2px solid rgb(79, 185, 227);
+    text-decoration: none;
+    display: block;
+    padding: 10px;
+    color: #333;
+    font-weight: bold;
+}
+
+nav a:hover {
+    background-color: rgba(207, 232, 220, 0.7);
+}
+
+.related {
+    background-color: rgba(79, 185, 227, 0.3);
+    border: 1px solid rgb(79, 185, 227);
+    padding: 10px;
+}
+
+.sidebar {
+    background-color: rgba(207, 232, 220, 0.5);
+    padding: 10px;
+}
+
+article {
+    margin-bottom: 1em;
+}
+</code></pre>
+
+<p>レイアウトの変更は行っていませんが、ドキュメントのソースはコンテンツが読みやすいように並べられています。 これは重要な最初のステップであり、コンテンツがスクリーンリーダーで読み上げられる場合に理解できるようにするものです。</p>
+
+<pre class="brush: html notranslate"><code>&lt;body&gt;
+    &lt;div class="wrapper"&gt;
+      &lt;header&gt;
+        &lt;nav&gt;
+          &lt;ul&gt;
+            &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href=""&gt;Meet the team&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href=""&gt;Blog&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/nav&gt;
+      &lt;/header&gt;
+      &lt;main&gt;
+        &lt;article&gt;
+          &lt;div class="content"&gt;
+            &lt;h1&gt;Veggies!&lt;/h1&gt;
+            &lt;p&gt;
+              ...
+            &lt;/p&gt;
+          &lt;/div&gt;
+          &lt;aside class="related"&gt;
+            &lt;p&gt;
+              ...
+            &lt;/p&gt;
+          &lt;/aside&gt;
+        &lt;/article&gt;
+
+        &lt;aside class="sidebar"&gt;
+          &lt;h2&gt;External vegetable-based links&lt;/h2&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              ...
+            &lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/aside&gt;
+      &lt;/main&gt;
+
+      &lt;footer&gt;&lt;p&gt;&amp;copy;2019&lt;/p&gt;&lt;/footer&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+</code></pre>
+
+<p>この単純なレイアウトはモバイルでもうまく機能します。 開発ツールのレスポンシブデザインモードでレイアウトを眺めると、サイトのモバイルビューそのものと同じように機能することがわかります。</p>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/step1.html">ステップ1を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">ソースを表示</a>します。</p>
+
+<p><strong>この例をフォローして実装してみたい場合は、コンピューターに <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">step1.html</a> のローカルコピーを作成します。</strong></p>
+
+<p>このポイントから、行の長さが非常に長くなり、ナビゲーションのためのスペースが水平線で表示されるまで、レスポンシブデザインモードのビューのドラッグを始めます。 これが、最初のメディアクエリーを追加する場所です。 <code>em</code> を使用すると、ユーザーがテキストのサイズを大きくした場合、テキストのサイズが小さいユーザーよりも、同様の行長で広いビューポートでブレークポイントが発生します。</p>
+
+<p><strong>step1.html の CSS の下部に以下のコードを追加します。</strong></p>
+
+<pre class="brush: css notranslate"><code>@media screen and (min-width: 40em) {
+    article {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    nav ul {
+        display: flex;
+    }
+
+    nav li {
+        flex: 1;
+    }
+}
+</code></pre>
+
+<p>この CSS は、記事（<code>article</code>）内の2列のレイアウトで、記事のコンテンツ（<code>content</code>）および余談（<code>aside</code>）要素の関連（<code>related</code>）情報を提供します。 また、フレックスボックスを使用してナビゲーション（<code>nav</code>）を1行に配置します。</p>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/step2.html">ステップ2を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html">ソースを表示</a>します。</p>
+
+<p>サイドバー（<code>sidebar</code>）が新しい列を形成するのに十分なスペースがあると感じるまで、幅を拡張し続けます。 メディアクエリー内で、主要な（<code>main</code>）要素を2列のグリッドにします。 次に、2つのサイドバーが互いに揃うように <code>article</code> の {{cssxref("margin-bottom")}} を削除する必要があります。 フッター（<code>footer</code>）の上部に {{cssxref("border")}} を追加します。 通常、これらの小さな調整は、各ブレークポイントでデザインをきれいに見せるために行うことです。</p>
+
+<p><strong>再び、step1.html の CSS の下部に以下のコードを追加します。</strong></p>
+
+<pre class="brush: css notranslate"><code>@media screen and (min-width: 70em) {
+    main {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    article {
+        margin-bottom: 0;
+    }
+
+    footer {
+        border-top: 1px solid #ccc;
+        margin-top: 2em;
+    }
+}</code>
+</pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/step3.html">ステップ3を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html">ソースを表示</a>します。</p>
+
+<p>さまざまな幅で最後の例を見ると、デザインがどのように反応し、利用可能な幅に応じて1列、2列、または3列として機能するかを確認できます。 これは、モバイルファースト レスポンシブデザインの非常に単純な例です。</p>
+
+<h2 id="The_viewport_meta_tag">The viewport meta tag</h2>
+
+<p>If you look at the HTML source in the above example, you'll see the following element included in the head of the document:</p>
+
+<pre class="brush: html notranslate">&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;</pre>
+
+<p>This is the <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a> — it exists as a way control how mobile browsers render content. This is needed because by default, most mobile browsers lie about their viewport width. Non-responsive sites commonly look really bad when rendered in a narrow viewport, so mobile browsers usually render the site with a viewport width wider than the real device width by default (usually 960 pixels), and then shrink the rendered result so that it fits in the display.</p>
+
+<p>This is all well and good, but it means that responsive sites are not going to work as expected. If the viewport width is reported as 960 pixels, then mobile layouts (for example created using a media query of <code>@media screen and (max-width: 600px) { ... }</code>) are not going to render as expected.</p>
+
+<p>To remedy this, including a viewport meta tag like the one above on your page tells the browser "don't render the content with a 960 pixel viewport — render it using the real device width instead, and set a default initial scale level for better consistency." The media queries will then kick in as expected.</p>
+
+<p>There are a number of other options you can put inside the <code>content</code> attribute of the viewport meta tag — see <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a> for more details.</p>
+
+<h2 id="Do_you_really_need_a_media_query" name="Do_you_really_need_a_media_query">メディアクエリーが本当に必要ですか？</h2>
+
+<p>フレックスボックス、グリッド、および段組みのレイアウトはすべて、メディアクエリーを必要とせずに、柔軟でレスポンシブなコンポーネントを作成する方法を提供します。 これらのレイアウト方法が、メディアクエリーを追加せずに目的を達成できるかどうかを常に検討する価値があります。 例えば、少なくとも 200 ピクセル幅のカードのセットが必要な場合があります。 これらの 200 ピクセルの多くは、<code>main</code> の <code>article</code> に収まります。 これは、メディアクエリーをまったく使用せずに、グリッドレイアウトで実現できます。</p>
+
+<p>これは、次を使用して実現できます。</p>
+
+<pre class="brush: html notranslate"><code>&lt;ul class="grid"&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 1&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 2&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 3&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 4&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;Card 5&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+<pre class="brush: css notranslate"><code>.grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.grid li {
+    border: 1px solid #666;
+    padding: 10px;
+}</code></pre>
+
+<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">グリッドレイアウトの例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">ソースを表示</a>します。</p>
+
+<p>ブラウザーで例を開いた状態で、画面を拡大および縮小して、列トラック数の変更を確認します。 このメソッドの良い点は、グリッドがビューポートの幅ではなく、このコンポーネントで使用可能な幅を見ていることです。 メディアクエリーに関するセクションに、それがまったく必要ないかもしれないという提案をまとめるのは奇妙に思えるかもしれません！ しかしながら、実際には、メディアクエリーで強化された最新のレイアウト方法を適切に使用すると、最良の結果が得られることがわかります。</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>このレッスンでは、メディアクエリーについて学び、実際にそれらを使用してモバイルファースト レスポンシブデザインを作成する方法もみいだしました。</p>
+
+<p>作成した開始点を使用して、さらにメディアクエリーをテストできます。 例えば、<code>pointer</code> メディア特性を使用して、訪問者が粗いポインターを持つことを検出した場合、ナビゲーションのサイズを変更できます。</p>
+
+<p>また、さまざまなコンポーネントを追加して、メディアクエリーを追加するか、フレックスボックスやグリッドなどのレイアウト方法を使用するのがコンポーネントをレスポンシブにするのに最も適切な方法かどうかを試すこともできます。 多くの場合、正しい方法も間違った方法もありません。 あなたのデザインとコンテンツに最適な方法を試してみてください。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/multiple-column_layout/index.html b/files/ja/learn/css/css_layout/multiple-column_layout/index.html
new file mode 100644
index 0000000000..036bb7daf6
--- /dev/null
+++ b/files/ja/learn/css/css_layout/multiple-column_layout/index.html
@@ -0,0 +1,417 @@
+---
+title: 段組みレイアウト
+slug: Learn/CSS/CSS_layout/Multiple-column_Layout
+tags:
+  - Beginner
+  - CSS
+  - Guide
+  - Layout
+  - Learn
+  - Learning
+  - Multi-col
+  - Multiple columns
+translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><span class="seoSummary">段組みレイアウトの仕様では、新聞に見られるような、コンテンツを段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>ウェブページ上で、新聞に見られるような、段組みレイアウトを作成する方法を学ぶこと。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A_basic_example" name="A_basic_example">基本的な例</h2>
+
+<p>ここでは、しばしば <em>multicol</em> と呼ばれる、段組みレイアウトの使用方法を探ります。 あなたは、<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">multicol の出発点ファイルをダウンロード</a>して、適切な場所に CSS を追加することによって、従うことができます。 このセクションの一番下には、最終的なコードがどのようになっているかの実例があります。</p>
+
+<p>出発点にはいくつかの非常に単純な HTML を含んでいます。 <code>container</code> のクラスを持つラッパーに見出しといくつかの段落が入っています 。</p>
+
+<p><code>container</code> のクラスを持つ {{htmlelement("div")}} を、 multicol コンテナとします。 2つのプロパティ {{cssxref("column-count")}} または {{cssxref("column-width")}} のいずれかを使用して、multicol をオンにします。 <code>column-count</code> プロパティは与えた値と同じ数の段（column）を作成するので、スタイルシートに次の CSS を加えて、ページをリロードすれば、あなたは3つの段を得るでしょう。</p>
+
+<pre class="brush: css">.container {
+  column-count: 3;
+}
+</pre>
+
+<p>作成した段の幅は可変です — ブラウザーは各段に割り当てるためのスペースを計算します。</p>
+
+<div id="Multicol_1">
+<div class="hidden">
+<h6 id="column-count_example">column-count example</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+    </pre>
+</div>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;h1&gt;Simple multicol example&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.container {
+  column-count: 3;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_1', '100%', 400) }}</p>
+
+<p>次のように CSS を変更して <code>column-width</code> を使用します。</p>
+
+<pre class="brush: css">.container {
+  column-width: 200px;
+}
+</pre>
+
+<p>ブラウザーは指定したサイズでできる数の段を与えます。 残りのスペースは既存の段間で共有されます。 これは、コンテナがその幅で正確に割り切れない限り、指定した幅と正確には一致しないことを意味します。</p>
+
+<div id="Multicol_2">
+<div class="hidden">
+<h6 id="column-width_example">column-width example</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;h1&gt;Simple multicol example&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<pre class="brush: css">.container {
+  column-width: 200px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_2', '100%', 400) }}</p>
+
+<h2 id="Styling_the_columns" name="Styling_the_columns">段をスタイリングする</h2>
+
+<p>multicol によって作成された段を個別にスタイリングすることはできません。 1つの段を他の段より大きくしたり、単一の段の背景色やテキストの色を変更したりする方法はありません。 段の表示方法を変更する機会は次の2つがあります。</p>
+
+<ul>
+ <li>{{cssxref("column-gap")}} を使用して段間のギャップのサイズを変更します。</li>
+ <li>{{cssxref("column-rule")}} を使用して段間に線を追加します。</li>
+</ul>
+
+<p>上記の例を使用して、次のように <code>column-gap</code> プロパティを追加してギャップのサイズを変更します。</p>
+
+<pre class="brush: css">.container {
+  column-width: 200px;
+  column-gap: 20px;
+}</pre>
+
+<p>さまざまな値で遊ぶことができます — このプロパティは任意の長さの単位を受け入れます。 今度は <code>column-rule</code> で、段の間に線（rule、罫線）を追加します。 前のレッスンで遭遇した {{cssxref("border")}} プロパティと同様に、<code>column-rule</code> は {{cssxref("column-rule-color")}}、{{cssxref("column-rule-style")}}、{{cssxref("column-rule-width")}} の一括指定で、<code>border</code> と同じ値を受け入れます。</p>
+
+<pre class="brush: css">.container {
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 4px dotted rgb(79, 185, 227);
+}</pre>
+
+<p>さまざまなスタイルや色の線を追加してみてください。</p>
+
+<div id="Multicol_3">
+<div class="hidden">
+<h6 id="Styling_the_columns_2">Styling the columns</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+.container {
+ column-count: 3;
+ column-gap: 20px;
+ column-rule: 4px dotted rgb(79, 185, 227);
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;h1&gt;Simple multicol example&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_3', '100%', 400) }}</p>
+
+<p>注意すべきことは、線がそれ自体の幅を占めることはないということです。 それは <code>column-gap</code> で作ったギャップの向こう側にあります。 線の両側にスペースを増やすには、<code>column-gap</code> のサイズを増やす必要があります。</p>
+
+<h2 id="Columns_and_fragmentation" name="Columns_and_fragmentation">段と断片化</h2>
+
+<p>段組みレイアウトのコンテンツは断片化されています。 ウェブページを印刷するときなど、ページ付きメディアでコンテンツがふるまうのと基本的に同じようにふるまいます。 コンテンツを multicol コンテナに入れるとき、それは段に断片化されます。 そして、コンテンツはこれを可能にするために分割されます。</p>
+
+<p>時々、この分割は良くない読書体験をもたらす場所で起こるでしょう。 以下の実例では、multicol を使用して一連のボックスをレイアウトしました。 各ボックスの中には見出しとテキストがあります。 段がその2つの間で断片化すると、見出しはテキストから分離されます。</p>
+
+<div id="Multicol_4">
+<div class="hidden">
+<h6 id="Cards_example">Cards example</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}            </pre>
+</div>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_4', '100%', 600) }}</p>
+
+<p>このふるまいを制御するために、<a href="/ja/docs/Web/CSS/CSS_Fragmentation">CSS 分割</a>の仕様のプロパティを使用できます。 この仕様は、multicol とページ付きメディアでのコンテンツの分割を制御するためのプロパティを提供します。 例えば、<code>.card</code> の規則には、プロパティ {{cssxref("break-inside")}} を <code>avoid</code> の値で追加します。 これは見出しとテキストのコンテナなので、このボックスを断片化したくありません。</p>
+
+<p>現時点では、ブラウザーを最大限にサポートするために、古いプロパティ <code>page-break-inside: avoid</code> を追加することも価値があります。</p>
+
+<pre class="brush: css">.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+</pre>
+
+<p>ページをリロードすると、ボックスは一体になっているはずです。</p>
+
+<div id="Multicol_5">
+<div class="hidden">
+<h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}              </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css">.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_5', '100%', 600) }}</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>これで、構築中のデザインのレイアウト方法を選択するときに、意のままにできるもう一つのツールである段組みレイアウトの基本機能の使用方法がわかりました。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Fragmentation">CSS 分割</a></li>
+ <li><a href="/ja/docs/Web/Guide/CSS/Using_multi-column_layouts">段組みレイアウトの使用</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/normal_flow/index.html b/files/ja/learn/css/css_layout/normal_flow/index.html
new file mode 100644
index 0000000000..3e9965ce6f
--- /dev/null
+++ b/files/ja/learn/css/css_layout/normal_flow/index.html
@@ -0,0 +1,103 @@
+---
+title: 通常フロー
+slug: Learn/CSS/CSS_layout/Normal_Flow
+tags:
+  - Beginner
+  - CSS
+  - Layout
+  - Learn
+  - float
+  - grid
+  - normal flow
+translation_of: Learn/CSS/CSS_layout/Normal_Flow
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary"><span class="seoSummary">この記事では、通常フロー、つまりレイアウトを変更していない場合のウェブページの要素のレイアウト方法について説明します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基礎 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ)、および CSS の機能の考え方 (<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ)。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>変更を加える前に、ブラウザーがデフォルトでウェブページをどのようにレイアウトするかを説明します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>レイアウトを紹介した前回のレッスンで詳しく説明したように、CSS を適用してふるまいを変更していない場合、ウェブページ上の要素は通常フローでレイアウトされます。そして、理解を深め始めるにつれ、その通常フローの中で要素の位置を調整したり、要素を完全に取り除くたりして、要素のふるまいを変更できます。通常フローで読み取り可能な、しっかりとよく構造化された文書から始めることは、どんなウェブページでも始めるための最良の方法です。それは、ユーザーが非常に制限されたブラウザーを使用している場合や、ページのコンテンツを読み上げるスクリーンリーダーなどのデバイスを使用している場合でも、コンテンツを読みやすくすることができます。さらに、通常フローは読み取り可能な文書を作成するように設計されているので、この方法で始めることで、レイアウトを変更するときに文書と戦うのではなく文書とともに作業します。</p>
+
+<p>さまざまなレイアウト方法を深く掘り下げる前に、以前のモジュールで通常のドキュメントフローに関して検討したことのいくつかを再検討する価値があります。</p>
+
+<h2 id="How_are_elements_laid_out_by_default" name="How_are_elements_laid_out_by_default">要素はデフォルトでどのようにレイアウトされますか？</h2>
+
+<p>まず初めに、個々の要素ボックスは要素のコンテンツを取り、それからそれらの周りにパディング (padding、詰め物)、ボーダー (border、境界線) そしてマージン (margin、余白) を追加することによってレイアウトされます — これはまた以前に見たことがある<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">ボックスモデル</a>のことです。</p>
+
+<p>デフォルトでは、<a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>のコンテンツは、その親要素の幅の 100% で、そのコンテンツと同じ高さです <a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a>は、コンテンツと同じ高さで、コンテンツと同じ幅です。インライン要素に幅や高さを設定することはできません — それらはブロックレベル要素のコンテンツの中にあるだけです。この方法でインライン要素のサイズを制御したい場合は、<code>display: block;</code> を使用してブロックレベル要素のようにふるまうように設定する必要があります (あるいは、<code>display: inline-block;</code> で、両方の特性を混在させます)。</p>
+
+<p>それは個々の要素を説明していますが、要素がどのように相互作用するかについてはどうでしょうか？ 通常のレイアウトフロー (レイアウト入門の記事に記載) は、ブラウザーのビューポート内に要素を配置するシステムです デフォルトでは、ブロックレベル要素は、親の<a href="/ja/docs/Web/CSS/writing-mode">書字方向モード</a> (writing mode、<em>初期</em> は horizontal-tb) に基づいて<em>ブロックのフロー方向</em> にレイアウトされます — 各要素は、最後の要素の下の新しい行に表示され、それらに設定されたマージンで区切られます したがって英語やその他の横書きで、上から下へ改行する書字方向モードでは、ブロックレベル要素は垂直にレイアウトされます。</p>
+
+<p>インライン要素は異なるふるまいをします — 新しい行に現れません。代わりに、親ブロックレベル要素の幅の内側にマージンがある限り、それらは互いに同じ行に配置され、隣接する (または折り返された) テキストコンテンツに配置されます。スペースがなければ、あふれているテキストや要素は新しい行に移動します。</p>
+
+<p>隣接する 2 つの要素の両方にマージンが設定されていて、2 つのマージンが接触している場合、2 つのうち大きい方が残り、小さい方が消えます — これは<a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺</a> (margin collapsing) と呼ばれます。</p>
+
+<p>これらすべてを説明する簡単な例を見てみましょう。</p>
+
+<div id="Normal_Flow">
+<pre class="brush: html notranslate">&lt;h1&gt;基本的なドキュメントフロー&lt;/h1&gt;
+
+&lt;p&gt;これは基本的なブロックレベル要素です。隣接するブロックレベル要素は下の新しい行に配置されています。&lt;/p&gt;
+
+&lt;p&gt;デフォルトでは、親要素の幅の 100% にまたがり、子コンテンツと同じ高さになります。幅と高さの合計は、コンテンツ + パディング + ボーダーの幅/高さです。&lt;/p&gt;
+
+&lt;p&gt;マージンによって分けられています。マージンの相殺のため、両方ではなく、1 つのマージンの幅で区切られます。&lt;/p&gt;
+
+&lt;p&gt;&lt;span&gt;これ&lt;/span&gt;および&lt;span&gt;これのような&lt;/span&gt;インライン要素は、同じ行に配置され、同じ行にスペースがある場合は隣接するテキストノードに配置されます。オーバーフローするインライン要素は&lt;span&gt;可能であれば新しいラインに折り返され (これのようにテキストを含む)&lt;/span&gt;、そうでなければ次の画像のように単に新しい行に進むでしょう。&lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>通常フロー、およびブラウザーがデフォルトでどのようにレイアウトするかを理解したので、次にこのデフォルトの <code>display</code> を変更してデザインに必要なレイアウトを作成する方法を理解することに進みます。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/positioning/index.html b/files/ja/learn/css/css_layout/positioning/index.html
new file mode 100644
index 0000000000..085dce0054
--- /dev/null
+++ b/files/ja/learn/css/css_layout/positioning/index.html
@@ -0,0 +1,588 @@
+---
+title: 位置指定
+slug: Learn/CSS/CSS_layout/Positioning
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Guide
+  - Layout
+  - Positioning
+  - absolute
+  - fixed
+  - relative
+translation_of: Learn/CSS/CSS_layout/Positioning
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary"><span class="seoSummary">位置指定を使用すると、通常のドキュメントレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな {{cssxref("position")}} の値とその使い方について説明します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>CSS 位置指定がどのように機能するのかを学ぶこと。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>可能であれば、あなたのローカルコンピュータでの演習をお願いします — GitHub リポジトリから <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> のコピーを入手し（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">ソースコードはここ</a>）、それを出発点として使用します。</p>
+
+<h2 id="Introducing_positioning" name="Introducing_positioning">位置指定の紹介</h2>
+
+<p>位置指定（Positioning、ポジショニング）の本来の趣旨は、興味深い効果を生み出すために、上記の基本的なドキュメントフローのふるまいを上書きできるようにすることです。 レイアウト内のいくつかのボックスの位置をデフォルトのレイアウトフローの位置からわずかに変更して、ちょっと風変わりでアンティーク調の感じにしたらどうでしょうか？ 位置指定はあなたのツールです。 あるいは、ページの他の部分の上に浮かぶ UI 要素を作成したり、ページをいくらスクロールしても常にブラウザーウィンドウ内の同じ場所に配置したいですか？ 位置指定はそのようなレイアウト作業を可能にします。</p>
+
+<p>HTML 要素に適用できるさまざまな種類の位置指定があります。 特定の種類の位置指定を要素でアクティブにするには、{{cssxref("position")}} プロパティを使用します。</p>
+
+<h3 id="Static_positioning" name="Static_positioning">静的位置指定</h3>
+
+<p>静的位置指定（Static positioning）は、すべての要素が取得するデフォルトです。 これは、「要素をドキュメントレイアウトフロー内の通常の位置に配置する — ここで見るべき特別なことは何もありません」を意味します。</p>
+
+<p>これを実演し、例をこれからのセクションのために準備するために、最初に HTML の2番目の {{htmlelement("p")}} に <code>positioned</code> の <code>class</code> を次のように追加します。</p>
+
+<pre class="brush: html notranslate">&lt;p class="positioned"&gt; ... &lt;/p&gt;</pre>
+
+<p>それでは、CSS の最後に次の規則を追加してください。</p>
+
+<pre class="brush: css notranslate">.positioned {
+  position: static;
+  background: yellow;
+}</pre>
+
+<p>保存してリフレッシュしても、2段落目の背景色が更新されていることを除けば、まったく違いはありません。 これは問題ありません。 前にも述べたように、静的位置指定はデフォルトのふるまいです！</p>
+
+<div class="note">
+<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">ソースコードを見る</a>）。</p>
+</div>
+
+<h3 id="Relative_positioning" name="Relative_positioning">相対位置指定</h3>
+
+<p>相対位置指定（Relative positioning）は、最初に見ていく <code>position</code> の種類です。 これは静的位置指定と非常によく似ていますが、位置指定要素（positioned element）が通常のレイアウトフローで配置されたら、ページ上の他の要素と重なることも含んで最終的な位置を変更できるという点が異なります。 先に進んで、次のようにコード内の <code>position</code> の宣言を更新してください。</p>
+
+<pre class="brush: css notranslate">position: relative;</pre>
+
+<p>この段階で保存してリフレッシュしても、結果にまったく変化はありません。 それでは、どうやって要素の位置を変更するのでしょうか？ {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} の各プロパティを使用する必要があります。 これについては次のセクションで説明します。</p>
+
+<h3 id="Introducing_top_bottom_left_and_right" name="Introducing_top_bottom_left_and_right">top、bottom、left、right の紹介</h3>
+
+<p>{{cssxref("top")}}（上）、{{cssxref("bottom")}}（下）、{{cssxref("left")}}（左）、{{cssxref("right")}}（右）は {{cssxref("position")}} と一緒に使用され、位置指定要素の移動先を正確に指定します。 これを試すには、CSS の <code>.positioned</code> 規則に次の宣言を追加してください。</p>
+
+<pre class="brush: css notranslate">top: 30px;
+left: 30px;</pre>
+
+<div class="note">
+<p><strong>注</strong>: これらのプロパティの値は、論理的に想定される任意の<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">単位</a>（ピクセル、mm、rem、% など）をとることができます。</p>
+</div>
+
+<p>保存してリフレッシュすると、次のような結果になります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Relative positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: relative;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}</p>
+
+<p>クールだよね？ Ok、おそらくこれはあなたが期待していたものではなかったでしょう — 上と左を指定したのに、なぜ下と右に移動したのでしょうか？ 最初は非論理的に聞こえるかもしれませんが、これは相対的位置指定が機能する方法です — 位置指定したボックスの指定した側を反対方向に押す見えない力を考える必要があります。 例えば、<code>top: 30px;</code> と指定した場合、力がボックスの上側を押して、箱の上側が 30px 下向きに移動します。</p>
+
+<div class="note">
+<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">ソースコードを見る</a>）。</p>
+</div>
+
+<h3 id="Absolute_positioning" name="Absolute_positioning">絶対位置指定</h3>
+
+<p>絶対位置指定（Absolute positioning）はとても異なる結果をもたらします。 次のようにコード内の <code>position</code> 宣言を変更してみましょう。</p>
+
+<pre class="brush: css notranslate">position: absolute;</pre>
+
+<p>保存してリフレッシュすると、次のようになります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Absolute positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p>
+
+<p>まず最初に、ドキュメントフロー内にあるべき位置指定要素のギャップが存在しないことに注意してください。 1番目と3番目の要素はそれが存在しないので一緒になっています！ ある意味、これは事実です。 絶対位置指定要素は、通常のドキュメントレイアウトフローには存在しません。 その代わりに、それは他のすべてのものとは別のそれ自身の層の上にあります。 これは非常に便利です。 つまり、ページ上の他の要素のレイアウトを妨げない独立した UI 機能を作成できるということです。 例えば、ポップアップ情報ボックスやコントロールメニュー、ロールオーバーパネル、ページ上の任意の場所にドラッグアンドドロップできる UI 機能、等々です。</p>
+
+<p>次に、要素の位置が変更されたことに注意してください。 これは、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} の絶対位置指定でのふるまいが異なるためです。 通常のドキュメントレイアウトフロー内での相対的な位置に基づいて要素を配置するのではなく, 要素がそれぞれの包含要素の側からあるべき距離を指定します。 したがって、この場合は、絶対位置指定要素は「包含要素」の上側から30ピクセル、左側から30ピクセルとなるようにします。 (この場合、「包含要素」とは、<strong>最初の包含ブロック</strong>（initial containing block）のことです。詳細については、以下のセクションを参照してください。)</p>
+
+<div class="note">
+<p><strong>注</strong>: 必要に応じて、要素のサイズを変更するために {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} を使用できます。 位置指定要素に <code>top: 0; bottom: 0; left: 0; right: 0; margin: 0;</code> を設定して、何が起こるか見てください！ 後で元に戻します。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: はい、マージンはまだ位置指定要素に影響します。 しかしながら、マージンの相殺はそうではありません。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">ソースコードを見る</a>）。</p>
+</div>
+
+<h3 id="Positioning_contexts" name="Positioning_contexts">位置指定コンテキスト</h3>
+
+<p>絶対位置指定要素の「包含要素」はどの要素でしょうか？ これは、位置指定要素の先祖の <code>position</code> プロパティに大きく依存します（<a href="/ja/docs/Web/CSS/Containing_block#Identifying_the_containing_block">包含ブロックの識別</a>を参照）。</p>
+
+<p>明示的に定義された <code>position</code> プロパティを持つ祖先要素がない場合、デフォルトではすべての祖先要素は静的位置を持ちます。 この結果、絶対位置指定要素は<strong>最初の包含ブロック</strong>（initial containing block）に含まれます。 最初の包含ブロックはビューポートの大きさを持ち、{{htmlelement("html")}} 要素を含むブロックでもあります。 簡単に言うと、絶対位置指定要素は {{htmlelement("html")}} 要素の外側に表示され、最初のビューポートを基準にして配置されます。</p>
+
+<p>位置指定要素は HTML ソースの {{htmlelement("body")}} 内にネストされていますが、最終的なレイアウトでは、ページの端の左上から30ピクセル離れています。 <strong>位置指定コンテキスト</strong>（positioning context） — 絶対位置指定要素がどの要素を基準にして配置されているか — を変更することができます。 これは、要素の先祖の1つに位置指定を設定することによって行われます — それを内部にネストしている要素の1つにです（内部にネストしていない要素を基準にしての配置はできません）。 これを実証するために、次の宣言を <code>body</code> 規則に追加してください。</p>
+
+<pre class="brush: css notranslate">position: relative;</pre>
+
+<p>これにより、次の結果が得られます。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Positioning context&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}</p>
+
+<p>位置指定要素は、{{htmlelement("body")}} 要素を基準にして配置されます。</p>
+
+<div class="note">
+<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">ソースコードを見る</a>）。</p>
+</div>
+
+<h3 id="Introducing_z-index" name="Introducing_z-index">z-index の紹介</h3>
+
+<p>この絶対位置指定はすべて楽しいですが、まだ検討していないことがもう1つあります。 要素が重なり合ったときに、どの要素が他のどの要素の上に表われるかを決定するのは何でしょうか？ これまで見てきた例では、位置指定コンテキスト内には位置指定要素が1つしかなく、位置指定要素は位置指定されていない要素よりも優先されるため、一番上に表われます。 複数あるときはどうでしょうか？</p>
+
+<p>最初の段落も絶対位置指定にするために、CSS に次を追加してみてください。</p>
+
+<pre class="brush: css notranslate">p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}</pre>
+
+<p>この時点で、最初の段落がライム色に着色され、ドキュメントフローの外に移動し、元の位置よりも少し上に配置されていることがわかります。 また、2つが重なったところでは、元の <code>.positioned</code> 段落の下にも重なっています。 これは、<code>.positioned</code> 段落がソース順の2番目の段落であり、ソース順の後ろに配置された要素がソース順の前に配置された要素よりも優先されるためです。</p>
+
+<p>重ね順を変更できますか？ はい、できます。 {{cssxref("z-index")}} プロパティを使うことで可能です。 「z-index」はz軸への参照です。 背景画像やドロップシャドウのオフセットなどを位置指定するために、水平（x軸）座標と垂直（y軸）座標を使用してウェブページについて説明したコースの前のポイントから思い出すことができます。 (0,0) はページ（または要素）の左上にあり、x軸とy軸はページの右下を横切っています（左から右の言語ならば）。</p>
+
+<p>ウェブページには、z軸もあります。 画面の表面から自分の顔に向かって走る想像上の線（または、画面の前に持ってきたい他の何か）です。 {{cssxref("z-index")}} の値は、位置指定要素がその軸のどこにあるかに影響します。 正の値はそれらを積み重ねの上に移動し、負の値はそれらを積み重ねの下に移動します。 デフォルトでは、位置指定要素はすべて <code>auto</code> の <code>z-index</code> を持ち、これは事実上 0 です。</p>
+
+<p>積み重ね順を変更するには、<code>p:nth-of-type(1)</code> 規則に次の宣言を追加してみてください。</p>
+
+<pre class="brush: css notranslate">z-index: 1;</pre>
+
+<p>これで完成した例が表示され、ライム色の段落が一番上になります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;z-index&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+
+p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+  z-index: 1;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}</p>
+
+<p><code>z-index</code> は、無単位のインデックス値のみを受け入れることに注意してください。 1つの要素をz軸の 23 ピクセル上に配置するように指定することはできません — そのようには機能しません。 より大きい値はより小さい値より上になり、どんな値を使うかはあなた次第です。 2 と 3 を使用するのと、300 と 40000 では同じ効果が得られます。</p>
+
+<div class="note">
+<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">ソースコードを見る</a>）。</p>
+</div>
+
+<h3 id="Fixed_positioning" name="Fixed_positioning">固定位置指定</h3>
+
+<p>固定位置指定（Fixed positioning）を見てみましょう。 これは絶対位置指定とまったく同じように機能しますが、1つの重要な違いがあります。 絶対位置指定では、要素をその最も近くで位置指定された祖先 (the initial containing block if there isn't one) に対して固定しますが、<strong>固定位置指定</strong>では、ビューポートの見えている部分に対して<em>常に</em>固定します。 つまり、ページのスクロール量に関係なく常に表示される永続的なナビゲーションメニューのような、固定された便利な UI アイテムを作成できることを意味します。</p>
+
+<p>簡単な例をまとめて、意味を説明しましょう。 まず最初に、CSS から既存の <code>p:nth-of-type(1)</code> 規則と <code>.positioned</code> 規則を削除します。</p>
+
+<p>それでは、次のように <code>body</code> 規則を更新して <code>position: relative;</code> 宣言を削除して、固定の高さを追加します。</p>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}</pre>
+
+<p>それでは、{{htmlelement("h1")}} 要素に <code>position: fixed;</code> を与え、ビューポートの中央上部に配置します。 CSS に次の規則を追加してください。</p>
+
+<pre class="brush: css notranslate">h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin-top: 0;
+  background: white;
+  padding: 10px;
+}</pre>
+
+<p><code>top: 0;</code> は、画面の上部に貼り付けるために必要です。 見出しにコンテンツ列と同じ幅を指定し、それからそれに白い背景といくらかのパディングとマージンを与えるので、コンテンツはその下に見えないでしょう。</p>
+
+<p>保存してリフレッシュすると、見出しが固定されたままで、コンテンツはスクロールアップすると見出しの下に消えるように見える、ちょっとした効果があります。 しかし、これをもっと改善することができます — 現時点では、コンテンツの一部は見出しの下から動き始めます。 これは、位置指定された見出しがドキュメントフローに表われなくなり、残りのコンテンツが最上部に移動するためです。 それを少しだけ下げる必要があります。 これを行うには、最初の段落に上部マージンを設定します。 次を追加します。</p>
+
+<pre class="brush: css notranslate">p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+
+<p>完成した例を見てください。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;I'm not positioned any more...&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+h1 {
+  position: fixed;
+  top: 0px;
+  width: 500px;
+  background: white;
+  padding: 10px;
+}
+
+p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">ソースコードを見る</a>）。</p>
+</div>
+
+<h3 id="position_sticky" name="position_sticky">position: sticky</h3>
+
+<p><code>position: sticky</code> と呼ばれる利用可能な別の <code>position</code> の値があります。 これは他よりもやや新しいです。 これは基本的に相対位置と固定位置のハイブリッドであり、位置指定要素は、特定のしきい値の位置（例えば、ビューポートの上部から 10px）までスクロールされるまで相対位置指定されたように動作し、その後固定されます。 これは、ナビゲーションバーを特定の位置までページと共にスクロールさせ、その後ページの上部に固定するなどの目的で使用できます。</p>
+
+<div id="Sticky_1">
+<div class="hidden">
+<h6 id="Sticky_positioning_example">Sticky positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;div class="positioned"&gt;Sticky&lt;/div&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+.positioned {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
+
+<p>おもしろくて一般的な <code>position: sticky</code> の使い方はスクロールするインデックスページを作成することです。 そこに到達すると異なる見出しがページの上部に固定されます。 そのような例のマークアップは次のようになります。</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+
+&lt;dl&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Apple&lt;/dd&gt;
+    &lt;dd&gt;Ant&lt;/dd&gt;
+    &lt;dd&gt;Altimeter&lt;/dd&gt;
+    &lt;dd&gt;Airplane&lt;/dd&gt;
+    &lt;dt&gt;B&lt;/dt&gt;
+    &lt;dd&gt;Bird&lt;/dd&gt;
+    &lt;dd&gt;Buzzard&lt;/dd&gt;
+    &lt;dd&gt;Bee&lt;/dd&gt;
+    &lt;dd&gt;Banana&lt;/dd&gt;
+    &lt;dd&gt;Beanstalk&lt;/dd&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Calculator&lt;/dd&gt;
+    &lt;dd&gt;Cane&lt;/dd&gt;
+    &lt;dd&gt;Camera&lt;/dd&gt;
+    &lt;dd&gt;Camel&lt;/dd&gt;
+    &lt;dt&gt;D&lt;/dt&gt;
+    &lt;dd&gt;Duck&lt;/dd&gt;
+    &lt;dd&gt;Dime&lt;/dd&gt;
+    &lt;dd&gt;Dipstick&lt;/dd&gt;
+    &lt;dd&gt;Drone&lt;/dd&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Egg&lt;/dd&gt;
+    &lt;dd&gt;Elephant&lt;/dd&gt;
+    &lt;dd&gt;Egret&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>CSS は次のようになります。 通常フローでは、{{htmlelement("dt")}} 要素はコンテンツとともにスクロールします。 {{htmlelement("dt")}} 要素に <code>position: sticky</code> を 0 の {{cssxref("top")}} の値と共に追加すると、サポートするブラウザーでは、その位置に達すると、見出しをビューポートの一番上に固定します。 それ以降の各見出しは、その位置までスクロールアップするときに、前の見出しを置き換えます。</p>
+
+<pre class="brush: css notranslate">dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+</pre>
+
+<div id="Sticky_2">
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+
+dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+
+&lt;dl&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Apple&lt;/dd&gt;
+    &lt;dd&gt;Ant&lt;/dd&gt;
+    &lt;dd&gt;Altimeter&lt;/dd&gt;
+    &lt;dd&gt;Airplane&lt;/dd&gt;
+    &lt;dt&gt;B&lt;/dt&gt;
+    &lt;dd&gt;Bird&lt;/dd&gt;
+    &lt;dd&gt;Buzzard&lt;/dd&gt;
+    &lt;dd&gt;Bee&lt;/dd&gt;
+    &lt;dd&gt;Banana&lt;/dd&gt;
+    &lt;dd&gt;Beanstalk&lt;/dd&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Calculator&lt;/dd&gt;
+    &lt;dd&gt;Cane&lt;/dd&gt;
+    &lt;dd&gt;Camera&lt;/dd&gt;
+    &lt;dd&gt;Camel&lt;/dd&gt;
+    &lt;dt&gt;D&lt;/dt&gt;
+    &lt;dd&gt;Duck&lt;/dd&gt;
+    &lt;dd&gt;Dime&lt;/dd&gt;
+    &lt;dd&gt;Dipstick&lt;/dd&gt;
+    &lt;dd&gt;Drone&lt;/dd&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Egg&lt;/dd&gt;
+    &lt;dd&gt;Elephant&lt;/dd&gt;
+    &lt;dd&gt;Egret&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_2', '100%', 200) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: このライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">ソースコードを見る</a>）。</p>
+</div>
+
+<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2>
+
+<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/CSS/CSS_layout/Position_skills">Test your skills: Positioning</a> を見てください。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>私はあなたが基本的な位置指定と一緒に遊ぶことができて楽しかったと確信しています。 これは、レイアウト全体に使用する方法ではありませんが、ご覧のとおり、それが適しているタスクはたくさんあります。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("position")}} プロパティのリファレンス。</li>
+ <li>いくつかのより有用なアイデアのための<a href="/ja/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">実用的な位置指定の例</a>。</li>
+</ul>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/practical_positioning_examples/index.html b/files/ja/learn/css/css_layout/practical_positioning_examples/index.html
new file mode 100644
index 0000000000..d7c5601202
--- /dev/null
+++ b/files/ja/learn/css/css_layout/practical_positioning_examples/index.html
@@ -0,0 +1,421 @@
+---
+title: 実用的な位置指定の例
+slug: Learn/CSS/CSS_layout/Practical_positioning_examples
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Guide
+  - Layout
+  - Learn
+  - absolute
+  - fixed
+  - relative
+translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples
+---
+<div>{{LearnSidebar}}</div>
+
+<div></div>
+
+<p class="summary"><span class="seoSummary">この記事では、位置指定でどのようなことができるかを説明するために、実際に使用されるいくつかの例を作成する方法を示します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基礎（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>位置指定の実用性を理解すること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A_tabbed_info-box" name="A_tabbed_info-box">タブ付き情報ボックス</h2>
+
+<p>最初の例は、古典的なタブ付きの情報ボックスです — これは、たくさんの情報を小さな領域にまとめたいときによく使われる機能です。 これには、戦略/戦争ゲームのような情報量の多いアプリ、画面が狭くスペースが限られているモバイル版のウェブサイト、および UI 全体を埋め尽くさずに多くの情報を利用できるようにしたいコンパクトな情報ボックスが含まれます。 これらを単純化した例は、完成すると次のようになります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p>
+
+<div class="note">
+<p><strong>注</strong>: 完成した例は、<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> でライブで確認できます（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">ソースコード</a>）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。</p>
+</div>
+
+<p>「別々のタブを別々のウェブページとして作成し、タブをクリックして別々のページに移動させて同様の効果を生み出すだけでよいのではないでしょうか？」と考えるかもしれません。 このコードならもっと簡単なものになりますが、実際には個々の「ページ」ビューは実際には新しくロードされたウェブページになるため、ビュー間で情報を保存し、この機能をより大きな UI デザインに統合するのは難しくなります。 さらに、いわゆる「シングルページアプリ」は、特にモバイルウェブ UI の場合、非常に人気が高まっています。 なぜなら、すべてのコンテンツを表示するために必要な HTTP リクエストの数が減り、パフォーマンスが向上するからです。</p>
+
+<div class="note">
+<p><strong>注</strong>: ウェブ開発者の中には、一度に1ページの情報だけをロードし、<a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> などの JavaScript 機能を使用して表示される情報を動的に変更することで、さらに問題を解決するものもあります。 しかし、学習の現時点では、物事をできるだけシンプルに保ちたいと思います。 後で JavaScript がいくつかありますが、ほんの少しだけです。</p>
+</div>
+
+<p>まず始めに、出発点の HTML ファイル <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a> のローカルコピーを作成してください。 これをローカルコンピュータの適当な場所に保存して、テキストエディタで開きます。 <code>body</code> に含まれる HTML を見てみましょう。</p>
+
+<pre class="brush: html">&lt;section class="info-box"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#" class="active"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;div class="panels"&gt;
+    &lt;article class="active-panel"&gt;
+      &lt;h2&gt;The first tab&lt;/h2&gt;
+
+      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.&lt;/p&gt;
+    &lt;/article&gt;
+    &lt;article&gt;
+      &lt;h2&gt;The second tab&lt;/h2&gt;
+
+      &lt;p&gt;This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.&lt;/p&gt;
+    &lt;/article&gt;
+    &lt;article&gt;
+      &lt;h2&gt;The third tab&lt;/h2&gt;
+
+      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!&lt;/p&gt;
+
+      &lt;ol&gt;
+        &lt;li&gt;dui neque eleifend lorem, a auctor libero turpis at sem.&lt;/li&gt;
+        &lt;li&gt;Aliquam ut porttitor urna.&lt;/li&gt;
+        &lt;li&gt;Nulla facilisi&lt;/li&gt;
+      &lt;/ol&gt;
+    &lt;/article&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</pre>
+
+<p>それで、ここに {{htmlelement("ul")}} と {{htmlelement("div")}} を含む <code>info-box</code> のクラス（<code>class</code>）を持つ {{htmlelement("section")}} 要素があります。 番号なしリストには3つのリスト項目があり、その中にリンクがあります。 これは、コンテンツパネルを表示するためにクリックする実際のタブになります。 <code>&lt;div&gt;</code> には、各タブに対応するコンテンツパネルを構成する3つの {{htmlelement("article")}} 要素が含まれています。 各パネルにはいくつかのサンプルのコンテンツが含まれています。</p>
+
+<p>ここでの考え方は、標準の水平ナビゲーションメニューのようにタブをスタイルし、絶対位置指定を使用して互いの上に重なるようにパネルをスタイルするということです。 また、タブが押されたときに対応するパネルを表示し、タブ自体をスタイルするためにページに含める JavaScript も少し用意します。 現段階では JavaScript 自体を理解する必要はありませんが、基本的な <a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> をできるだけ早く学習することを検討するべきです — UI 機能が複雑になるほど、欲しい機能を実装するために JavaScript が必要になるでしょう。</p>
+
+<h3 id="General_setup" name="General_setup">一般的な設定</h3>
+
+<p>まず、{{htmlelement("style")}} の開始タグと終了タグの間に次を追加します。</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}</pre>
+
+<p>これは、ページに サンセリフ（<code>sans-serif</code>）フォントを設定し、<code>border-box</code> の {{cssxref("box-sizing")}} モデルを使い、{{htmlelement("body")}} からデフォルトのマージンを取り除くための一般的な設定です。</p>
+
+<p>次に、前の CSS のすぐ下に次を追加します。</p>
+
+<pre class="brush: css">.info-box {
+  width: 450px;
+  height: 400px;
+  margin: 0 auto;
+}</pre>
+
+<p>これはコンテンツに特定の幅と高さを設定し、古い <code>margin: 0 auto</code> トリックを使用して画面の中央に配置します。 以前のコースでは、可能であればコンテンツのコンテナに固定の高さを設定しないことをお勧めしました。 タブのコンテンツは固定されているので、この状況では問題ありません。 また、異なる高さで異なるタブを表示するのも少々不快です。</p>
+
+<h3 id="Styling_our_tabs" name="Styling_our_tabs">タブのスタイリング</h3>
+
+<p>今度はタブをタブのようにスタイルします — 基本的にこれらは水平ナビゲーションメニューですが、コースで以前見たようにクリックされたときに異なるウェブページをロードする代わりに異なるパネルを同じページに表示します。 まず、CSS の一番下に次の規則を追加して、番号なしリストからデフォルトの {{cssxref("padding-left")}} と {{cssxref("margin-top")}} を削除します。</p>
+
+<pre class="brush: css">.info-box ul {
+  padding-left: 0;
+  margin-top: 0;
+}</pre>
+
+<div class="note">
+<p><strong>注</strong>: この例では、チェーンの先頭に <code>.info-box</code> を持つ子孫セレクタを使用しています。 これは、他のコンテンツがすでに含まれているページに、ページの他の部分に適用されているスタイルを妨げることなく、この機能を挿入できるようにするためです。</p>
+</div>
+
+<p>次に、水平方向のタブのスタイルを設定します。 リスト項目は、一列に並ぶようにすべて左にフロートさせ、行頭記号（bullet）を取り除くために {{cssxref("list-style-type")}} を <code>none</code> に設定し、{{cssxref("width")}} を <code>150px</code> に設定しているので、それらは情報ボックス全体にうまく収まります。 {{htmlelement("a")}} 要素は {{cssxref("display")}}<code>: inline-block</code> に設定されているので、一列に並んでいてもスタイル可能で、他のさまざまなプロパティを使用して、タブボタンに適したスタイルになっています。</p>
+
+<p>次の CSS を追加してください。</p>
+
+<pre class="brush: css">.info-box li {
+  float: left;
+  list-style-type: none;
+  width: 150px;
+}
+
+.info-box li a {
+  display: inline-block;
+  text-decoration: none;
+  width: 100%;
+  line-height: 3;
+  background-color: red;
+  color: black;
+  text-align: center;
+}</pre>
+
+<p>最後に、このセクションでは、リンク状態にいくつかのスタイルを設定します。 最初に、フォーカス時やホバー時にタブの状態が異なるように {{cssxref(":focus")}} と {{cssxref(":hover")}} の状態を設定し、ユーザーに視覚的なフィードバックを提供します。 次に、タブの1つに <code>active</code> のクラスが存在する場合、それに同じスタイルを設定する規則を設定します。 これをタブがクリックされたときに JavaScript を使用して設定します。 次の CSS を他のスタイルの下に配置します。</p>
+
+<pre class="brush: css">.info-box li a:focus, .info-box li a:hover {
+  background-color: #a60000;
+  color: white;
+}
+
+.info-box li a.active {
+  background-color: #a60000;
+  color: white;
+}</pre>
+
+<h3 id="Styling_the_panels" name="Styling_the_panels">パネルのスタイリング</h3>
+
+<p>次の仕事はパネルをスタイルすることです。 さあ行きましょう！</p>
+
+<p>まず最初に、<code>.panels</code> の {{htmlelement("div")}} コンテナをスタイルするために次の規則を追加します。 ここでは、パネルが情報ボックスの内側にぴったり収まるように固定の {{cssxref("height")}} を設定し、{{htmlelement("html")}} ではなくそれに対して相対的に位置指定子要素を配置できるように {{cssxref("position")}}<code>: relative</code> で {{htmlelement("div")}} を位置指定コンテキストとして設定します。 最後にレイアウトに影響を与えないように、最後に上記 CSS で設定したフロートを {{cssxref("clear")}} します。</p>
+
+<pre class="brush: css">.info-box .panels {
+  height: 352px;
+  position: relative;
+  clear: both;
+}</pre>
+
+<p>このセクションの最後に、パネルを構成する個々の {{htmlelement("article")}} 要素をスタイルします。 最初に追加する規則は、パネルを絶対位置指定して、それらがすべて {{htmlelement("div")}} コンテナの {{cssxref("top")}} と {{cssxref("left")}} にぴったり合うように配置することです — これは、パネルを互いの上に重ねて配置するという、このレイアウト機能全体にとって絶対に重要な部分です。 この規則はまた、パネルにコンテナと同じ設定の高さを与え、コンテンツにいくつかの {{cssxref("padding")}}、テキストの {{cssxref("color")}}、および {{cssxref("background-color")}} を与えます。</p>
+
+<p>ここで追加する2番目の規則は、<code>active-panel</code> のクラスが設定されているパネルに 1 の <code>{{cssxref("z-index")}}</code> が適用されるようにすることです。 これにより、他のパネルの上に重ねて置かれます（位置指定要素はデフォルトで 0 の <code>z-index</code> を持ち、これは他のパネルを下に置きます）。 繰り返しますが、適切なタイミングで JavaScript を使用してこのクラスを追加します。</p>
+
+<pre class="brush: css">.info-box article {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 352px;
+  padding: 10px;
+  color: white;
+  background-color: #a60000;
+}
+
+.info-box .active-panel {
+  z-index: 1;
+}</pre>
+
+<h3 id="Adding_our_JavaScript" name="Adding_our_JavaScript">JavaScript を追加する</h3>
+
+<p>この機能を動作させるための最後のステップは、JavaScript を追加することです。 {{htmlelement("script")}} の開始タグと終了タグの間に記述されているとおりに、次のコードブロックを挿入します（これらは HTML コンテンツの下方にあります）。</p>
+
+<pre>var tabs = document.querySelectorAll('.info-box li a');
+var panels = document.querySelectorAll('.info-box article');
+
+for(i = 0; i &lt; tabs.length; i++) {
+  var tab = tabs[i];
+  setTabHandler(tab, i);
+}
+
+function setTabHandler(tab, tabPos) {
+  tab.onclick = function() {
+    for(i = 0; i &lt; tabs.length; i++) {
+      tabs[i].className = '';
+    }
+
+    tab.className = 'active';
+
+    for(i = 0; i &lt; panels.length; i++) {
+      panels[i].className = '';
+    }
+
+    panels[tabPos].className = 'active-panel';
+  }
+}</pre>
+
+<p>このコードは次のことを行います。</p>
+
+<ul>
+ <li>最初に、すべてのタブとすべてのパネルへの参照を <code>tabs</code> と <code>panels</code> と呼ばれる2つの変数に保存するので、後で簡単に使うことができます。</li>
+ <li>次に、<code>for</code> ループを使用してすべてのタブを巡回し、それぞれに対して <code>setTabHandler()</code> という関数を実行します。 これにより、各タブをクリックしたときに発生するべき機能が設定されます。 実行されると、関数はそれが実行されている特定のタブへの参照と、<code>tabs</code> 配列内のタブの位置を識別するインデックス番号 <code>i</code> が渡されます。</li>
+ <li><code>setTabHandler()</code> 関数では、タブに <code>onclick</code> イベントハンドラを設定していて、タブをクリックすると次のことが起こります。
+  <ul>
+   <li><code>for</code> ループで、すべてのタブを巡回し、それらに存在するクラスをすべて削除します。</li>
+   <li>クリックされたタブに <code>active</code> のクラスが設定されます。 このクラスには、パネルのスタイル設定と同じ {{cssxref("color")}} と {{cssxref("background-color")}} をタブに設定する CSS の規則が関連付けられていることを以前にも説明しました。</li>
+   <li><code>for</code> ループは、すべてのパネルを巡回し、それらに存在するクラスをすべて削除します。</li>
+   <li>クリックされたタブに対応するパネルに <code>active-panel</code> のクラスが設定されます。 このクラスには、{{cssxref("z-index")}} を 1 に設定して他のパネルの上に表示させる CSS の規則が関連付けられていることを以前にも説明しました。</li>
+  </ul>
+ </li>
+</ul>
+
+<p>最初の例はこれで終わりです。 2番目の例で追加しますので、コードを開いたままにしてください。</p>
+
+<h2 id="A_fixed_position_tabbed_info-box" name="A_fixed_position_tabbed_info-box">固定位置のタブ付き情報ボックス</h2>
+
+<p>2番目の例では、最初の例（情報ボックス）を取り上げて、それをフルウェブページのコンテキストに追加します。 それだけではありません — ブラウザーウィンドウ内で同じ位置に留まるように固定位置を指定します。 メインコンテンツがスクロールしても、情報ボックスは画面上の同じ位置に留まります。 完成した例は次のようになります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13364/fixed-info-box.png" style="border-style: solid; border-width: 1px; display: block; height: 585px; margin: 0px auto; width: 1118px;"></p>
+
+<div class="note">
+<p><strong>注</strong>: 完成した例は、<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">fixed-info-box.html</a> でライブで確認できます（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html">ソースコード</a>）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。</p>
+</div>
+
+<p>出発点として、記事の最初のセクションで完成させた例を使用するか、Github リポジトリから <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> のローカルコピーを作成することができます。</p>
+
+<h3 id="HTML_additions" name="HTML_additions">HTML の追加</h3>
+
+<p>まず第一に、ウェブサイトのメインコンテンツを表すために追加の HTML が必要です。 既存のセクションの直前で、開始 {{htmlelement("body")}} タグのすぐ下に次の {{htmlelement("section")}} を追加します。</p>
+
+<pre class="brush: html">&lt;section class="fake-content"&gt;
+  &lt;h1&gt;Fake content&lt;/h1&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+&lt;/section&gt;</pre>
+
+<div class="note">
+<p><strong>注</strong>: お好みにより、本物のコンテンツで偽のコンテンツを自由に変更してもかまいません。</p>
+</div>
+
+<h3 id="Changes_to_the_existing_CSS" name="Changes_to_the_existing_CSS">既存の CSS への変更</h3>
+
+<p>次に、情報ボックスを配置して位置指定するために、既存の CSS に若干の変更を加える必要があります。 <code>.info-box</code> の規則を変更して、<code>margin: 0 auto;</code> を取り除き（情報ボックスを中央に配置する必要はもうありません）、{{cssxref("position")}}<code>: fixed;</code> を追加して、ブラウザーのビューポートの {{cssxref("top")}} に貼り付けます。</p>
+
+<p>これは今、次のようになるはずです。</p>
+
+<pre class="brush: css">.info-box {
+  width: 450px;
+  height: 400px;
+  position: fixed;
+  top: 0;
+}</pre>
+
+<h3 id="Styling_the_main_content" name="Styling_the_main_content">メインコンテンツのスタイリング</h3>
+
+<p>この例に残された唯一のことは、メインコンテンツに何らかのスタイルを提供することです。 CSS の残りの部分の下に次の規則を追加します。</p>
+
+<pre class="brush: css">.fake-content {
+  background-color: #a60000;
+  color: white;
+  padding: 10px;
+  height: 2000px;
+  margin-left: 470px;
+}</pre>
+
+<p>まず、情報ボックスパネルと同じ {{cssxref("background-color")}}、{{cssxref("color")}}、および {{cssxref("padding")}} をコンテンツに与えます。 それから、それを右に動かすために大きな {{cssxref("margin-left")}} を与えて、情報ボックスが収まるスペースを作り、他に何も重ならないようにします。</p>
+
+<p>これで2番目の例は終わりです。 3つ目も同じように面白いと思います。</p>
+
+<h2 id="A_sliding_hidden_panel" name="A_sliding_hidden_panel">スライド式隠しパネル</h2>
+
+<p>ここで紹介する最後の例は、アイコンを押すだけで画面にスライドして現れたり消えたりするパネルです。 これは、前述のように、モバイルレイアウトのような、有用なコンテンツの代わりにメニューや情報パネルを表示して、画面の大部分を使い果たしたくない、使用可能な画面スペースが小さい状況では一般的です。</p>
+
+<p>完成した例は次のようになります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13366/hidden-sliding-panel.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 950px;"></p>
+
+<div class="note">
+<p><strong>注</strong>: 完成した例は、<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hidden-info-panel.html</a> でライブで確認できます（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">ソースコード</a>）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。</p>
+</div>
+
+<p>まず始めに、Github リポジトリから <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html">hidden-info-panel-start.html</a> のローカルコピーを作成します。 これは前の例から続いていないので、新鮮な出発点ファイルが必要です。 ファイル内の HTML を見てみましょう。</p>
+
+<pre class="brush: css">&lt;label for="toggle"&gt;❔&lt;/label&gt;
+&lt;input type="checkbox" id="toggle"&gt;
+&lt;aside&gt;
+
+  ...
+
+&lt;/aside&gt;</pre>
+
+<p>{{htmlelement("label")}} 要素と {{htmlelement("input")}} 要素から始めましょう — <code>&lt;label&gt;</code> 要素は通常、アクセシビリティの目的でテキストラベルをフォーム要素に関連付けるために使用します（スクリーンリーダーのユーザーが、どの説明がどのフォーム要素に対応しているかを確認できるようにします）。 ここでは、<code>for</code> 属性と <code>id</code> 属性を使用して <code>&lt;input&gt;</code> チェックボックスに関連付けられています。</p>
+
+<div class="note">
+<p><strong>注</strong>: 情報アイコンとして機能するために、HTML に特別な疑問符文字を入れました。 これは、パネルを表示/非表示にするために押されるボタンを表します。</p>
+</div>
+
+<p>ここでは、これらの要素を少し異なる目的で使用します — <code>&lt;label&gt;</code> 要素のもう1つの便利な副作用は、チェックボックス自体だけでなく、チェックボックスのラベルをクリックしてチェックボックスをチェックできることです。 これはよく知られた<a href="https://css-tricks.com/the-checkbox-hack/">チェックボックスハック</a>（英語）をもたらしました。 それはボタンを切り替えることによって要素を制御する JavaScript フリーの方法を提供します。 制御する要素は、他の2つに続く {{htmlelement("aside")}} 要素です（簡潔にするために、上記のコードリストからそのコンテンツを省略しました）。</p>
+
+<p>以下のセクションでは、これがどのように機能するのかを説明します。</p>
+
+<h3 id="Styling_the_form_elements" name="Styling_the_form_elements">フォーム要素のスタイリング</h3>
+
+<p>まずフォーム要素を扱いましょう — {{htmlelement("style")}} タグの間に次の CSS を追加します。</p>
+
+<pre class="brush: css">label[for="toggle"] {
+  font-size: 3rem;
+  position: absolute;
+  top: 4px;
+  right: 5px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  position: absolute;
+  top: -100px;
+}</pre>
+
+<p>最初の規則は <code>&lt;label&gt;</code> をスタイルします。 ここでは、次のことをしています。</p>
+
+<ul>
+ <li>アイコンを見やすく大きくするには、大きい {{cssxref("font-size")}} を設定します。</li>
+ <li>それに {{cssxref("position")}}<code>: absolute</code> を設定し、それを右上隅にうまく配置するために {{cssxref("top")}} と {{cssxref("right")}} を使用しました。</li>
+ <li>それに 1 の {{cssxref("z-index")}} を設定します — これは、情報パネルがスタイル設定されて表示されるときに、アイコンが隠れないようにし、アイコンがその上に表示されるので、もう一度押すと情報パネルを非表示にできます。</li>
+ <li>アイコンが何か面白いことをしていることをユーザーに視覚的に知らせるために、{{cssxref("cursor")}} のプロパティを使用して、マウスポインタをアイコン上に移動したときにマウスポインタをハンドポインタに変更します（リンク上にあるときに表示されるもののように）。</li>
+</ul>
+
+<p>2番目の規則は、実際のチェックボックスの <code>&lt;input&gt;</code> 要素に {{cssxref("position")}}<code>: absolute</code> を設定し、それを画面上部の範囲外に離すことで隠します。 実際の UI でこれを見たくありません。</p>
+
+<h3 id="Styling_the_panel" name="Styling_the_panel">パネルのスタイリング</h3>
+
+<p>今度は実際のスライド式パネル自体をスタイルする時が来ました。 CSS の最後に次の規則を追加してください。</p>
+
+<pre class="brush: css">aside {
+  background-color: #a60000;
+  color: white;
+
+  width: 340px;
+  height: 100%;
+  padding: 0 20px;
+
+  position: fixed;
+  top: 0;
+  right: -370px;
+
+  transition: 0.6s all;
+}</pre>
+
+<p>ここではたくさんのことが起こっています — 少しずつ説明しましょう。</p>
+
+<ul>
+ <li>まず、情報ボックスに簡単な {{cssxref("background-color")}} と {{cssxref("color")}} を設定します。</li>
+ <li>次に、パネルに固定の {{cssxref("width")}} を設定し、その {{cssxref("height")}} をブラウザーのビューポート全体の高さにします。</li>
+ <li>少し間隔を空けるために水平方向の {{cssxref("padding")}} も含まれています。</li>
+ <li>次に、パネルに {{cssxref("position")}}<code>: fixed;</code> を設定して、ページにスクロールするコンテンツがある場合でも、パネル上では常に同じ場所に表示されるようにします。 それをビューポートの {{cssxref("top")}} に接着し、デフォルトで {{cssxref("right")}} が画面外になるように設定します。</li>
+ <li>最後に、要素に {{cssxref("transition")}} を設定します。 遷移は、単に突然「オン」、「オフ」になるのではなく、状態間の変化を滑らかに行わせることを可能にする興味深い機能です。 この場合、チェックボックスがオンになったときにパネルを画面上で滑らかにスライドさせることを目的としています。 （言い換えれば、疑問符のアイコンをクリックすると — <code>&lt;label&gt;</code> をクリックすると、関連するチェックボックスがオンになることを忘れないでください！ これは、ハックです。） あなたはもっと多くを学ぶでしょう...</li>
+</ul>
+
+<h3 id="Setting_the_checked_state" name="Setting_the_checked_state">チェック状態を設定する</h3>
+
+<p>追加する CSS の最後の部分がもう1つあります。 CSS の下部に次のコードを追加してください。</p>
+
+<pre class="brush: css">input[type=checkbox]:checked + aside {
+  right: 0px;
+}</pre>
+
+<p>セレクタはここではかなり複雑です — 私たちは <code>&lt;input&gt;</code> 要素に隣接する <code>&lt;aside&gt;</code> 要素を選択していますが、それがチェックされているときだけです（これを達成するための {{cssxref(":checked")}} 擬似クラスの使用に注意してください）。 この場合、<code>&lt;aside&gt;</code> の {{cssxref("right")}} プロパティを <code>0px</code> に設定しています。 これにより、パネルが再び画面に表示されるようになります（遷移により滑らかに）。 ラベルをもう一度クリックすると、チェックボックスがオフになり、パネルを再び隠します。</p>
+
+<p>切り替えボタン効果を作成するためのかなり賢い JavaScript フリーの方法は、これで終りです。 これは、IE9 以降で機能します（滑らかな遷移は、IE10 以降で機能します）。 この効果には、いくつかの懸念があります — フォーム要素はこの目的のために意図されていないので、少し乱用です。 さらに、その効果はアクセシビリティの観点からはあまり良くありません。 ラベルはデフォルトではフォーカスできず、フォーム要素を意味論的でない方法で使用するとスクリーンリーダーに問題が生じる可能性があります。 JavaScript とリンクまたはボタンのほうが適切かもしれませんが、それを試してみるのも楽しいでしょう。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>それでは、位置指定の見方を締めくくります — これまでのところ、基本的な仕組みがどのように機能するのか、またこれらを適用して興味深い UI 機能を構築する方法を理解しているはずです。 これをすぐに理解できなくても心配しないでください — 位置指定はかなり高度なトピックであり、理解を助けるために記事をいつでも再び参照することができます。 次の話題はフレックスボックスです。</p>
+
+
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/responsive_design/index.html b/files/ja/learn/css/css_layout/responsive_design/index.html
new file mode 100644
index 0000000000..0629613548
--- /dev/null
+++ b/files/ja/learn/css/css_layout/responsive_design/index.html
@@ -0,0 +1,334 @@
+---
+title: レスポンシブデザイン
+slug: Learn/CSS/CSS_layout/Responsive_Design
+tags:
+  - Images
+  - Media Queries
+  - RWD
+  - Responsive web design
+  - flexbox
+  - fluid grids
+  - grid
+  - multicol
+  - typography
+translation_of: Learn/CSS/CSS_layout/Responsive_Design
+---
+<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div>
+
+<p>Web デザインの初期には、特定の画面サイズを対象とするページが作成されていました。 ユーザーの画面がデザイナーの予想よりも大きかったり小さかったりした場合、結果は望ましくないスクロールバーから、過度に長い行長、そして中途半端なスペースにまで及びました。 より多様な画面サイズが利用可能になると、<em>レスポンシブ Web デザイン</em>（responsive web design、RWD）の概念が登場しました。 これは、さまざまな画面幅、解像度などに合わせて Web ページがレイアウトと外観を変更できるようにする一連の実践です。 これは、マルチデバイス Web のデザイン方法を変えたアイデアであり、この記事は、それをマスターするために知っておくべき主なテクニックを理解するのに役立ちます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>と <a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a>を学ぶ）</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>レスポンシブデザインの基本概念と歴史を理解する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Historic_website_layouts" name="Historic_website_layouts">歴史的な Web サイトのレイアウト</h2>
+
+<p>歴史のある時点で、Web サイトを設計するときに次の2つの選択肢がありました。</p>
+
+<ul>
+ <li>ブラウザーのウィンドウに合わせて伸縮する<em>リキッド（液状）のサイト</em></li>
+ <li>または、ピクセル単位の固定サイズによる<em>固定幅のサイト</em>を作成できます。</li>
+</ul>
+
+<p>これらの2つのアプローチは、サイトを設計する人の画面上では最も見栄えの良い Web サイトをもたらす傾向がありました！ リキッドのサイトは、小さな画面では押しつぶされたデザインになり（下図参照）、大きな画面では読みにくいほど長い行長になります。</p>
+
+<figure><img alt="モバイルサイズのビューポートに押しつぶされた2列のレイアウト。" src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: このシンプルなリキッドレイアウトを見てください: <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">ソースコード</a>。 例を表示しているときに、ブラウザーのウィンドウを内側または外側にドラッグして、さまざまなサイズでどのように見えるかを確認します。</p>
+</div>
+
+<p>固定幅のサイトでは、画面の幅がサイトの幅よりも小さいと水平スクロールバーが発生するリスクがあり（下図参照）、大きな画面ではデザインの端に多くの空白ができます。</p>
+
+<figure><img alt="モバイルのビューポートに水平スクロールバーを備えたレイアウト。" src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: この単純な固定幅レイアウトを見てください: <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">ソースコード</a>。 繰り返しますが、ブラウザーのウィンドウのサイズを変更したときの結果を確認してください。</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 上記のスクリーンショットは、Firefox 開発ツールの<a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a>を使用して撮影したものです。</p>
+</div>
+
+<p>モバイル Web が最初の多機能携帯電話で現実のものになり始めたため、モバイルを採用したい企業は通常、異なる URL（多くの場合 <code>m.example.com</code> や <code>example.mobi</code> など）を使用して、サイトの特別なモバイルバージョンを作成しました。 これは、サイトの2つの異なるバージョンを開発し、最新の状態に保つ必要があることを意味しました。</p>
+
+<p>さらに、これらのモバイルサイトは、しばしば非常に切り詰められたエクスペリエンスを提供しました。 モバイルデバイスがより強力になり、完全な Web サイトを表示できるようになったため、サイトのモバイルバージョンに閉じ込められ、フル機能のデスクトップバージョンのサイトにあることがわかっている情報にアクセスできないモバイルユーザーにとって、これはいらだたしいことでした。</p>
+
+<h2 id="Flexible_layout_before_responsive_design" name="Flexible_layout_before_responsive_design">レスポンシブデザインより前のフレキシブルレイアウト</h2>
+
+<p>Web サイトを構築する際のリキッドまたは固定幅の方法の欠点を解決するために、多くのアプローチが開発されました。 2004年に Cameron Adams は、<a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">解像度依存レイアウト</a>（英語）という題名の投稿を書き、さまざまな画面解像度に適応できるデザインを作成する方法を説明しました。 このアプローチでは、画面解像度を検出して正しい CSS をロードするために JavaScript が必要でした。</p>
+
+<p>Zoe Mickley Gillenwater は、フレキシブル（柔軟な）サイトを作成するさまざまな方法の説明と形式化をし、画面を埋めるか、サイズを完全に固定するかの間で妥協点を見つけるために<a href="http://zomigi.com/blog/voices-that-matter-slides-available/">尽力しました</a>。</p>
+
+<h2 id="Responsive_design" name="Responsive_design">レスポンシブデザイン</h2>
+
+<p>レスポンシブデザインという用語は、<a href="https://alistapart.com/article/responsive-web-design/">2010年に Ethan Marcotte によって初めて作られ</a>、3つのテクニックを組み合わせて使用​​することを説明しています。</p>
+
+<ol>
+ <li>1つ目は、Gillenwater が既に検討したフルード（流動的な）グリッドのアイデアであり、Marcotte の記事 <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a>（2009年に A List Apart で公開）で読むことができます。</li>
+ <li>2番目のテクニックは、<a href="http://unstoppablerobotninja.com/entry/fluid-images">フルード画像</a>のアイデアです。 <code>max-width</code> プロパティを <code>100%</code> に設定する非常に簡単なテクニックを使用すると、画像が含まれる列が画像の本来のサイズより狭くなった場合、画像は小さく縮小されますが、大きくなることはありません。 これにより、画像はオーバーフローするのではなく、柔軟なサイズの列に収まるように縮小できますが、列が画像よりも広くなった場合には大きくならず、ピクセル化もされません。</li>
+ <li>3番目の重要なコンポーネントは<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリー</a>です。 メディアクエリーにより、CSS のみを使用して、Cameron Adams が JavaScript を使用して以前に検討したタイプのレイアウトの切り替えができるようになります。 すべての画面サイズに対して1つのレイアウトを使用するのではなく、レイアウトを変更できます。 サイドバーは小さな画面に合わせて位置を変更したり、別のナビゲーションを表示したりできます。</li>
+</ol>
+
+<p><strong>レスポンシブ Web デザインは独立した技術ではない</strong>ことを理解することが重要です。 レスポンシブ Web デザインは、コンテンツの表示に使用されているデバイスに<em>対応</em>できるレイアウトを作成するために使用される、Web デザインへのアプローチまたはベストプラクティスのセットを説明する用語です。 Marcotte の最初の検討では、これは柔軟なグリッド（フロートを使用）とメディアクエリーを意味していましたが、その記事が書かれてからほぼ10年で、レスポンシブに動作することがデフォルトになりました。 最新の CSS レイアウトの方法は本質的にレスポンシブであり、レスポンシブサイトの設計を容易にするために Web プラットフォームに新しいものが組み込まれています。</p>
+
+<p>この記事の残りの部分では、レスポンシブサイトを作成するときに使用できるさまざまな Web プラットフォーム機能について説明します。</p>
+
+<h2 id="Media_Queries" name="Media_Queries">メディアクエリー</h2>
+
+<p>レスポンシブデザインは、メディアクエリー（media query）によってのみ出現できました。 Media Queries Level 3 仕様は2009年に勧告候補になりました。 つまり、ブラウザーでの実装の準備が整ったとみなされました。 メディアクエリーを使用すると、一連のテスト（例えば、ユーザーの画面が特定の幅または特定の解像度より大きいかどうか）を実行し、CSS を選択的に適用して、ユーザーのニーズに合わせて適切にページをスタイルできます。</p>
+
+<p>例えば、次のメディアクエリーは、現在の Web ページが画面メディア（したがって印刷ドキュメントではない）として表示され、ビューポートの幅が少なくとも 800 ピクセルであるかどうかをテストします。 <code>.container</code> セレクターの CSS は、これら2つのことが当てはまる場合にのみ適用されます。</p>
+
+<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} </code>
+</pre>
+
+<p>スタイルシート内に複数のメディアクエリーを追加して、レイアウト全体またはその一部をさまざまな画面サイズに最適に調整できます。 メディアクエリーが導入され、レイアウトが変更されるポイントは、<em>ブレークポイント</em>（breakpoints）と呼ばれます。</p>
+
+<p>メディアクエリーを使用する場合の一般的なアプローチは、狭い画面のデバイス（携帯電話など）用に単純な単一列レイアウトを作成し、次に、より大きな画面かチェックして複数列レイアウトを処理するのに十分な画面幅があることがわかったら、複数列レイアウトを実装することです。 これは多くの場合、<strong>モバイルファースト</strong>デザインと呼ばれます。</p>
+
+<p>詳細については、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリー</a>の MDN ドキュメントをご覧ください。</p>
+
+<h2 id="Flexible_grids" name="Flexible_grids">柔軟なグリッド</h2>
+
+<p>レスポンシブサイトは、ブレークポイント間でレイアウトを変更するだけでなく、柔軟なグリッド上に構築されます。 柔軟なグリッドは、存在する可能性のあるすべてのデバイスサイズを対象にする必要がなく、ピクセルパーフェクトレイアウトを構築する必要がないことを意味します。 膨大な数の異なるサイズのデバイスが存在し、少なくともデスクトップでは常にブラウザーのウィンドウが最大化されているわけではないという事実を考えると、ピクセルパーフェクトレイアウトのアプローチは不可能です。</p>
+
+<p>柔軟なグリッドを使用することで、ブレークポイントを追加し、コンテンツの見た目が悪くなり始めた時点でデザインを変更するだけで済みます。 例えば、画面サイズが大きくなると行長が読みにくい長さになり、ボックスが狭くなるにつれて各行に2つの単語が押しつぶされるようになります。</p>
+
+<p>レスポンシブデザインの初期には、レイアウトを実行するための唯一の選択肢は<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a>を使用することでした。 柔軟なフロートレイアウトは、各要素に幅をパーセントで指定し、レイアウト全体で合計が 100% を超えないようにすることで実現します。 フルードグリッドに関する元の作品で、Marcotte はピクセルを使用して設計されたレイアウトを取得し、それをパーセントに変換するための公式を詳しく説明しました。</p>
+
+<pre class="notranslate"><code>対象 / コンテキスト = 結果</code>
+</pre>
+
+<p>例えば、対象の列のサイズが 60 ピクセルで、コンテキスト（またはコンテナ）が 960 ピクセルの場合、60 を 960 で割って、小数点を右に2桁移動した後、CSS で使用できる値を得られます。</p>
+
+<pre class="brush: css notranslate"><code>.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} </code>
+</pre>
+
+<p>このアプローチは、今日の Web の多くの場所で見られます。 これについては、<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a>の記事のレイアウトセクションで説明しています。 仕事でこのアプローチを使用している Web サイトに出くわす可能性が高いため、フロートベースの柔軟なグリッドを使用して最新のサイトを構築しなくても、理解する価値があります。</p>
+
+<p>次の例は、メディアクエリーと柔軟なグリッドを使用した簡単なレスポンシブデザインを示しています。 狭い画面では、レイアウトは次のように上下に積み重ねられたボックスを表示します。</p>
+
+<figure><img alt="ボックスが上下に積み上げられたレイアウトのモバイルビュー。" src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<p>より広い画面では、次のように2つの列に移動します。</p>
+
+<figure><img alt="2列のレイアウトのデスクトップビュー。" src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: この例の<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">ライブ例</a>と<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">ソースコード</a>は GitHub にあります。</p>
+</div>
+
+<h2 id="Modern_layout_technologies" name="Modern_layout_technologies">最新のレイアウト技術</h2>
+
+<p><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a>などの最新のレイアウト方法は、デフォルトでレスポンシブです。 それらはすべて、あなたが柔軟なグリッドを作成しようとしていると仮定し、それを行う簡単な方法を提供します。</p>
+
+<h3 id="Multicol" name="Multicol">段組み</h3>
+
+<p>これらのレイアウトメソッドの中で最も古いものは段組み（multicol）です。 <code>column-count</code> の指定で、コンテンツを分割する列の数を指定します。 ブラウザーはこれらのサイズを計算し、サイズは画面サイズに応じて変化します。</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  column-count: 3;
+} </code>
+</pre>
+
+<p>代わりに <code>column-width</code> の指定で、<em>最小</em>幅を指定します。 ブラウザーは、その幅の列をコンテナに収まるだけ作成し、すべての列の間で残りのスペースを分配します。 したがって、列の数は、どのくらいのスペースがあるかに応じて変化します。</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  column-width: 10em;
+} </code>
+</pre>
+
+<h3 id="Flexbox" name="Flexbox">フレックスボックス</h3>
+
+<p>フレックスボックス（Flexbox）では、フレックス項目は初期の振る舞いとして、コンテナ内のスペースに従って、項目間のスペースを縮小および分散します。 <code>flex-grow</code> と <code>flex-shrink</code> の値を変更することにより、項目の周囲に多少のスペースがあった場合の振る舞いを指定できます。</p>
+
+<p>次の例では、CSS レイアウトのフレックスボックスのトピックの<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items">フレックス項目の柔軟なサイズ変更</a>で説明されているように、<code>flex: 1</code> の一括指定を使用して、それぞれのフレックス項目はフレックスコンテナ内に同じ量のスペースを取ります。</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 例として、今度はフレックスボックスを使用して、上記のシンプルなレスポンシブレイアウトを再構築しました。 列のサイズを計算するために奇妙なパーセント値を使用する必要がなくなったことがわかります: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">ソースコード</a>。</p>
+</div>
+
+<h3 id="CSS_grid" name="CSS_grid">CSS グリッド</h3>
+
+<p>CSS グリッドレイアウトでは、<code>fr</code> 単位を使用して、グリッドトラック全体に利用可能なスペースを分散できます。 次の例では、サイズが <code>1fr</code> の3つのトラックを持つグリッドコンテナを作成します。 これにより、3つの列トラックが作成され、それぞれがコンテナ内の使用可能なスペースの一部を取得します。 グリッドを作成するこのアプローチの詳細については、CSS レイアウトのグリッドのトピックの<a href="/ja/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit"> fr 単位での柔軟なグリッド</a>を参照してください。</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <code>.wrapper</code> に列を定義できるため、グリッドレイアウトのバージョンはさらに単純です: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">ソースコード</a>。</p>
+</div>
+
+<h2 id="Responsive_images" name="Responsive_images">レスポンシブ画像</h2>
+
+<p>レスポンシブ画像に対する最も簡単なアプローチは、レスポンシブデザインに関する Marcotte の初期の記事で説明されているとおりです。 基本的に、必要な最大サイズの画像を取得し、縮小します。 これは現在でも使用されているアプローチであり、ほとんどのスタイルシートでは次の CSS がどこかにあります。</p>
+
+<pre class="brush: css notranslate"><code>img {
+  max-width: 100%;
+} </code>
+</pre>
+
+<p>このアプローチには明らかな欠点があります。 画像は本来のサイズよりもはるかに小さく表示される可能性があり、これは帯域幅の浪費です — モバイルユーザーは、ブラウザーのウィンドウに実際に表示されるサイズの数倍の画像をダウンロードすることになる場合があります。 さらに、モバイルとデスクトップで同じ画像アスペクト比を使用したくない場合があります。 例えば、モバイル用に正方形の画像を用意して、デスクトップのランドスケープ画像と同じシーンを表示するとよいかもしれません。 または、モバイルでの画像のサイズが小さいことを認めながら、小さな画面サイズでもより簡単に理解できるまったく別の画像を表示したい場合があります。 これらのことは、単に画像を縮小するだけでは達成できません。</p>
+
+<p>{{htmlelement("picture")}} 要素と {{htmlelement("img")}} の <code>srcset</code> 属性と <code>size</code> 属性を使用したレスポンシブ画像は、これらの両方の問題を解決します。 「ヒント」（画像に最適な画面サイズと解像度を記述するメタデータ）とともに複数のサイズを提供でき、ブラウザーは各デバイスに最適な画像を選択し、ユーザーが使用しているデバイスに適した画像サイズをダウンロードできるようにします。</p>
+
+<p>さまざまなサイズで使用される<em>アートディレクション</em>画像は、さまざまな画面サイズに対して、さまざまな切り抜きまたはまったく異なる画像を提供します。</p>
+
+<p>MDN の HTML の学習セクションで、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像の詳細なガイド</a>を見つけることができます。</p>
+
+<h2 id="Responsive_typography" name="Responsive_typography">レスポンシブタイポグラフィ</h2>
+
+<p>以前の研究ではカバーされていなかったレスポンシブデザインの要素は、レスポンシブタイポグラフィ（responsive typography）のアイデアでした。 基本的に、これは、メディアクエリー内のフォントサイズを変更して、画面を占める量を増減させることを表します。</p>
+
+<p>この例では、レベル1の見出しを <code>4rem</code> に設定します。 つまり、基本フォントサイズの4倍になります。 それは本当に大きな見出しです！ このジャンボ見出しは大きな画面サイズでのみ必要です。 したがって、まず小さな見出しを作成し、ユーザーが少なくとも <code>1200px</code> の画面サイズを持っていることがわかった場合は、メディアクエリーを使用して大きな見出しで上書きします。</p>
+
+<pre class="brush: css notranslate"><code>html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} </code>
+</pre>
+
+<p>上記のレスポンシブグリッドの例を編集して、説明した方法を使用してレスポンシブタイポグラフィも含めました。 レイアウトが2列バージョンになると、見出しのサイズがどのように切り替わるかを確認できます。</p>
+
+<p>モバイルでは、次のように見出しが小さくなります。</p>
+
+<figure><img alt="見出しサイズが小さいスタックレイアウト。" src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<p>ただし、デスクトップでは、次のようにより大きな見出しサイズで表示されます。</p>
+
+<figure><img alt="見出しが大きい2列レイアウト。" src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: この例を実際に見てください: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">ソースコード</a>。</p>
+</div>
+
+<p>このタイポグラフィへのアプローチが示すように、メディアクエリーをページのレイアウトの変更のみに制限する必要はありません。 これらを使用して任意の要素を微調整し、代わりとなる画面サイズでより使いやすく魅力的にすることができます。</p>
+
+<h3 id="Using_viewport_units_for_responsive_typography" name="Using_viewport_units_for_responsive_typography">レスポンシブタイポグラフィにビューポート単位を使用</h3>
+
+<p>興味深いアプローチは、ビューポート単位 <code>vw</code> を使用してレスポンシブタイポグラフィを有効にすることです。 <code>1vw</code> はビューポートの幅の 1% に等しいため、<code>vw</code> を使用してフォントサイズを設定すると、常にビューポートのサイズに関連付けられます。</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: 6vw;
+}</pre>
+
+<p>上記の問題は、<code>vw</code> 単位を使用するとユーザーがテキストをズームする機能を失うことです。 そのテキストは常にビューポートのサイズに関連しているためです。 <strong>したがって、ビューポート単位を単独で使用してテキストを設定しないでください</strong>。</p>
+
+<p>解決策があり、<code><a href="/ja/docs/Web/CSS/calc">calc()</a></code> を使用する必要があります。 <code>em</code> や <code>rem</code> などの固定サイズを使用した値に <code>vw</code> 単位を足しても、テキストはズーム可能です。 次のように基本的に、<code>vw</code> 単位はズームした値に足します。</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: calc(1.5rem + 3vw);
+}</pre>
+
+<p>これは、見出しのフォントサイズを指定する必要があるのは一度だけで、モバイル用にメディアクエリーで再定義せずともよいことを意味します。ビューポートのサイズを大きくするにつれて、フォントは徐々に大きくなります。</p>
+
+<div class="blockIndicator note">
+<p>実際のこの例を見てください: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">ソースコード</a>。</p>
+</div>
+
+<h2 id="The_viewport_meta_tag" name="The_viewport_meta_tag">ビューポートメタタグ</h2>
+
+<p>レスポンシブなページの HTML ソースを見ると、通常、ドキュメントの <code>&lt;head&gt;</code> に次の {{htmlelement("meta")}} タグがあります。</p>
+
+<pre class="brush: html notranslate"><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;</code>
+</pre>
+
+<p>このメタタグは、モバイルブラウザーに、ビューポートの幅をデバイスの幅に設定し、ドキュメントを意図したサイズの 100% にスケーリングするよう指示します。 これにより、ドキュメントはモバイル向けに最適化されたサイズで表示されます。</p>
+
+<p>なぜこれが必要でしょうか？ モバイルブラウザーは、ビューポートの幅について嘘をつく傾向があるためです。</p>
+
+<p>このメタタグが存在するのは、最初の iPhone が出て、人々が小さな電話画面で Web サイトを表示し始めたとき、ほとんどのサイトがモバイル向けに最適化されていなかったためです。 したがって、モバイルブラウザーはビューポートの幅を 960 ピクセルに設定し、その幅でページをレンダリングし、デスクトップレイアウトの縮小版として結果を表示します。 他のモバイルブラウザー（Google Android など）も同じことを行いました。 ユーザーは Web サイトをズームインして画面内を移動し、興味のある部分を見ることができましたが、見た目は悪かったです。 レスポンシブデザインのないサイトに出くわす不幸がある場合、今日でもこれを見ることができます。</p>
+
+<p>問題は、モバイルブラウザーでは、ブレークポイントとメディアクエリーを使用したレスポンシブデザインが意図したとおりに機能しないことです。 ビューポートの幅が <code>480px</code> 以下で作動する狭い画面レイアウトがあり、ビューポートが <code>960px</code> に設定されている場合、モバイルで狭い画面のレイアウトが表示されることはありません。 <code>width=device-width</code> を設定すると、Apple のデフォルトの <code>width=960px</code> がデバイスの実際の幅で上書きされるため、メディアクエリーは意図したとおりに機能します。</p>
+
+<p><strong>したがって、ドキュメントの先頭に上記の HTML 行を<em>常に</em>含める必要があります</strong>。</p>
+
+<p>ビューポートメタタグで使用できる設定は次のように他にもありますが、一般的には上記の行を使用します。</p>
+
+<ul>
+ <li><code>initial-scale</code>: ページの初期ズームを設定します。 これには 1 を設定します。</li>
+ <li><code>height</code>: ビューポートに特定の高さを設定します。</li>
+ <li><code>minimum-scale</code>: 最小ズームレベルを設定します。</li>
+ <li><code>maximum-scale</code>: 最大ズームレベルを設定します。</li>
+ <li><code>user-scalable</code>: <code>no</code> に設定すると、ズームを禁止します。</li>
+</ul>
+
+<p><code>minimum-scale</code>、<code>maximum-scale</code>、特に <code>user-scalable</code> を <code>no</code> に設定することは避けてください。 ユーザーには必要なだけズームを許可する必要があります。 これを禁止すると、アクセシビリティの問題が発生します。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <code><a href="/ja/docs/Web/CSS/@viewport">@viewport</a></code> というビューポートメタタグを置き換えるように設計された CSS の @ 規則がありますが、ブラウザーのサポートが不十分です。 両方が使用されたときは、メタタグが @viewport を上書きします。</p>
+</div>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>レスポンシブデザインとは、表示される環境に対応するサイトまたはアプリのデザインを指します。 これには多くの CSS および HTML の機能とテクニックが含まれており、現在では基本的に Web サイトをデフォルトで構築する方法になっています。 サイトを携帯電話でアクセスするところを考えてください — デスクトップバージョンを縮小したサイトや、物事を見つけるために横にスクロールする必要があるサイトに出くわすことは、おそらくかなり珍しいことです。 これは、Web がレスポンシブデザインのこのアプローチに移行したためです。</p>
+
+<p>また、これらのレッスンで学んだレイアウト方法の助けを借りて、レスポンシブデザインを実現することがはるかに容易になりました。 今日の Web 開発が初めてでも、レスポンシブデザインの初期よりも多くのツールを意のままに使用できます。 したがって、参照している資料の年齢を確認する価値があります。 歴史的な記事はまだ有用ですが、CSS と HTML の現代的な用法により、訪問者がどのデバイスを使用してサイトを表示しても、エレガントで便利なデザインをはるかに簡単に作成できます。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/css_layout/supporting_older_browsers/index.html b/files/ja/learn/css/css_layout/supporting_older_browsers/index.html
new file mode 100644
index 0000000000..93feda2cf0
--- /dev/null
+++ b/files/ja/learn/css/css_layout/supporting_older_browsers/index.html
@@ -0,0 +1,248 @@
+---
+title: 古いブラウザーのサポート
+slug: Learn/CSS/CSS_layout/Supporting_Older_Browsers
+tags:
+  - Beginner
+  - CSS
+  - Guide
+  - Layout
+  - Learn
+  - feature queries
+  - flexbox
+  - float
+  - grid
+  - legacy
+translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary"><span class="seoSummary">このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法をサポートしていないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブテクニックを使用する方法について説明します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>と<a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>使用したい機能をサポートしていない可能性がある、古いブラウザーでレイアウトのサポートを提供する方法を理解すること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_is_the_browser_landscape_for_your_site" name="What_is_the_browser_landscape_for_your_site">あなたのサイトのブラウザー利用状況はどうですか？</h2>
+
+<p>すべてのウェブサイトは、対象視聴者という点で異なります。 取るべきアプローチを決める前に、古いブラウザーでサイトにやってくる訪問者の数を調べてください。 あなたが追加したり置き換えたりしている既存のウェブサイトを持っているなら、人々が使用している技術を伝えることができる分析機能（analytics）を利用できるので、これは簡単です。 分析機能を持っていないか、真新しいサイトであるならば、場所によってフィルターをかけた統計（statistics）を提供することができる <a href="http://gs.statcounter.com/">Statcounter</a> のようなサイトがあります。</p>
+
+<p>また、デバイスの種類やサイトの利用方法についても検討する必要があります。 例えば、モバイルデバイスの平均数よりも多いと予想される場合があります。 アクセシビリティと支援技術を使用している人々は常に考慮されるべきですが、いくつかのサイトではさらに重要になるかもしれません。 私の経験では、開発者は多くの場合、古いバージョンの Internet Explorer でのユーザーの 1% の体験を非常に心配していますが、はるかに多い数のアクセシビリティが必要な人々は考慮していません。</p>
+
+<h2 id="What_is_the_support_for_the_features_you_want_to_use" name="What_is_the_support_for_the_features_you_want_to_use">使用したい機能に対するサポートはどうですか？</h2>
+
+<p>サイトにやってくるブラウザーを知ったら、それがどのような技術をサポートしているかや、その技術を利用できない訪問者にどれだけ簡単に代替手段を提供できるかについて、使用したい技術を評価できます。 MDN では、CSS プロパティを詳述した各ページにブラウザーの互換性情報を提供することで、これを簡単にできるようにしています。 例えば、{{cssxref("grid-template-columns")}} のページを見てください。 このページの下部には、主要なブラウザーと、このプロパティのサポートを開始したバージョンの一覧をまとめた表があります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p>
+
+<p>機能がどの程度サポートされているかを調べるもう1つの一般的な方法は、<a href="https://caniuse.com/">Can I Use</a> ウェブサイトです。 このサイトには、ウェブプラットフォームの機能の大部分と、それらのブラウザーのサポート状況に関する情報が記載されています。 あなたは場所によって使用統計を見ることができます — あなたが主に世界の特定の地域のためにユーザーを持っているサイトで働いているなら有用です。 Google Analytics アカウントをリンクして、あなたのユーザーデータに基づいて分析することもできます。</p>
+
+<p>ユーザーが持っている技術、そしてあなたが使いたいと思うかもしれないことへのサポートを理解することは、すべての決断を下し、すべてのユーザーをサポートするための最善の方法を知るための良い場所にあなたを置きます。</p>
+
+<h2 id="Support_doesnt_mean_looks_the_same" name="Support_doesnt_mean_looks_the_same">サポートは「同じに見える」という意味ではありません</h2>
+
+<p>一部のユーザーはサイトを携帯電話で見たり、他のユーザーは大きなデスクトップ画面を見たりするため、ウェブサイトはすべてのブラウザーで同じように見えるとは限りません。 同様に、一部のユーザは古いブラウザーのバージョンを持ち、他のユーザは最新のブラウザーを持ちます。 一部のユーザーは、コンテンツがスクリーンリーダーによって読み上げられているのを聞いているかもしれないし、それを読むことができるようにページにズームインしているかもしれません。 全員をサポートするということは、防御的に設計されたバージョンのコンテンツを提供することを意味します。 その結果、最新のブラウザーでは見栄えがよくなりますが、それでも古いブラウザーのユーザにとっては基本レベルで使用できます。</p>
+
+<p>基本レベルのサポートは、ページの通常フローが意味をなすように、コンテンツを適切に構成することによります。 非常に限られた機能の携帯電話を持っているユーザーは CSS の多くを得ないかもしれません、しかし内容は読みやすくする方法で流れます。 したがって、よく構造化された HTML 文書を常に出発点にする必要があります。 <em>スタイルシートを削除した場合、コンテンツは意味をなしますか？</em></p>
+
+<p>1つの選択肢は、非常に古いブラウザーや限られたブラウザーを使用している人々のための代替手段として、サイトのこのプレーンなビューを残すことです。 これらのブラウザーでこのサイトにアクセスしている人の数が非常に少ない場合は、最新のブラウザーと同様の経験をそれらの人に与えようとして時間を注いでも意味がありません。 サイトをよりアクセスしやすくするために時間をかけて、はるかに多くのユーザーにサービスを提供することをお勧めします。 プレーンな HTML ページと何から何までいろいろなものとの間には妥協点があり、CSS は実際にこれらの代替手段の作成をかなり簡単にしました。</p>
+
+<h2 id="Creating_fallbacks_in_CSS" name="Creating_fallbacks_in_CSS">CSS で代替手段を作成する</h2>
+
+<p>CSS の仕様には、2つのレイアウト方法が同じ項目に適用されたときにブラウザーが何をするのかを説明する情報が含まれています。 これは、例えばフロート項目が CSS グリッドレイアウトを使用しているグリッド項目でもある場合に何が起こるかの定義があることを意味します。 ブラウザーが理解できない CSS を無視するという知識とこの情報を組み合わせると、すでに説明した<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のテクニック</a>を使用して単純なレイアウトを作成し、それをグリッドレイアウトを理解している最新のブラウザーではグリッドレイアウトで上書きする方法があります。</p>
+
+<p>以下の例では、3つの <code>&lt;div&gt;</code> をフロートさせて、それらが一行に表示されるようにしました。 <a href="/ja/docs/Learn/CSS/CSS_layout/Grids">CSS グリッドレイアウト</a>をサポートしていないブラウザーでは、ボックスの行はフロートレイアウトとして表示されます。 グリッド項目になったフロート項目はフロートのふるまいを失います。 つまり、<code>wrapper</code> をグリッドコンテナに変えることによって、フロート項目はグリッド項目になります。 ブラウザーがグリッドレイアウトをサポートしていればグリッドビューを表示し、そうでなければ <code>display: grid</code> と関連のプロパティを無視してフロートレイアウトが使用されます。</p>
+
+<div id="Example1">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Item One&lt;/div&gt;
+  &lt;div class="item"&gt;Item Two&lt;/div&gt;
+  &lt;div class="item"&gt;Item Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example1', '100%', '200') }}</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: クリアされた項目がグリッド項目になると、{{cssxref("clear")}} プロパティも無効になります。 そのため、フッターがクリアされたレイアウトを作成し、それをグリッドレイアウトにすることができます。</p>
+</div>
+
+<h3 id="Fallback_Methods" name="Fallback_Methods">代替手段の方法</h3>
+
+<p>このフロートの例と同様の方法で使用できるレイアウト方法はいくつかあります。 作成するレイアウトパターンに最も適したものを選択できます。</p>
+
+<dl>
+ <dt>フロートと<em>クリア</em></dt>
+ <dd>上記のように、フロート項目またはクリアされた項目がフレックス項目またはグリッド項目になると、<code>float</code> プロパティや <code>clear</code> プロパティはレイアウトに影響しなくなります。</dd>
+ <dt>display: inline-block</dt>
+ <dd>この方法を使用して列レイアウトを作成できます。 項目に <code>display: inline-block</code> が設定されていて、それからフレックス項目またはグリッド項目になる場合、<code>inline-block</code> のふるまいは無視されます。</dd>
+ <dt>display: table</dt>
+ <dd>CSS レイアウト入門で説明した <a href="/ja/docs/Learn/CSS/CSS_layout/Introduction#Table_layout">CSS 表の作成方法</a>は、代替手段として使用できます。 CSS 表レイアウトが設定されている項目は、それらがフレックス項目またはグリッド項目になると、このふるまいを失います。 重要なことに、表構造を修正するために作成された匿名ボックスは作成されません。</dd>
+ <dt>段組みレイアウト</dt>
+ <dd>特定のレイアウトでは、代替手段として<a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a>を使用できます。 コンテナに定義された <code>column-*</code> プロパティのいずれかがあり、その後グリッドコンテナになると、段組みレイアウトのふるまいは起こりません。</dd>
+ <dt>グリッドの代替手段としてのフレックスボックス</dt>
+ <dd><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>は、IE10 と IE11 でサポートされているため、グリッドよりもブラウザーのサポートが優れています。 ただし、このレッスンの後半で、古いブラウザーでのフレックスボックスのかなり曖昧でわかりにくいサポートについて説明します。 フレックスコンテナをグリッドコンテナにした場合、子に適用されている <code>flex</code> プロパティはすべて無視されます。</dd>
+</dl>
+
+<p>古いブラウザーでの多くのレイアウトの調整では、このように CSS を使用することでまともな体験を与えることができるかもしれません。 古くてよくサポートされているテクニックに基づいた、より単純なレイアウトを追加してから、新しい CSS を使用して、視聴者の 90% 以上が見るレイアウトを作成します。 ただし、代替手段のコードに新しいブラウザーでも解釈されるものを含める必要がある場合があります。 この良い例は、列をグリッド表示に近づけるためにフロート項目にパーセント幅を追加し、コンテナを埋めるように伸縮する場合です。</p>
+
+<p>フロートレイアウトでは、パーセントはコンテナから計算されます — 33.333% はコンテナ幅の3分の1です。 ただしグリッドでは、 33.333% は項目が配置されているグリッド領域から計算されるため、グリッドレイアウトが導入されると、実際に必要なサイズのさらに3分の1になってしまいます。</p>
+
+<div id="Example2">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Item One&lt;/div&gt;
+  &lt;div class="item"&gt;Item Two&lt;/div&gt;
+  &lt;div class="item"&gt;Item Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example2', '100%', '200') }}</p>
+</div>
+
+<p>この問題に対処するには、グリッドがサポートされているかどうか、したがってグリッドが幅を上書きするかどうかを検出する方法が必要です。 CSS は下記の解決策を持っています。</p>
+
+<h2 id="Feature_queries" name="Feature_queries">機能クエリ</h2>
+
+<p>機能クエリを使用すると、ブラウザーが特定の CSS 機能をサポートしているかどうかをテストできます。 つまり、特定の機能をサポートしていないブラウザー用の CSS を作成してから、そのブラウザーがサポートしているかどうかを確認し、サポートしている場合は素敵なレイアウトを追加することができます。</p>
+
+<p>上記の例に機能クエリを追加すると、グリッドをサポートしている場合、項目の幅を <code>auto</code> に戻すことができます。</p>
+
+<div id="Example3">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+@supports (display: grid) {
+  .item {
+      width: auto;
+  }
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;Item One&lt;/div&gt;
+  &lt;div class="item"&gt;Item Two&lt;/div&gt;
+  &lt;div class="item"&gt;Item Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example3', '100%', '200') }}</p>
+</div>
+
+<p>機能クエリのサポートは最近のブラウザーでは非常に優れていますが、CSS グリッドをサポートしていないブラウザーでも機能クエリをサポートしていないことに注意してください。 これは、上で詳述されたアプローチがそれらのブラウザーで働くということを意味します。 していることは、すべての機能クエリの外側で、古い CSS を最初に書くことです。 グリッドをサポートせず、機能クエリもサポートしないブラウザーは、理解できるレイアウト情報を使用し、それ以外はすべて無視します。 機能クエリをサポートするブラウザーは CSS グリッドもサポートするため、グリッドのコードと機能クエリ内のコードを実行します。</p>
+
+<p>機能クエリの仕様には、ブラウザーが機能をサポートしていないことをテストする機能も含まれています — これは、ブラウザーが機能クエリをサポートしている場合にのみ役立ちます。 将来的には、機能クエリをサポートしていないブラウザーはなくなるため、サポートの欠如を確認するアプローチが有効になります。 ただし現時点では、最善のサポートのために古い CSS を使用してから上書きするというアプローチを使用してください。</p>
+
+<h2 id="Older_versions_of_Flexbox" name="Older_versions_of_Flexbox">古いバージョンのフレックスボックス</h2>
+
+<p>古いバージョンのブラウザーでは、以前のフレックスボックス仕様の繰り返しを見つけることができます。 これを書いている時点で、これはほとんどフレックスボックスのために <code>-ms-</code> 接頭辞を使う Internet Explorer 10 の問題です。 これはまた、いくつかの古い記事やチュートリアルが存在することを意味します。 <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">この便利なガイド</a>（英語）は何を見ているのかを確認するのに役立ちますし、非常に古いブラウザーでフレックスのサポートが必要な場合にも役立ちます。</p>
+
+<h2 id="The_IE10_and_11_prefixed_version_of_Grid" name="The_IE10_and_11_prefixed_version_of_Grid">IE10 と IE11 の接頭辞版のグリッド</h2>
+
+<p>CSS グリッド仕様は、当初 Internet Explorer 10 で試作されました。 つまり、IE10 と IE11 は<em>最新</em>のグリッドをサポートしていませんが、このサイトに記載されている最新の仕様とは異なり、非常に使いやすいバージョンのグリッドレイアウトを使用しています。 IE10 および IE11 の実装は、前に <code>-ms-</code> が付いています。 つまり、これらのブラウザーに使用でき、マイクロソフト以外のブラウザーでは無視されます。 Edge はまだ古い構文を理解しているので、最新のグリッド CSS ではすべてが安全に上書きされるように注意してください。</p>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">グリッドレイアウトのプログレッシブエンハンスメント</a>のガイドはグリッドの IE バージョンを理解するのを助けることができ、このレッスンの最後にいくつかの追加の役に立つリンクを含めました。 ただし、以前のバージョンの IE に非常に多くの訪問者がいない限り、サポートされていないすべてのブラウザーで機能する代替手段の作成に集中することをお勧めします。</p>
+
+<h2 id="Testing_older_browsers" name="Testing_older_browsers">古いブラウザーをテストする</h2>
+
+<p>フレックスボックスとグリッドをサポートしているブラウザーの大多数では、古いブラウザーをテストするのはかなり難しいかもしれません。 1つの方法は、<a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>のモジュールに詳述されているように、Sauce Labs のようなオンラインテストツールを使うことです。</p>
+
+<p>また、仮想マシンをダウンロードしてインストールし、自分のコンピュータ上の封じ込められた環境で古いバージョンのブラウザーを実行することもできます。 古いバージョンの Internet Explorer にアクセスできることは特に便利で、そのために、マイクロソフトは<a href="https://developer.microsoft.com/ja/microsoft-edge/tools/vms/">さまざまな仮想マシンを無料でダウンロード</a>（英語）できるようにしました。 これらは、Mac、Windows、Linux の各オペレーティングシステムで利用可能で、Windows コンピュータを使用していなくても、古い Windows ブラウザーや最新の Windows ブラウザーでテストするのに最適な方法です。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>今やあなたは自信を持ってグリッドやフレックスボックスのようなテクニックを使い、古いブラウザーのための代替手段を作り、そして将来現れるであろう新しいテクニックを利用する知識を持っています。</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">CSS での機能クエリの使用</a>（英語）</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">フレックスボックスの後方互換性</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドレイアウトとプログレッシブエンハンスメント</a></li>
+ <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">CSS グリッドを使用する: グリッドなしでブラウザーをサポートする</a>（英語）</li>
+ <li><a href="https://24ways.org/2012/css3-grid-layout/">IE10 および IE11 バージョンのグリッドを使用するチュートリアル</a>（英語）</li>
+ <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">IE10 のグリッドレイアウトの実装を使おうとするべきですか？</a>（英語）</li>
+ <li><a href="https://24ways.org/2017/cascading-web-design/">機能クエリによるカスケードウェブデザイン</a>（英語）</li>
+ <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">機能クエリの使用</a>（動画、英語）</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/first_steps/getting_started/index.html b/files/ja/learn/css/first_steps/getting_started/index.html
new file mode 100644
index 0000000000..e11d48443c
--- /dev/null
+++ b/files/ja/learn/css/first_steps/getting_started/index.html
@@ -0,0 +1,263 @@
+---
+title: CSS 入門
+slug: Learn/CSS/First_steps/Getting_started
+tags:
+  - Beginner
+  - CSS
+  - Classes
+  - Elements
+  - Learn
+  - Selectors
+  - Syntax
+  - state
+translation_of: Learn/CSS/First_steps/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary">この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">ソフトウェアのインストール</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの働き方</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML序論</a>を学んでいること。)</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>CSS 文書と HTML ファイルのリンクのさせかたを理解し、簡単なテキストをスタイリングできるようになる。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Starting_with_some_HTML" name="Starting_with_some_HTML">HTML からはじめよう</h2>
+
+<p>HTML 文書から始めましょう。あなたのコンピューターのフォルダーに <code>index.html</code> として以下のコードを保存してください。</p>
+
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html lang="ja"&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;CSS 入門&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+    &lt;h1&gt;見出し１です&lt;/h1&gt;
+
+    &lt;p&gt;これは第一段落の文です。この文には &lt;span&gt;span 要素&lt;/span&gt;
+と&lt;a href="http://example.com"&gt;リンク&lt;/a&gt;が含まれます。&lt;/p&gt;
+
+    &lt;p&gt;これは第二段落の文です。この文には &lt;em&gt;em 要素&lt;/em&gt;が含まれます。&lt;/p&gt;
+
+    &lt;ul&gt;
+        &lt;li&gt;一つ目の項目&lt;/li&gt;
+        &lt;li&gt;二つ目の項目&lt;/li&gt;
+        &lt;li&gt;&lt;em&gt;三つ目&lt;/em&gt;の項目&lt;/li&gt;
+    &lt;/ul&gt;
+
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: もし簡単にファイルの作れないデバイスや環境でこの記事を読んでいても心配しないでください。このページにあるコードを書くためにライブコードエディターが用意されています。</p>
+</div>
+
+<h2 id="Adding_CSS_to_our_document" name="Adding_CSS_to_our_document">CSS を加える</h2>
+
+<p>まず必要なのは、使いたい CSS ルールを HTML 文書に適用させることです。これには一般的に３つの方法がありますが、いまは最も一般的で便利な方法— CSS を {{htmlelement("head")}} 要素の中にリンクする方法を見てみましょう。</p>
+
+<p>HTML ドキュメントとおなじフォルダーにファイルをつくり、<code>styles.css</code> として保存してください。拡張子 <code>.css</code> となっているのが CSS ファイルです。</p>
+
+<p><code>styles.css</code> を <code>index.html</code> にリンクさせるには、HTML 文書にある {{htmlelement("head")}} 要素の中につぎのコードを追記してください:</p>
+
+<pre class="brush: html notranslate">&lt;link rel="stylesheet" href="styles.css"&gt;</pre>
+
+<p>{{htmlelement("link")}} 要素はブラウザーに、スタイルシートがあること、<code>rel</code> 属性を使うこと、<code>href</code> 属性の値でスタイルシートのある場所を伝えます。<code>styles.css</code> に以下のルールを記述すれば、CSS が働くかテストできます。使っているコードエディターでつぎのコードを CSS ファイルに追記してください:</p>
+
+<pre class="brush: css notranslate">h1 {
+  color: red;
+}</pre>
+
+<p>HTML ファイルと CSS ファイルを保存し、ブラウザーでこのページを再読み込みしてみましょう。文書の先頭にある見出し 1 が赤くなるはずです。もしそうなったら、おめでとうございます。CSS の HTML への適用に成功しました！ もしそうならなかったら、すべてを正しく入力しているか慎重に確認してください。</p>
+
+<p>あなたのコンピューターに保存した <code>styles.css</code> を使い続けても良いですし、このチュートリアルの下の方にあるインタラクティブエディターを使い続けることもできます。もし最初のパネルにある CSS が 上にある HTML 文書とリンクされているなら、インタラクティブエディターは動作します。</p>
+
+<h2 id="Styling_HTML_elements" name="Styling_HTML_elements">HTML 要素をスタイリングする</h2>
+
+<p>見出しを赤くすることで、HTML 要素に焦点をあてたスタイリングを試しました。<em><strong>要素セレクタ</strong>（</em>HTML の要素名を直接あてはめるセレクタ）に焦点をあてたのです。文書内のすべての段落に焦点をあてるなら、セレクタとして <code>p</code> を使うことができます。すべての段落を緑色にするために次を使います:</p>
+
+<pre class="brush: css notranslate">p {
+  color: green;
+}</pre>
+
+<p>セレクタをカンマで区切ることによって、同時に複数のセレクタへ焦点をあてることができます。もしすべての段落とリストすべてを緑にしたければ、CSS のルールセットは次のようになります:</p>
+
+<pre class="brush: css notranslate">p, li {
+    color: green;
+}</pre>
+
+<p>下にあるインタラクティブエディターのコードボックスを編集するか、コンピューターに保存された CSS ファイルを編集してこのルールセットを試してみてください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p>
+
+<h2 id="Changing_the_default_behavior_of_elements" name="Changing_the_default_behavior_of_elements">要素の基本的なふるまいを変える</h2>
+
+<p>よくマークアップされた HTML 文書をみると、かんたんな例でさえ、基本的なスタイリングを加えることでブラウザーが HTML を読みやすくしているかがわかります。見出しは大きく太線になっているし、リストは箇条書きになっています。これはブラウザーがすべてのページにデフォルトで適用されるスタイルシートを含んでいるために起きます。それらがなければ、すべてのテキストがまとまって一緒に実行され、すべてを一からスタイリングしなければなりません。最新のブラウザーはすべて、ほぼ同じ方法をもちいて、デフォルトで HTML コンテンツを表示します。</p>
+
+<p>ブラウザーが選んだのとは別のスタイリングにしたい事もあるでしょう。これには単純に変更したい HTML 要素をえらび、CSS ルールを変更したい外観に変えるだけで可能です。よい例が <code>&lt;ul&gt;</code> 要素、つまり順番なしリストです。箇条書きの点がついていますが、もしこれが要らないと思ったら次のようにして削除することができます:</p>
+
+<pre class="brush: css notranslate">li {
+  list-style-type: none;
+}</pre>
+
+<p>これをあなたの CSS に加えて試してみてください。</p>
+
+<p><code>list-style-type</code> プロパティはどんな値がサポートされているか MDN上で調べるのに適したプロパティです。<code><a href="/ja/docs/Web/CSS/list-style-type">list-style-type</a></code> のページをみるとページの上部に違うプロパティ値を試せる対話型の例があります。そしてページの下部には使えるプロパティ値が詳細に説明されています。</p>
+
+<p>このページをみると、どのようなものに変えられるか見つけられます。プロパティ値 <code>square</code>  に変えてみてください。</p>
+
+<h2 id="Adding_a_class" name="Adding_a_class">クラスを加える</h2>
+
+<p>これまで、HTML 要素名をもとにしたスタイリングをしてきました。これは、文書内にあるその要素すべてをおなじ見ばえにしたいときには有効です。しかしそんな場合はほとんどないので、ほかを変えずに一部の要素だけを選ぶ方法を知っておく必要があります。もっとも一般的なのが、HTML 要素にクラスを追加し、それに焦点をあてる方法です。</p>
+
+<p>HTML 文書の 2番目のリストアイテムへ、こんな風に <a href="/ja/docs/Web/HTML/Global_attributes/class">class 属性</a>を加えてください:</p>
+
+<pre class="brush: html; highlight[3] notranslate">&lt;ul&gt;
+  &lt;li&gt;Item one&lt;/li&gt;
+  &lt;li class="special"&gt;二つ目の項目&lt;/li&gt;
+  &lt;li&gt;&lt;em&gt;三つ目&lt;/em&gt;の項目&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>ピリオドから始まるセレクタを作ることで、<code>special</code> クラス に焦点を当てることができます。以下を CSS に加えてください:</p>
+
+<pre class="brush: css notranslate">.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>保存してからブラウザーを更新し結果を見てみましょう。</p>
+
+<p>ページ上でおなじ見た目にしたいリストアイテムに対して <code>special</code> クラスを適用できます。たとえば、段落内にある<code>&lt;span&gt;</code> 要素にも同じく、オレンジの太字にしたいかもしれません。これにも <code>class</code> 属性の値として <code>special</code> を加えてみてください。上書き保存後にページを再読み込みして結果を確認してみましょう。</p>
+
+<p>HTML 要素セレクタに続けてクラスセレクタが記述されているのを時々見るかもしれません:</p>
+
+<pre class="brush: css notranslate">li.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>この構文は、「<code>special</code> クラスをもっている <code>li</code> 要素へ焦点をあてろ」という意味です。もしそうなっていたらもう、<code>&lt;span&gt;</code> 要素やほかに <code>special</code> クラスにした要素には適用できません。セレクタのリストに次を付け加える必要があります:</p>
+
+<pre class="brush: css notranslate">li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>いくつかのクラスがたくさんの要素に適用され、スタイリングが必要になる度に CSS を編集し続けることを望まないかもしれません。したがって、ある要素だけに特別なルールを作成し、他の要素に適用されないようにする場合を除き、要素をバイパスしてクラスを参照することが最善の場合があります。</p>
+
+<h2 id="Styling_things_based_on_their_location_in_a_document" name="Styling_things_based_on_their_location_in_a_document">文書内の場所に基づいてスタイリングする</h2>
+
+<p>文書のどこにあるかで見栄えを変えたい時があります。それを助けるセレクタはいくつかありますが、いまは 2種類だけ見てみましょう。HTML 文書には 2 つの <code>&lt;em&gt;</code> 要素があります — ひとつは段落の中に、もうひとつはリストアイテムの中に、です。<code>&lt;li&gt;</code> 要素の中にある <code>&lt;em&gt;</code> だけを選びたいとき、<strong>ディセンダント・コンビネーター</strong> と呼ばれるセレクタを使うことができます。これは２つの異なるセレクタのあいだにスペースを設けることで設置できます。</p>
+
+<p>CSS につぎのルールセットを追加してください。</p>
+
+<pre class="brush: css notranslate">li em {
+  color: rebeccapurple;
+}</pre>
+
+<p>このセレクタは <code>&lt;li&gt;</code> 要素の中にある <code>&lt;em&gt;</code> 要素を選択します。よって HTML 文書の中で、3番目のリストアイテム内にある <code>&lt;em&gt;</code> 要素はパープルに変わっていますが、段落内にある <code>&lt;em&gt;</code> 要素は変更されていません。</p>
+
+<p>HTML ドキュメント内で、見出しの直後に来る段落を見出しとおなじ階層レベルにしたいと思うことがあるかもしれません。このときはセレクタ同士の間に <code>+</code>  を入れます（<strong>adjacent sibling combinator</strong>：アジェイセント・シブリング・コンビネーター）。</p>
+
+<p>いま扱っている CSS につぎのルールセットを追加してみてください:</p>
+
+<pre class="brush: css notranslate">h1 + p {
+  font-size: 200%;
+}</pre>
+
+<p>下のライブ例では、上に挙げた２つのルールセットが含まれています。ここに、段落内にある <code>span</code> 要素を赤くするルールセットを追加してください。正しくできれば第一段落の <code>span</code> 要素は赤くなり、最初のリストアイテムは色が変わらないはずです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: ごらんの通り、CSS には要素に焦点をあてるための方法がいくつかあります。ここに挙げたのと、もっとたくさんのセレクタをこのコースの後にある<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">セレクタ</a>の記事で見ていきます。</p>
+</div>
+
+<h2 id="Styling_things_based_on_state" name="Styling_things_based_on_state">状態に基づいてスタイリングする</h2>
+
+<p>最後にこのチュートリアルで取り上げるのは、状態に基づいてスタイルを設定する方法です。かんたんな例はリンクのスタイリングです。リンクをスタイリングするとき、<code><a href="/ja/docs/Web/HTML/Element/a">&lt;a&gt;</a></code> (anchor) 要素に焦点をあてる必要があります。リンクされたページを開いていなかったり、開いた後だったり、マウスの矢印を置いたり（ホバー）、キーボードで選択したり、クリックしたりといったように状態が変わります。こうしたさまざまな状態を CSS で選ぶことができます。— 以下だと、リンクされたページを開く前はピンクに、開いた後は緑になります。</p>
+
+<pre class="brush: css notranslate">a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}</pre>
+
+<p>ユーザーがリンクの上にマウスの矢印を持っていく（ホバー）とリンクの見た目を変えるようにできます。たとえばつぎのルールセットだと、リンクの下線が消えます:</p>
+
+<pre class="brush: css notranslate">a:hover {
+  text-decoration: none;
+}</pre>
+
+<p>下のライブ例では、プロパティ値をいろいろ変えることでさまざまなリンクの状態を試せます。すでに加えられているルールセットをみると、ピンクがとても明るくて読みづらいことがわかります。もっといい色に変えてみましょう。太字に変えられますか？</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p>
+
+<p>リンクをホバーすると下線が消えるようにしていますが、どんな状態でも下線が消えているようにできます。ただし実際のサイトでは、ページを見ている人に、リンクはリンクであることを知らせるのを忘れないようにしてください。下線を残すのは、ユーザーが慣れているように、テキスト内にリンクがあることを伝える重要な手掛かりになります。CSS にふくまれるあらゆるものには、変更によって文章を使いづらくするおそれがあることを強調しておきます。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: MDN の記事で、<a href="/ja/docs/Learn/Accessibility">アクセシビリティ</a> についての注意をたびたび目にするでしょう。これについて語る時は、ウェブページがどんな人にも理解でき、使えるものである必要性に言及しています。</p>
+
+<p>訪問者はマウス付きコンピューター やタッチスクリーン付き電話で見ているかもしれません。あるいはスクリーンリーダーで文章を読んでいることや、大きな文字をつかう必要があることや、キーボードだけを使っていることもあるでしょう。</p>
+
+<p>プレーンな HTML ドキュメントは一般的にあらゆる人に対してアクセシブルですので、スタイリングするときはアクセシビリティを下げないようにするのが大切です。</p>
+</div>
+
+<h2 id="Combining_selectors_and_combinators" name="Combining_selectors_and_combinators">セレクタとコンビネーターを組み合わせる</h2>
+
+<p>複数のセレクタとコンビネーターを組み合わせることができます:</p>
+
+<pre class="brush: css notranslate">/* &lt;article&gt; 要素の内側にある &lt;p&gt; 要素の &lt;span&gt; 要素に焦点を当てるとき  */
+article p span { ... }
+
+/* &lt;h1&gt; 要素の直後に来る &lt;ul&gt; 要素の、そのまた直後に来る &lt;p&gt; 要素に焦点を当てるとき */
+h1 + ul + p { ... }</pre>
+
+<p>複数の形のセレクタも組み合わせられます。以下のコードを CSS に追加してみてください:</p>
+
+<pre class="brush: css notranslate">body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}</pre>
+
+<p>これは <code>&lt;body&gt;</code> 要素の中にある <code>&lt;h1&gt;</code> 要素の直後に来た <code>&lt;p&gt;</code> 要素の中にある <code>special</code> クラスの要素をスタイリングします。</p>
+
+<p>HTML のうち、スタイルが適用されるのは <code>&lt;span class="special"&gt;</code> のみです。</p>
+
+<p>現時点では複雑に思えても心配しなくて大丈夫です。CSS を書いていくうちにすぐに理解できるようになります。</p>
+
+<h2 id="Wrapping_up" name="Wrapping_up">まとめ</h2>
+
+<p>このチュートリアルでは、CSS によるドキュメントのスタイル設定の仕方をいくつか見てきました。残りのレッスンでさらに深堀りしていきます。あたなはもうすでに、テキストのスタイリングや要素のさまざまな指定の仕方、さらには MDN ドキュメント内でのプロパティと値の調べ方といったことも理解したはずです。</p>
+
+<p>次のレッスンでは、CSS の構造を見ていきます。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュールの記事</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の全体像</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a></li>
+</ol>
diff --git a/files/ja/learn/css/first_steps/how_css_is_structured/index.html b/files/ja/learn/css/first_steps/how_css_is_structured/index.html
new file mode 100644
index 0000000000..a9e2ae7130
--- /dev/null
+++ b/files/ja/learn/css/first_steps/how_css_is_structured/index.html
@@ -0,0 +1,530 @@
+---
+title: CSS の全体像
+slug: Learn/CSS/First_steps/How_CSS_is_structured
+tags:
+  - Beginner
+  - CSS
+  - HTML
+  - Learn
+  - Selectors
+  - Structure
+  - comments
+  - properties
+  - shorthand
+  - values
+  - whitespace
+translation_of: Learn/CSS/First_steps/How_CSS_is_structured
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary">CSS の概要と基本的な使い方について理解できたので、今度は CSS の構造をもう少し詳しく見てみましょう。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピュータリテラシー、 <a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、 基本的な <a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>、 HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で学習)、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">基本的な CSS の動作</a></td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>CSS の基本的な構文の構造を詳細に学ぶ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Applying_CSS_to_HTML" name="Applying_CSS_to_HTML">CSS を HTML に適用する</h2>
+
+<p>まず、文書に CSS を適用する方法として、外部スタイルシートを使う方法、内部スタイルシートを使う方法、インラインスタイルを使う方法の3つの方法を見てみましょう。</p>
+
+<h3 id="External_stylesheet" name="External_stylesheet">外部スタイルシート</h3>
+
+<p>外部スタイルシートには <code>.css</code> という拡張子を持つ別のファイルに CSS が含まれています。これは、文書に CSS を持ち込む最も一般的で便利な方法です。1つの CSS ファイルを複数のウェブページにリンクして、すべてのウェブページを同じ CSS スタイルシートでスタイル付けすることができます。 <a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a>では、外部のスタイルシートをウェブページにリンクしました。</p>
+
+<p>HTML の <code>&lt;link&gt;</code> 要素から外部 CSS スタイルシートを参照しています。</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My CSS experiment&lt;/title&gt;
+    &lt;link rel="stylesheet" href="styles.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Hello World!&lt;/h1&gt;
+    &lt;p&gt;This is my first CSS example&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>CSS ファイルはこのようになります。</p>
+
+<pre class="brush: css notranslate">h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}</pre>
+
+<p>{{htmlelement("link")}} 要素の <code>href</code> 属性は、ファイルシステム上のファイルを参照する必要があります。上の例では、 CSS ファイルは HTML 文書と同じフォルダーにありますが、どこか別の場所に配置してパスを調整することもできます。以下に 3 つの例を示します。</p>
+
+<pre class="brush: html notranslate">&lt;!-- 現在のディレクトリの中の styles というサブディレクトリの中 --&gt;
+&lt;link rel="stylesheet" href="styles/style.css"&gt;
+
+&lt;!-- カレントディレクトリの中にある styles というサブディレクトリの中にある、 general というサブディレクトリの中 --&gt;
+&lt;link rel="stylesheet" href="styles/general/style.css"&gt;
+
+&lt;!-- ひとつ上のレベルのディレクトリに行き、その下にある styles というサブディレクトリの中 --&gt;
+&lt;link rel="stylesheet" href="../styles/style.css"&gt;</pre>
+
+<h3 id="Internal_stylesheet" name="Internal_stylesheet">内部スタイルシート</h3>
+
+<p>内部スタイルシートは、 HTML 文書の中に配置します。内部スタイルシートを作成するには、 CSS を HTML 文書の {{htmlelement("head")}} の中にある {{htmlelement("style")}} 要素の中に入れてください。</p>
+
+<p>例えば、 HTML はこのようになります。</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My CSS experiment&lt;/title&gt;
+    &lt;style&gt;
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Hello World!&lt;/h1&gt;
+    &lt;p&gt;This is my first CSS example&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>状況によっては、内部スタイルシートが便利な場合もあります。たとえば、コンテンツ管理システムを使用している場合、外部の CSS ファイルを変更することがブロックされているかもしれません。</p>
+
+<p>しかし、複数のページを持つサイトでは、内部スタイルシートは効率の悪い作業方法になります。内部スタイルシートを使用して、複数のページに統一された CSS スタイルを適用するには、そのスタイルを使用するすべてのウェブページに内部スタイルシートをコピーしなければなりません。効率性の低下はサイトの保守にも影響します。内部スタイルシートの CSS では、1 つの簡単なスタイル変更でも、複数のウェブページの編集が必要になるリスクがあります。</p>
+
+<h3 id="Inline_styles" name="Inline_styles">インラインスタイル</h3>
+
+<p>インラインスタイルは、単一の HTML 要素のみに影響を与える CSS 宣言で、 <code>style</code> 属性の中に記述します。 HTML 文書におけるインラインスタイルの実装は次のようになります。</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My CSS experiment&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1 style="color: blue;background-color: yellow;border: 1px solid black;"&gt;Hello World!&lt;/h1&gt;
+    &lt;p style="color:red;"&gt;This is my first CSS example&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>この方法での CSS の使用は、可能な限り避けてください。</strong>まず、 CSS の実装の中では最も保守の効率が悪いものです。一つのスタイルを変更するために、一つのウェブページ内で複数の編集が必要になるかもしれません。第二に、インライン CSS はプレゼンテーション用のコードを HTML やコンテンツに混ぜてしまうため、すべてが読んだり理解したりしにくいものになってしまいます。コードとコンテンツを分離すれば、ウェブサイトで働くすべての人にとって保守が容易になります。</p>
+
+<p>インラインスタイルが一般的な状況はいくつかあります。作業環境が非常に制限されている場合は、インラインスタイルの使用に頼らざるを得ないかもしれません。例えば、 CMS では HTML の本文しか編集できない場合があります。また、できるだけ多くのメールクライアントとの互換性を実現するために、 HTML メールでインラインスタイルが多用されているのを見ることもあるでしょう。</p>
+
+<h2 id="Playing_with_the_CSS_in_this_article" name="Playing_with_the_CSS_in_this_article">CSS を試してみる</h2>
+
+<p>次の演習では、コンピューターにフォルダーを作成してください。フォルダーには好きな名前をつけてください。以下のテキストをコピーして、フォルダーの中に 2 つのファイルを作成してください。</p>
+
+<p><strong>index.html:</strong></p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My CSS experiments&lt;/title&gt;
+    &lt;link rel="stylesheet" href="styles.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;p&gt;Create your test HTML here&lt;/p&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>styles.css:</strong></p>
+
+<pre class="brush: css notranslate">/* Create your test CSS here */
+
+p {
+  color: red;
+}</pre>
+
+<p>試してみたい CSS を見つけたら、 HTML の <code>&lt;body&gt;</code> の内容をスタイル付けする HTML に置き換え、テスト用の CSS コードを CSS ファイルに追加してください。</p>
+
+<p>別の方法として、以下のインタラクティブなエディターを使用することもできます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}}</p>
+
+<p>楽しみながら、先に進んでいきましょう。</p>
+
+<h2 id="Selectors" name="Selectors">セレクター</h2>
+
+<p>セレクターは CSS に欠かせない構成要素です。<a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a>のチュートリアルでは、すでにさまざまな種類のセレクターを見てきました。セレクターは、 HTML 文書のなかでスタイルを適用する対象を指定するものです。もし CSS が期待通りにコンテンツに適用されなかったら、セレクターが一致すると思っていた方法で一致していないのかもしれません。</p>
+
+<p>それぞれの CSS 規則の先頭には、セレクターまたはセレクターのリストを書きます。これによって、ブラウザにどの要素にCSS規則を適用するかを指示します。次のコード例は、いずれも有効なセレクター、またはセレクターのリストです。</p>
+
+<pre class="brush: css notranslate">h1
+a:link
+.manythings
+#onething
+*
+.box p
+.box p:first-child
+h1, h2, .intro</pre>
+
+<p>上記のセレクターを使った CSS 規則を作ってみてください。セレクターによってスタイル付けされる HTML を追加します。上記の構文に馴染みのないものがあれば、 MDN を検索してみてください。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 次のモジュールの記事 <a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> で、セレクターについてより詳しく学ぶことができます。</p>
+</div>
+
+<h3 id="Specificity" name="Specificity">詳細度</h3>
+
+<p>2 つのセレクターが同じ HTML 要素を選択するシナリオに遭遇するかもしれません。以下のスタイルシートを考えてみましょう。 <code>p</code> セレクターで段落のテキストを青に設定します。しかし、選択された要素のテキストを赤に設定するクラスもあります。</p>
+
+<pre class="brush: css notranslate">.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}</pre>
+
+<p>HTML 文書の中に <code>special</code> のクラスを持つ段落があるとします。両方の規則が適用されます。どちらのセレクターが優先されるでしょうか？段落のテキストが青と赤のどちらになると思いますか？</p>
+
+<pre class="brush: html notranslate">&lt;p class="special"&gt;What color am I?&lt;/p&gt;</pre>
+
+<p>CSS 言語には、競合が発生した場合にどちらのセレクターが強いかを制御するための規則があります。これらの規則は<ruby><strong>カスケード</strong><rp> (</rp><rt>cascade</rt><rp>) </rp></ruby>と<ruby><strong>詳細度</strong><rp> (</rp><rt>specificity</rt><rp>) </rp></ruby>と呼ばれています。以下のコードブロックでは、 <code>p</code> セレクターに対して2つの規則が定義されていますが、段落テキストは青くなります。これは、段落テキストを青に設定する宣言がスタイルシートの後に現れているからです。後のスタイルは、それより前のスタイルシートに現れた競合するスタイルを置き換えます。これが<strong>カスケード</strong>規則です。</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}
+
+p {
+  color: blue;
+}</pre>
+
+<p>しかし、クラスセレクターと要素セレクターの間に競合がある前の例では、クラスが優先され、赤い段落テキストがレンダリングされます。スタイルシートの後方に競合するスタイルが表示されているにもかかわらず、どうしてこのようなことが起こるのでしょうか？クラスは、要素セレクターよりも<strong>詳細度</strong>が高いことになっており、より具体的であると評価されるので、他の競合するスタイル宣言をキャンセルしたのです。</p>
+
+<p>この実験を自分でやってみましょう。 HTML を追加して、2つの <code>p { ... }</code> 規則をスタイルシートに追加します。次に、最初の <code>p</code> セレクターを <code>.special</code> に変更して、それがスタイルをどのように変えるかを見てみましょう。</p>
+
+<p>詳細度とカスケードの規則は、最初は複雑に見えるかもしれません。これらの規則は、 CSS に慣れてくると理解しやすくなります。次のモジュールの <a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a> の章では、詳細度の計算方法を含めて詳しく説明しています。</p>
+
+<p>今のところ、詳細度が存在することを覚えておいてください。スタイルシートの他の何かがより高い詳細度を持っているために、 CSS が期待通りに適用されないことがあります。 1 つの要素に複数の規則が適用される可能性があることを認識することは、この種の問題を解決するための最初のステップです。</p>
+
+<h2 id="Properties_and_values" name="Properties_and_values">プロパティと値</h2>
+
+<p>もっとも基本的なレベルでは、 CSS は2つの部品でできています。</p>
+
+<ul>
+ <li><strong>プロパティ</strong>: スタイルに関して変更できる何らかの特徴をあらわす、人間が理解できる識別子です。例えば、 {{cssxref("font-size")}}, {{cssxref("width")}}, {{cssxref("background-color")}} などです。</li>
+ <li><strong>値</strong>: 各プロパティには値が割り当てられています。この値は、プロパティをどのようにスタイル付けするかを示します。</li>
+</ul>
+
+<p>次の例では、一組のプロパティと値を強調表示しています。プロパティ名は <code>color</code> で、値は <code>blue</code> です。</p>
+
+<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>プロパティが値と組み合わせられているとき、この組み合わせを <ruby><em>CSS 宣言</em><rp> (</rp><rt>CSS declaration</rt><rp>) </rp></ruby>と呼びます。 CSS 宣言は <ruby><em>CSS 宣言ブロック</em><rp> (</rp><rt>CSS Declaration Blocks</rt><rp>) </rp></ruby>の中に入っています。次のコード例では CSS の宣言ブロックを強調しています。</p>
+
+<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>そして、 CSS 宣言ブロックは<em>セレクター</em>と組になって <em>CSS 規則セット</em> (または <em>CSS 規則</em>) になります。1つは <code>h1</code> セレクター用、もう1つは <code>p</code> セレクター用です。色付きのハイライトは <code>h1</code> 規則を識別します。</p>
+
+<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>CSS プロパティを特定の値に設定することが、文書のレイアウトとスタイルを定義する主な方法です。 CSS エンジンは、どの宣言がページの各要素に適用されるかを計算します。</p>
+
+<div class="blockIndicator warning">
+<p><strong>重要:</strong> CSS のプロパティと値は大文字と小文字を区別します。それぞれのプロパティと値の組はコロン (<code>:</code>) で区切られます。</p>
+</div>
+
+<p><strong>以下に挙げたプロパティの様々な値を調べてみてください。それぞれの HTML 要素にスタイルを適用する CSS 規則を書いてみてください。</strong></p>
+
+
+
+<ul>
+ <li><strong>{{cssxref("font-size")}}</strong></li>
+ <li><strong>{{cssxref("width")}}</strong></li>
+ <li><strong>{{cssxref("background-color")}}</strong></li>
+ <li><strong>{{cssxref("color")}}</strong></li>
+ <li><strong>{{cssxref("border")}}</strong></li>
+</ul>
+
+<div class="warning">
+<p><strong>重要</strong>: プロパティが不明だった場合、または指定されたプロパティの値が妥当ではなかった場合は、宣言が<em>無効</em>なものとして扱われます。ブラウザーの CSS エンジンはこれを完全に無視します。</p>
+</div>
+
+<div class="warning">
+<p><strong>重要</strong>: CSS (および他のウェブ標準) では、言語ごとに綴りに揺れがあったり確実でない場合には、アメリカ綴りを標準とすることが合意されています。例えば、 <code>color</code> は <code>color</code> と綴るべきであり、 <code>colour</code> では動作しません。</p>
+</div>
+
+<h3 id="Functions" name="Functions">関数</h3>
+
+<p>ほとんどの値は比較的単純なキーワードや数値ですが、関数の形をとる値もあります。例として、<code>calc()</code> 関数があります。これは CSS 内で簡単な数式を行うことができます。</p>
+
+<div id="calc_example">
+<pre class="brush: html notranslate">&lt;div class="outer"&gt;&lt;div class="box"&gt;The inner box is 90% - 30px.&lt;/div&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}</pre>
+</div>
+
+<p>これは次のように表示されます。</p>
+
+<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p>
+
+<p>関数は、関数名と、関数に渡す値を囲む括弧で構成されています。上記の <code>calc()</code> の例では、値は、このボックスの幅を含むブロックの幅の 90% から 30 ピクセルを引いた値と定義しています。計算の結果は、事前に計算して静的な値として入力できるものではありません。</p>
+
+<p>他の例としては、 {{cssxref("transform")}} のさまざまな値、たとえば <code>rotate()</code> などがあります。</p>
+
+<div id="transform_example">
+<pre class="brush: html notranslate">&lt;div class="box"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn);
+}</pre>
+</div>
+
+<p>上記のコードの出力は次のようになります。</p>
+
+<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p>
+
+<p><strong>以下に挙げたプロパティのそれぞれの値を調べてみましょう。ぞれぞれの HTML 要素にスタイルを適用する CSS 規則を記述してみましょう。</strong></p>
+
+<ul>
+ <li><strong>{{cssxref("transform")}}</strong></li>
+ <li><strong>{{cssxref("background-image")}}、特に gradient の値</strong></li>
+ <li><strong>{{cssxref("color")}}、特に rgb/rgba/hsl/hsla の値</strong></li>
+</ul>
+
+<h2 id="rules" name="rules">アット規則</h2>
+
+<p>CSS の<a href="/en-US/docs/Web/CSS/At-rule">アット規則</a> は、 CSS が実行すること、またはそれがどのように動作するべきかの指示を提供します。いくつかのアット規則は、キーワードと値だけのシンプルなものです。例えば、 <code>@import</code> はスタイルシートを別の CSS スタイルシートにインポートします。</p>
+
+<pre class="brush: css notranslate">@import 'styles2.css';</pre>
+
+<p>よく目にするであろうアット規則が <code>@media</code> があり、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>を作成するために使用されます。メディアクエリは CSS スタイルを提供する条件を使用します。</p>
+
+<p>以下の例では、スタイルシートは <code>&lt;body&gt;</code> 要素に既定でピンクの背景を定義しています。しかし、ブラウザーのビューポートが 30em よりも広い場合は、青い背景を定義するメディアクエリが続いています。</p>
+
+<pre class="brush: css notranslate">body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}</pre>
+
+<p>これ以外のアット規則にも、これからのチュートリアルで遭遇するでしょう。</p>
+
+<p><strong>ビューポートの幅に基づいてスタイルを変更するメディアクエリを追加できるかどうかを確認してください。ブラウザーウィンドウの幅を変更して結果を確認してみてください。</strong></p>
+
+<h2 id="Shorthands" name="Shorthands">一括指定</h2>
+
+<p>{{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, {{cssxref("margin")}} のようなプロパティは<ruby><strong>一括指定プロパティ</strong><rp> (</rp><rt>shorthand properties</rt><rp>) </rp></ruby>と呼ばれています。これは一括指定プロパティが複数の値を1行で設定するからです。</p>
+
+<p>例えば、コードのこの 1 行を見てください。</p>
+
+<pre class="brush: css notranslate">/* 4 つの値による一括定義、例えば padding や margin
+   では、値が適用される順序は top, right, bottom, left の順 (top から時計回り) です。
+   他の種類の一括指定もあり、例えば 2 つの値による一括指定を padding/margin に設定すると、
+   top/bottom と left/right になります。*/
+padding: 10px 15px 15px 5px;</pre>
+
+<p>これは以下の 4 行のコードと同等です。</p>
+
+<pre class="brush: css notranslate">padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;</pre>
+
+<p>次の 1 行を見てください。</p>
+
+<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre>
+
+<p>以下の 5 行と同等です。</p>
+
+<pre class="brush: css notranslate">background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-attachment: fixed;</pre>
+
+<p>コースの後半では、他にも多くの一括指定プロパティの例に遭遇します。 MDN の <a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>は、あらゆる一括指定プロパティについてのより詳しい情報を得るための良いリソースです。</p>
+
+<p><strong>自分の CSS の練習でこれらの前述) 使用してみて、それがどのように動作するかをよりよく理解するようにしてください。また、様々な値を使って実験してみてください。</strong></p>
+
+<div class="blockIndicator warning">
+<p><strong>警告</strong>: CSS の一括指定を使用する際に、省略した値がどのようにリセットされるかはあまり目立たない側面です。 CSS 一括指定で指定されていない値は初期値に戻ります。これは、 CSS 一括指定で省略された値は、<strong>以前に設定された値を上書きしてしまう</strong>可能性があることを意味します。</p>
+</div>
+
+<h2 id="Comments" name="Comments">コメント</h2>
+
+<p>どんなコーディング作業でもそうですが、 CSS と一緒にコメントを書くのがベストプラクティスです。これは、後で修正や強化のために戻ってきたときに、コードがどのように動作するかを思い出すのに役立ちます。また、他の人がコードを理解するのにも役立ちます。</p>
+
+<p>CSS のコメントは <code>/*</code> で始まり <code>*/</code> で終わります。以下の例では、コメントはコードのそれぞれの区間のの先頭をマークしています。これは、コードベースが大きくなるにつれて、コードベースを移動するのに役立ちます。このようなコメントの付け方をすると、コードエディターでコメントを検索することで、コードの区間を効率的に見つけることができます。</p>
+
+<pre class="brush: css notranslate">/* 基本的な要素のスタイル付けを扱う */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* 大きな画面やウィンドウで読みやすいように、グローバルフォントの大きさを
+     大きくします。 */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* DOM で入れ子になっている特定の要素を処理します。 */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}</pre>
+
+<p>コードを「コメントアウト」すると、試験的にコードの区間を一時的に無効にするのにも便利です。以下の例では、 <code>.special</code> の規則はコードを「コメントアウト」することで無効化されています。</p>
+
+<pre class="brush: css notranslate">/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}</pre>
+
+<p><strong>CSS にコメントを追加してみましょう。</strong></p>
+
+<h2 id="White_space" name="White_space">ホワイトスペース</h2>
+
+<p>ホワイトスペースとは、半角スペース、タブ、改行を意味します。ブラウザーが HTML のホワイトスペースを無視するように、ブラウザーは CSS の中のホワイトスペースを無視します。ホワイトスペースの価値は、読みやすさを向上させるためにあります。</p>
+
+<p>下の例では、それぞれの宣言 (と規則の先頭/末尾) が個別の行で行われています。これは間違いなく、CSS を書くのに良い方法です。これにより、CSS の保守や理解が容易になります。</p>
+
+<pre class="brush: css notranslate">body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+</pre>
+
+<p id="Very_compact">次の例は、同等の CSS をより圧縮したものです。2つの例は同じように動作しますが、下の例の方が読みにくいでしょう。</p>
+
+<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; border-radius: 3px;}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+</pre>
+
+<p>自分のプロジェクトでは、個人的な好みに応じてコードを書式化します。チームプロジェクトでは、チームやプロジェクトに独自のスタイルガイドがあるかもしれません。</p>
+
+<div class="blockIndicator warning">。
+<p><strong>重要:</strong> CSS 宣言ではホワイトスペースが値を区切っていますが、<strong>プロパティ名にホワイトスペースが含まれることはありません。</strong></p>
+<strong> </strong></div>
+
+<p><strong>例えば、以下の宣言は正しい CSS です。</strong></p>
+
+
+
+<pre class="brush: css notranslate"><strong>margin: 0 auto;
+padding-left: 10px;</strong></pre>
+
+<p><strong>次の例は誤ったCSSです:</strong></p>
+
+<pre class="brush: css notranslate"><strong>margin: 0auto;
+padding- left: 10px;</strong></pre>
+
+<p><strong><code>0auto</code> という書き方をブラウザは正しい値と解釈してくれません。なぜなら、<code>margin</code> プロパティの値 <code>0</code>、および <code>auto</code> はふたつの別々の値だからです。<code>padding-</code>もまた、ブラウザが認識できる正しいプロパティ名ではありません。</strong></p>
+
+<p><strong>CSSのプロパティに対する複数の値どうしを区別するためには、最低でも1個以上の空白をあいだにおく必要があります。また、プロパティの名称や値のひとつひとつは、その一部分だけを切り離したりせず続けて書かなければなりません。</strong></p>
+
+<p><strong><strong>自分のCSSのなかで空白をさまざまに入れてみて、どうすればCSSが正しく機能して、どうすれば機能しなくなるかたしかめてみましょう。</strong></strong></p>
+
+<h2 id="Whats_next" name="Whats_next"><strong>次のステップ</strong></h2>
+
+<p><strong>ブラウザがHTMLやCSSを解釈してウェブページに作り替えていくながれを多少なりとも知っておくことは開発の役にたちます。そこで、次の記事 「<a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？」 </a> では、ブラウザがWebページを生成する過程についてみていきましょう。</strong></p>
+
+<p><strong>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</strong></p>
+
+<h2 id="In_this_module" name="In_this_module"><strong>このモジュール内</strong></h2>
+
+<ol>
+ <li><strong><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></strong></li>
+ <li><strong><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></strong></li>
+ <li><strong><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の全体像</a></strong></li>
+ <li><strong><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？</a></strong></li>
+ <li><strong><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a></strong></li>
+</ol>
diff --git a/files/ja/learn/css/first_steps/how_css_works/index.html b/files/ja/learn/css/first_steps/how_css_works/index.html
new file mode 100644
index 0000000000..6044a3c29a
--- /dev/null
+++ b/files/ja/learn/css/first_steps/how_css_works/index.html
@@ -0,0 +1,164 @@
+---
+title: CSS はどう働くか？
+slug: Learn/CSS/First_steps/How_CSS_works
+tags:
+  - Beginner
+  - CSS
+  - DOM
+  - Learn
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{LearnSidebar}}<br>
+ {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
+
+<p class="summary">CSS の基本と目的、簡単なスタイルシートの書き方を学んできました。このレッスンでは、ブラウザーが CSS と HTML を実際にウェブページとして表示していくさまを見ていきます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、 <a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a>を学習のこと)。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>
+    <p>ブラウザーが CSS と HTML を解析する方法、およびブラウザーが解釈できない CSS に遭遇したときに何が起こるかを理解する。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="How_does_CSS_actually_work" name="How_does_CSS_actually_work">CSS は実際にはどう機能するのか？</h2>
+
+<p><font>ブラウザーがドキュメントを表示するとき、ブラウザーはそのコンテンツをスタイル情報と結合する必要があります。</font><font>以下にリストしたいくつかの段階でドキュメントが処理されます。</font><font>これはブラウザーがウェブページを読み込むときに起こることを単純化したものであり、各ブラウザーで処理は異なるものの、おおよそ何が起こるかを示しています。</font></p>
+
+<ol>
+ <li>ブラウザーが HTML をロードします（ネットワークから受信するなど）。</li>
+ <li>{{Glossary("HTML")}} が {{Glossary("DOM")}} (<em>Document Object Model</em>) に変換されます。DOM はコンピューターのメモリー内のドキュメントです。次のセクションで詳述します。</li>
+ <li><font>その後ブラウザーは埋め込まれた画像やビデオなどの HTML ドキュメントにリンクされているリソースと CSS を取得します。</font><font>JavaScript はもう少し後に処理されるため、ここでは簡略化のため説明しません。</font></li>
+ <li><font>ブラウザーは取得した CSS を解析し、要素、クラス、ID などセレクタの種類ごとに分類します。見つけたセレクターに基づいて、DOM のどのノードにどのルールを適用するかを決定し、スタイルを適用します（この中間ステップはレンダーツリーと呼ばれます）。</font></li>
+ <li>レンダーツリーは、ルール適用後の構造にレイアウトされます。</li>
+ <li>ページが画面に表示されます（この段階はペイントと呼ばれます）。</li>
+</ol>
+
+<p>簡単に図に表すと次のとおりです。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p>
+
+<h2 id="About_the_DOM" name="About_the_DOM">DOM について</h2>
+
+<p><font><font>DOM にはツリーのような構造があります。</font><font>マークアップの各要素、属性、およびテキスト</font><font>は、ツリー構造の </font></font>{{Glossary("Node/DOM","DOM ノード")}} <font><font>になります。</font><font>ノードは他の DOM ノードとの関係によって定義されます。</font><font>要素は子ノードの親であり、子ノードには兄弟があります。</font></font></p>
+
+<p><font>DOM は CSS とドキュメントのコンテンツが出会う場所であるため、DOM を理解すると CSS の設計、デバッグ、および保守に役立ちます。</font><font>ブラウザーの開発者ツールによって、どのルールが適用されるかを確認するために、アイテムを選択することで DOM にナビゲートされます。</font></p>
+
+<h2 id="A_real_DOM_representation" name="A_real_DOM_representation">DOM の実際</h2>
+
+<p>長く退屈な説明ではなく、例を用いて実際の HTML が DOM に変換される様子を見てみましょう。</p>
+
+<p>以下のような HTML があります。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Let's use:
+  &lt;span&gt;Cascading&lt;/span&gt;
+  &lt;span&gt;Style&lt;/span&gt;
+  &lt;span&gt;Sheets&lt;/span&gt;
+&lt;/p&gt;
+</pre>
+
+<p><font><font>この場合 DOM では </font></font><code>&lt;p&gt;</code><font><font> 要素が親ノードです。子には、テキストノードと 3 つの </font></font><code>&lt;span&gt;</code><font><font> 要素をノードとして</font></font><font><font>持ちます。一方で </font></font><code>SPAN</code><font><font> ノードは親でもあり、テキストノードを子に持ちます。</font></font></p>
+
+<pre class="notranslate">P
+├─ "Let's use:"
+├─ SPAN
+|  └─ "Cascading"
+├─ SPAN
+|  └─ "Style"
+└─ SPAN
+   └─ "Sheets"
+</pre>
+
+<p>ブラウザーは上述の HTML をこのように解釈し、DOM ツリーを以下のようにレンダリングし出力します。</p>
+
+<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">p {margin:0;}</pre>
+</div>
+
+<h2 id="Applying_CSS_to_the_DOM" name="Applying_CSS_to_the_DOM">DOM への CSS 適用</h2>
+
+<p>ドキュメントに CSS を追加して、スタイルを設定したとします。先ほどと同じ以下の HTML を使います。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Let's use:
+  &lt;span&gt;Cascading&lt;/span&gt;
+  &lt;span&gt;Style&lt;/span&gt;
+  &lt;span&gt;Sheets&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<p>CSS は以下のものを適用します。</p>
+
+<pre class="brush: css notranslate">span {
+  border: 1px solid black;
+  background-color: lime;
+}</pre>
+
+<p><font><font>ブラウザーは HTML 解析によって DOM を作成したのちに、CSS を解析します。CSS には唯一 </font></font><code>span</code><font><font> セレクターしかないため、ブラウザーは CSS を非常に迅速にソートできます。<br>
+ 3 つ の </font></font><code>&lt;span&gt;</code><font><font> </font><font>にそのルールを適用し</font><font>、最終的な視覚的表現を画面にペイントします。</font></font></p>
+
+<p><font><font>結果、次のとおり出力されます。</font></font></p>
+
+<p>{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}</p>
+
+<p>次のモジュールの <a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a> ではブラウザーの開発者ツールを使用した CSS のデバッグと、ブラウザーが CSS を解釈する方法について詳しく学習します。</p>
+
+<h2 id="What_happens_if_a_browser_encounters_CSS_it_doesnt_understand" name="What_happens_if_a_browser_encounters_CSS_it_doesnt_understand">ブラウザーが解釈できない CSS に遭遇したらどうなるのか？</h2>
+
+<p><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS#Browser_support">以前のレッスン</a>では、<font>ブラウザーがすべての新しい CSS を実装するわけではないことを述べました。また</font><font>多くの人が最新バージョンのブラウザーを使用しているわけでもありません。</font><font>CSS は常に開発されており、ブラウザーがまだ認識できないような CSS セレクターや宣言に遭遇するとどうなるか疑問に思われるかもしれません。</font><br>
+ <br>
+ その答えは何もせず、CSS の次の部分に移動するということです。</p>
+
+<p><font>ブラウザーがルールを解析しているときに、理解できないプロパティまたは値に遭遇した場合、ブラウザーはそれを無視して次の宣言に進みます。こういうことは、</font><font>プロパティまたは値のスペルが間違っている場合や、プロパティまたは値が新しすぎてブラウザーがまだサポートしていない場合に起こりえます。</font></p>
+
+<p>同様に、ブラウザーが理解できないセレクターを検出した場合もそのルール全体を無視し、次のルールに進みます。</p>
+
+<p><font>次の例では、色にイギリス英語のスペルを使用しているため、プロパティが正しくありません（訳注: color を誤って colour としてしまっている）。よって段落は青くなっていません。ただし、他の CSS はすべて適用されています。</font><font>無効な行のみが無視されます。</font></p>
+
+<div id="Skipping_example">
+<pre class="brush: html notranslate">&lt;p&gt; I want this text to be large, bold and blue.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">p {
+  font-weight: bold;
+  colour: blue; /* colorプロパティのスペルが正しくありません */
+  font-size: 200%;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p>
+
+<p><font>この動作は非常に有用です。ブラウザが新しい CSS を理解しないとしてもエラーは発生しないということを理解した上で、新しい CSS を拡張機能として使用できるということを意味します。ブラウザーは新しい機能を取得するかしないかのどちらかになります。</font>カスケードが機能する方法と、同じ特定性を持つ2つのルールがある場合、ブラウザはスタイルシートの中で出会った最後の CSS を使うという事実と相まって、新しい CSS をサポートしていないブラウザにも代替案を提供することができます。</p>
+
+<p><font><font>とりわけ新しいゆえに必ずしもサポートされているというわけではない、という値を使用する場合に有用です。例えば、一部の古いブラウザーは </font></font><code>calc()</code><font><font> をサポート</font><font>して</font><font>いません</font><font>。ボックスに対して予防的にピクセル単位の幅を指定しておき、その後 </font></font><code>calc()</code><font><font> で </font></font><code>100% - 50px</code><font><font> の幅を指定した場合、</font></font><font><font>古いブラウザーは前者（ピクセル指定）を使用し、理解できない </font></font><code>calc()</code><font><font> を無視します。かたや新しいブラウザーはピクセル指定を理解はできるものの、あとに記述された </font></font><code>calc()</code><font><font> の方を採用します</font><font>。</font></font></p>
+
+<pre class="brush: css notranslate">.box {
+  width: 500px;
+  width: calc(100% - 50px);
+}</pre>
+
+<p>以降のレッスンで、さまざまなブラウザーをサポートするための多くの方法を検討していきます。</p>
+
+<h2 id="And_finally" name="And_finally">最後に</h2>
+
+<p>このモジュールはほぼ完了です。ただしもうひとつだけやっておいてほしいことがあります。次の記事の<a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a>にて実際のスタイリングをとおして CSS の腕試しをおこないます。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の構造化</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a></li>
+</ol>
diff --git a/files/ja/learn/css/first_steps/index.html b/files/ja/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..3a7a08cb48
--- /dev/null
+++ b/files/ja/learn/css/first_steps/index.html
@@ -0,0 +1,53 @@
+---
+title: CSS の第一歩
+slug: Learn/CSS/First_steps
+tags:
+  - Beginner
+  - CSS
+  - Landing
+  - Learn
+  - Module
+  - first steps
+translation_of: Learn/CSS/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。</p>
+
+<h2 id="Prerequisites" name="Prerequisites">前提条件</h2>
+
+<p>このモジュールを始める前に、次の状態になっておくべきです。</p>
+
+<ol>
+ <li>コンピューターの使い方と (ウェブを見たりコンテンツを消費したりといった)ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。</li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>で説明されている基本的な作業環境と、<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い方</a>で説明されているファイルの作り方や管理の仕方について理解していること。</li>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で説明されている HTML についての基礎知識に慣れ親しんでいること。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは <a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったオンラインコーディングプログラムで試すことが可能です。</p>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<p>このモジュールには、CSS についてすべての基本的なことがらと、いくつかのスキルをテストできる次の記事が含まれています。</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></dt>
+ <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets; カスケーティングスタイルシート) は見栄えのよいウェブページを作ることができますが、背後ではどのように動いているのでしょうか？この記事では CSS について、簡単なコードの例とこの言語の主要な項目を説明します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></dt>
+ <dd>この記事では、簡単な HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の全体像</a></dt>
+ <dd>CSS の概要と使用方法の基本について理解できたので、今度は言語自体の構造をもう少し詳しく見てみましょう。ここで説明した概念の多くはすでに目にしています。あとに出てくる概念がわかりにくい場合は、ここに戻って見直してしてください。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？</a></dt>
+ <dd>CSS の基本とその目的、そして簡単なスタイルシートの書き方を学びました。このレッスンでは CSS と HTML がブラウザーにどう働いてウェブページにするかを見ていきます。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a></dt>
+ <dd>過去数回のレッスンで学んだことから、CSS で単純なテキスト文書をフォーマットし、独自のスタイルを追加できることがわかります。この記事ではそれを行う機会を提供します。</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt>
+ <dd>本記事で説明した <em>CSS 入門</em> スキルを確認およびテストするのにちょうどいい Mozilla 基礎コース。セレクター、属性、値などを使った HTML 要素のスタイリングを学べます。</dd>
+</dl>
diff --git a/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html
new file mode 100644
index 0000000000..d404a70bbf
--- /dev/null
+++ b/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html
@@ -0,0 +1,100 @@
+---
+title: 新しい知識を使う
+slug: Learn/CSS/First_steps/Using_your_new_knowledge
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - Playground
+translation_of: Learn/CSS/First_steps/Using_your_new_knowledge
+---
+<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<p class="summary">先のいくつかのレッスンで、あなたは CSS を使ってシンプルなテキストドキュメントにスタイルを追加してフォーマットする方法を学びました。ここでは、それを実際に行ってみましょう。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基礎コンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>の基礎知識 HTML の基礎 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の入門</a>で学ぶ)、CSS の基礎(このモジュールの残り)</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>いくつかの CSS を試し、知識レベルを確認します</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Lets_play_with_some_CSS" name="Let's_play_with_some_CSS">さあ始めよう</h2>
+
+<p>下の Live エディタで試すこともできますし、<a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">我々の Github リポジトリ</a>からサンプルファイルをダウンロードして試してみることもできます。ここで使うサンプルはシンプルな一ページの HTML で、頭にはとりあえずシンプルな CSS が埋め込まれています。もしローカルで動かすとき HTML と CSS が一緒になっているのが嫌だったら別々のファイルに分割しても構いません。あるいは、<a href="https://codepen.io/" rel="noopener">CodePen</a> や <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>、<a href="https://glitch.com/" rel="noopener">Glitch </a>といったオンラインエディタを使うこともできます。</p>
+
+<div class="blockIndicator note">
+<p>注記: もし途中で詰まったら、私達に気兼ねなく相談してください！詳しくはこの記事の一番下にある「アセスメントとさらなるヘルプ」の部分を見てください。</p>
+</div>
+
+<h2 id="Lets_play_with_some_CSS" name="Let's_play_with_some_CSS">CSS を少し試してみよう</h2>
+
+<p>下のサンプルは、CSS でスタイルされたプロフィールページの例です。ここで使われているプロパティは次の通りです。これらについてはそれぞれリンクから MDN の記事に飛べますので、プロパティの詳細な説明についてはそちらをご参照ください。</p>
+
+<ul>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("text-decoration")}}</li>
+</ul>
+
+<p>下のプロフィールページでは、いろんなセレクタを使ったり、h1要素や h2要素などの装飾要素を使ったりしただけでなく、職業を表す部分ではクラスを定義してデザインを設定しました。</p>
+
+<p>プロパティの値をいろいろに変えて見た目がどう変わるか試してみましょう。</p>
+
+<ol>
+ <li>見出し 1 の文字色をピンクに変えてみましょう。色の指定には <code>hotpink</code> を使うとよいでしょう。</li>
+ <li>見出し 1 の下に太さ 10px の点線をつけてみましょう。そしてその色を <code>purple</code> にしてみましょう。</li>
+ <li>見出し 2 の書体をイタリックに変えてみましょう。</li>
+ <li>連絡先情報の部分で使われている <code>ul</code> 要素の {{cssxref("background-color")}} を <code>#eeeeee</code> にして、{{cssxref("border")}} を太さ 5px の紫の線に変えてみましょう。また、{{cssxref("padding")}} を指定してコンテンツと連絡先情報の部分にスペースが空くように設定しましょう。</li>
+ <li>リンクの部分にマウスが乗ったとき、リンクが <code>green</code> に変わるように設定しましょう。</li>
+</ol>
+
+<p>完成したら次の画像のようになるはずです。</p>
+
+<p><img alt="" src="https://media.prod.mdn.mozit.cloud/attachments/2019/12/31/17035/da8ff2a04da214e57e18a6ea3ac6832e/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p>
+
+<p>それから、このページに書かれていない属性をみてみましょう。<a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/Reference">MDN の CSS リファレンス</a> には冒険が待っています!</p>
+
+<p>ここには間違った回答はないことを覚えていてください — ここではいろいろ試して楽しみながら学びましょう。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p>
+
+<h2 id="Whats_next" name="What's_next">アセスメントとさらなるヘルプ</h2>
+
+<p>作ったものを見てほしいときや、作業に詰まってしまって質問をしたいとき：</p>
+
+<ol>
+ <li>あなたが作ったものを <a href="https://codepen.io/" rel="noopener">CodePen</a> や <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>、<a href="https://glitch.com/" rel="noopener">Glitch</a> などのコード共有サービスに公開してください。</li>
+ <li>添削の依頼あるいは訊きたいことを <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> に投稿してください。ここに投稿するときには次のことを忘れないようにしてください。
+  <ul>
+   <li>タイトルは何についての質問か分かるように、「Assessment wanted for CSS First Steps」のようにしてください。</li>
+   <li>添削や質問を依頼したいコードへのリンクを貼ってください。ソースコードを示してもらわないとこちらもどうサポートしたらよいかがわからないからです。</li>
+   <li>どの課題に取り組んでいるのか分かるように課題へのリンクを貼ってください。そうしていただけるとあなたがどこで躓いているのか知ることができます。</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="Whats_next" name="What's_next">次のステップ</h2>
+
+<p>最初のモジュールを修了しました。おめでとうございます。あなたはもう CSS の基本的な部分は理解できたはずです。そして、スタイルシートの挙動が分かるようになったはずです。次のモジュール、<a href="/ja/docs/Learn/CSS/Building_blocks">CSS ブロック構築</a>ではいくつかの重要な部分を深く見ていきましょう。</p>
+
+<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></li>
+</ol>
diff --git a/files/ja/learn/css/first_steps/what_is_css/index.html b/files/ja/learn/css/first_steps/what_is_css/index.html
new file mode 100644
index 0000000000..0d7d6f3cd3
--- /dev/null
+++ b/files/ja/learn/css/first_steps/what_is_css/index.html
@@ -0,0 +1,129 @@
+---
+title: CSSとは何か？
+slug: Learn/CSS/First_steps/What_is_CSS
+tags:
+  - Beginner
+  - CSS
+  - Introduction to CSS
+  - Learn
+  - Modules
+  - Specifications
+  - Syntax
+translation_of: Learn/CSS/First_steps/What_is_CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary"><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets；カスケーティングスタイルシート) は見栄えのよいページを作ることができますが、内部ではどう働くのでしょうか？この記事では簡単な構文の例とともに CSS とは何かについて説明し、この言語の重要な用語についても触れます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>
+    <p>基本的なコンピューターリテラシー、 <a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML概論</a>を学習のこと)。</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>CSS とは何かを学ぶ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a> では HTML について触れ、文書をどのようにマークアップするかを学びました。この文書はウェブブラウザーで読むことができます。見出しは普通のテキストより大きく見え、段落はあたらしい行に分けられ、それらの間には空白が入ります。リンクはほかのテキストと区別するために色付きで下線が引かれています。これらはブラウザーによるデフォルトのスタイリングです。ページの作者がスタイリングしていなくても読みやすくなるようにブラウザーが HTML に適用するとても基本的なスタイルです。</p>
+
+<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p>
+
+<p>しかし、ウェブサイトみんながこのような見た目では退屈でしょう。CSS をつかうとブラウザー内で HTML 要素をどう見せるかはっきりと制御できるようになり、マークアップを好きなように表現できます。</p>
+
+<h2 id="What_is_CSS_for" name="What_is_CSS_for">CSS の目的</h2>
+
+<p>前述のように、CSS は文書を（スタイルやレイアウトを）どのように表現するか指定する言語です。</p>
+
+<p><strong>文書</strong> は普通、マークアップ言語をつかって構造化されたテキストファイルです。{{Glossary("HTML")}} がもっとも一般的な マークアップ言語ですが、{{Glossary("SVG")}} や {{Glossary("XML")}}も出会うことがあります。</p>
+
+<p>文書を <strong>表現する</strong> とは、それを使いやすいフォームに変換することを意味します。{{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, あるいは {{Glossary("Microsoft Edge","Edge")}} といった{{Glossary("ブラウザー","ブラウザー")}} はコンピューター画面やプロジェクター、あるいはプリンタで印刷される文書が視覚的に表現されるよう設計されています。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: ブラウザーは時に{{Glossary("User agent","user agent ユーザーエージェント")}} と呼ばれますが、基本的に人に似せたコンピュータープログラムを意味します。CSS について語る時、ブラウザーは代表的なユーザーエージェントですが、それだけではありません。HTML と CSS 文書を印刷できる PDF に変換するようなユーザーエージェントもあります。</p>
+</div>
+
+<p>CSS は、例えば見出しやリンクの <a href="/ja/docs/Web/CSS/color_value">色</a> や <a href="/ja/docs/Web/CSS/font-size">フォントサイズ</a>の変更といったごく基本的なテキストのスタイリングでもつかえます。例えば、<a href="/ja/docs/Web/CSS/Layout_cookbook/Column_layouts">一列のテキストをレイアウトして</a>メインコンテンツ領域と関連情報のためのサイドバーに分けるといった、レイアウト作成に使うこともできます。<a href="/ja/docs/Web/CSS/CSS_Animations">アニメーション</a>のような効果も使えます。それぞれの例はこの段落のリンクをご覧ください。</p>
+
+<h2 id="CSS_syntax" name="CSS_syntax">CSS の構文</h2>
+
+<p>CSS はルールベースの言語です。ウェブページ上の特定の要素かグループに適用するスタイリングのルールを定義します。例えば、「ページ上の <code>&lt;h1&gt;</code> 要素の文字を大きく、赤くしたい」といったようにです。</p>
+
+<p>これを実現するコードはとても簡単な CSS ルールです:</p>
+
+<pre class="brush: css">h1 {
+    color: red;
+    font-size: 5em;
+}</pre>
+
+<p>ルールは {{Glossary("CSS Selector", "セレクタ")}} から始まります。ここにはこれからスタイリングしようとする HTML 要素を選びます。この例では {{htmlelement("h1")}} を選んでいます。</p>
+
+<p>つぎに波カッコ <code>{ }</code> を書き、この中に<strong>プロパティ</strong>と<strong>プロパティ値</strong> のペアで作られた <strong>宣言 </strong>を 1 つ以上置きます。それぞれのペアは選んだ要素のプロパティとそれに与えたいプロパティ値を特定します。</p>
+
+<p>コロン <code>:</code> の前にプロパティを書き、コロンの後にプロパティ値を書きます。CSS {{Glossary("property/CSS","プロパティ")}} は特定されたプロパティによって異なる許容値を持ちます。例えば、<code>color</code> プロパティは様々な <a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units#Color">color 値</a>を持っています。<code>font-size</code> プロパティもあります。このプロパティは値として様々な <a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">size 単位</a> を持っています。</p>
+
+<p>CSS スタイルシートはたくさんのルールを含みます。</p>
+
+<pre class="brush: css">h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}</pre>
+
+<p>ほかにどんな値があるか調べる必要があることに気づくでしょう。 MDN のプロパティのページをつかえば、忘れた時やほかにどんな値が使えるか知りたいときにすばやく調べられます。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>にすべての CSS プロパティのリストがあります。CSS の機能についてもっとたくさんの情報を見つける必要があるときには、検索エンジンで "mdn <em>css-feature-name</em>" と調べることに慣れても良いでしょう。 例えば、"mdn color" や "mdn font-size" を試してみてください!</p>
+</div>
+
+<h2 id="CSS_Modules" name="CSS_Modules">CSS モジュール</h2>
+
+<p>CSSを使ってスタイリングできることがたくさんあるので、CSS は <strong>モジュール</strong> にまとめられています。 MDN を探せばこれらモジュールのリファレンスが見つかるでしょうし、多くのページは特定のモジュールで編集されていることがわかります。例えば、その目的やプロパティと機能の違いを見つけるために<a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders">背景と境界</a> モジュールを見ることができます。（後述で） CSS 技術を定義する仕様へのリンクもあります。</p>
+
+<p>CSS がどのように作られているか、ここではあまり心配する必要はありませんが、もし例えば、特定のプロパティが似たものの中で見つかる可能性があることを知っていれば、情報は見つけやすくなります。</p>
+
+<p>たとえば、背景と境界モジュールに戻ってみましょう。<code><a href="/ja/docs/Web/CSS/background-color">background-color</a></code> と <code><a href="/ja/docs/Web/CSS/border-color">border-color</a></code> プロパティがこのモジュール内で定義されているのは理にかなっていると思うかもしれませんし、実際そうなっています。</p>
+
+<h3 id="CSS_Specifications" name="CSS_Specifications">CSS の仕様</h3>
+
+<p>(HTML, CSS, JavaScript といった) ウェブの標準技術はすべて、仕様 (または単に 「スペック」)とよばれる文書で定義されており、({{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, or {{glossary("Khronos")}} といった) 標準化組織によって発行され、技術がどう働くか定義しています。</p>
+
+<p>CSS は W3C 内の <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a> と呼ばれるグループにより開発されました。このグループは、CSS に関心のあるブラウザーベンダーやその他の企業の代表者で構成されています。またメンバー組織とつながらず、独立した声として行動する <em>invited experts</em> もいます。 </p>
+
+<p>新しい CSS の機能は、CSS ワーキンググループにより開発され、仕様化されています。 特定のブラウザーが実験的に機能を実装させることもありますし、ウェブデザイナーやデベロッパーが要望することもありますし、ワーキンググループ自体が要件を固めることもあります。CSS は絶えず開発されており、新しい機能が利用可能になります。しかし重要なのは、古いウェブサイトが決して壊れてしまわないように、全員が努力していることです。2000年に作られたウェブサイトは限られた CSS 機能しか使えませんが、最新のブラウザーでも見えるようになっているべきなのです。</p>
+
+<p>CSS の初心者としては、CSS仕様が圧倒的であることに気付くでしょう。これらは、ウェブ開発者が CSS を理解するために読むのではなく、エンジニアがユーザーエージェント機能のサポートを実装するために使用するのを想定しています。経験豊富な開発者の多くは、MDN ドキュメントや他のチュートリアルを参照します。ただし、それらが存在することを知り、使っている CSS やブラウザーによるサポート（以下を参照）、および仕様間の関係を理解することは価値があります。</p>
+
+<h2 id="Browser_support" name="Browser_support">ブラウザーサポート</h2>
+
+<p>一度CSS が指定されると、1 つ以上のブラウザーが CSS を実装している場合にのみウェブページの開発に役立ちます。これはコードが CSS ファイルの命令を画面に表示できるように記述されることを意味します。これは <a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS がどう働くか</a>のレッスンで見ることになるでしょう。すべてのブラウザーで同時にある機能が実装されることは通常はありませんし、それゆえ通常、一部のブラウザーでは CSS の一部を使用でき、他のブラウザーでは使用できないというギャップがあります。こういったわけで、どういった機能が実装されているか確認できることは有益です。MDN のそれぞれのページでは、関心のあるプロパティの状態が確認できるので、ウェブサイト上でそれが使えるか見極めることができます。</p>
+
+<p>以下は CSS の <code><a href="/ja/docs/Web/CSS/font-family">font-family</a></code> プロパティについての互換データです。</p>
+
+<p>{{Compat("css.properties.font-family")}}</p>
+
+<h2 id="Whats_next" name="What's_next">次のステップ</h2>
+
+<p>CSS とは何かについていくらか理解したと思いますので、<a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a> に進みましょう。ここでは自分で CSS を書き始められます。</p>
+
+<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内</h2>
+
+<ol>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></li>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></li>
+</ol>
diff --git a/files/ja/learn/css/howto/create_fancy_boxes/index.html b/files/ja/learn/css/howto/create_fancy_boxes/index.html
new file mode 100644
index 0000000000..74d0b3b379
--- /dev/null
+++ b/files/ja/learn/css/howto/create_fancy_boxes/index.html
@@ -0,0 +1,305 @@
+---
+title: 装飾的なボックスの作成
+slug: Learn/CSS/Howto/create_fancy_boxes
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Learn
+translation_of: Learn/CSS/Howto/create_fancy_boxes
+---
+<p class="summary">CSS ボックスは、CSS で装飾されたウェブページの構成要素です。 見栄えを良くすることは、楽しさとやりがいの両方です。 デザインのアイデアを実用的なコードに変えることがすべてだからです。 面倒な制約と CSS の使用における狂気の自由のために、それは挑戦的です。 いくつかの装飾的なボックスをやりましょう。</p>
+
+<p>実用的な側面に取り掛かる前に、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model">CSS ボックスモデル</a>に慣れていることを確認してください。 いくつかの <a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウトの基本</a>を熟知していることも賢明ですが、前提条件ではありません。</p>
+
+<p>技術面では、装飾的なボックスの作成は、CSS の境界線と背景のプロパティの習得と、それらを特定のボックスに適用する方法についてのものです。 しかし、テクニックを超えてそれはまたあなたの創造性を解き放つことに関するすべてです。 それは1日で終わらないでしょうし、何人かのウェブ開発者はそれを楽しんで一生を過ごします。</p>
+
+<p>私たちは多くの例を見ようとしていますが、可能な限り最も単純な HTML の部分、次の単純な要素に取り組むつもりです。</p>
+
+<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>
+
+<p>はい、それは HTML のごく一部ですが、その要素について何を調整できるのでしょうか？ 次のすべてです。</p>
+
+<ul>
+ <li>そのボックスモデルのプロパティ: {{cssxref("width")}}、{{cssxref("height")}}、{{cssxref("padding")}}、{{cssxref("border")}} など</li>
+ <li>その背景のプロパティ: {{cssxref("background")}}、{{cssxref("background-color")}}、{{cssxref("background-image")}}、{{cssxref("background-position")}}、{{cssxref("background-size")}} など</li>
+ <li>その擬似要素: {{cssxref("::before")}} および {{cssxref("::after")}}</li>
+ <li>そして、いくつかの脇のプロパティ: {{cssxref("box-shadow")}}、{{cssxref("transform")}}、{{cssxref("outline")}} など</li>
+</ul>
+
+<p>とても広い遊び場があります。 楽しく始めましょう。</p>
+
+<h2 id="Box_model_tweak" name="Box_model_tweak">ボックスモデルの調整</h2>
+
+<p>ボックスモデルだけで、単純な境界線の追加、四角形の作成など、基本的なことを行うことができます。 負の <code>padding</code> や負の <code>margin</code>、あるいはその両方を使用して、<code>border-radius</code> をボックスの実際のサイズよりも大きくすることによって、プロパティを限界にプッシュすると、面白くなり始めます。</p>
+
+<h3 id="Making_circles" name="Making_circles">円を作る</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>
+</div>
+
+<p>これはとてもシンプルでとても楽しいものです。 {{cssxref("border-radius")}} プロパティは、ボックスに適用される丸い角を作成するように作られていますが、半径のサイズがボックスの実際の幅と等しいかそれより大きい場合はどうなるでしょうか？</p>
+
+<pre class="brush: css">.fancy {
+  /* 円の中では、中央揃えのテキストは見栄えがよくなります。 */
+  text-align : center;
+
+  /* テキストが境界線に触れないようにしましょう。
+     テキストはまだ四角形の中を流れているので、
+     そのようにするときれいに見えて、
+     それが「本当の」円であるという感覚を与えます。 */
+  padding : 2em;
+
+  /* 境界線は円に見えるようになります。
+     背景は境界線の半径で切り取られるので、
+     背景を使用することもできます。 */
+  border : 0.5em solid black;
+
+  /* 正方形であることを確認しましょう。
+     正方形でない場合は、円ではなく楕円です。 ;) */
+  width  : 5em;
+  height : 5em;
+
+  /* そして正方形を円に変えましょう。 */
+  border-radius: 100%;
+}</pre>
+
+<p>はい、円ができます。</p>
+
+<p>{{ EmbedLiveSample('Making_circles', '100%', '170') }}</p>
+
+<h2 id="Backgrounds" name="Backgrounds">Backgrounds</h2>
+
+<p>装飾的なボックスについて話すとき、それを扱うためのコアとなるプロパティは <a href="/ja/docs/Web/CSS/CSS_Background_and_Borders">background-* プロパティ</a>です。 背景をいじり始めると、CSS ボックスはあなたが満たすための空白のキャンバスになります。</p>
+
+<p>いくつかの実用的な例に進む前に、背景について知っておくべきことが2つあるので、少し後退しましょう。</p>
+
+<ul>
+ <li>一つのボックスに<a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a>を設定することが可能です。 それらは層のように互いの上に積み重ねられています。</li>
+ <li>背景は単色や画像のどちらでもかまいません。 単色は常に表面全体を塗りつぶしますが、画像は拡大縮小して配置することができます。</li>
+</ul>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>
+</div>
+
+<p>さて、背景を楽しんでみましょう。</p>
+
+<pre class="brush: css">.fancy {
+  padding : 1em;
+  width: 100%;
+  height: 200px;
+  box-sizing: border-box;
+
+  /* 背景の積み重ねの一番下を、
+     霧のかかった灰色の単色にしましょう。 */
+  background-color: #E4E4D9;
+
+  /* カラーストリップエフェクトを作成するために、
+     線形グラデーションを重ね合わせます。
+     お気づきのとおり、
+     色のグラデーションは画像と見なされ、
+     そのように操作することができます。 */
+  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
+}</pre>
+
+<p>{{ EmbedLiveSample('Backgrounds', '100%', '200') }}</p>
+
+<div class="note">
+<p>グラデーションは、非常に独創的な方法で使用できます。 あなたがクレイジーな例を見たいのなら、<a href="http://lea.verou.me/css3patterns/">Lea Verou の CSS パターン</a>（英語）を見てください。 こういったグラデーションの使用はかなり高くつきますが、パフォーマンス的に優れていることを忘れないでください。 グラデーションについてもっと知りたい場合は、気軽に<a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">専用記事</a>にアクセスしてください。</p>
+</div>
+
+<h2 id="Pseudo_elements" name="Pseudo_elements">疑似要素</h2>
+
+<p>1つのボックスを装飾するときに、自分自身が制限されていることに気付き、さらに素晴らしい装飾を作成するためにもっとボックスを追加したいと思うかもしれません。 ほとんどの場合、これは独自の装飾の目的で HTML 要素を追加することによって DOM を汚染することにつながります。 たとえそれが必要であっても、それはやや悪い習慣と考えられています。 そのような落とし穴を回避するための1つの解決策は、<a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 疑似要素</a>を使用することです。</p>
+
+<h3 id="A_cloud" name="A_cloud">雲</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>
+</div>
+
+<p>ボックスを雲に変える例を見てみましょう。</p>
+
+<pre class="brush: css">.fancy {
+  text-align: center;
+
+  /* 以前に円を作るために使用したのと同じトリックです。 */
+  box-sizing: border-box;
+  width     : 150px;
+  height    : 150px;
+  padding   : 80px 1em 0 1em;
+
+  /* 雲の「耳」のための場所を空けます。 */
+  margin    : 0 100px;
+
+  position: relative;
+
+  background-color: #A4C9CF;
+
+  /* それで、私たちは雲の底を平らにしたいので、
+     実際に一周していません。
+     この例を気軽に微調整して、
+     底が平らでない雲にしてください。 ;) */
+  border-radius: 100% 100% 0 0;
+}
+
+/* これらは、::before 疑似要素と ::after 疑似要素
+   の両方に適用される共通のスタイルです。 */
+.fancy::before,
+.fancy::after {
+  /* これは、たとえ値が空の文字列であっても、
+     疑似要素の表示を許可するために必要です。 */
+  content: '';
+
+  /* 擬似要素をボックスの左右に配置しますが、
+     常に一番下に配置します。 */
+  position: absolute;
+  bottom  : 0;
+
+  /* これにより、疑似要素は、何が起こっても
+     ボックスのコンテンツの下になります。 */
+  z-index : -1;
+
+  background-color: #A4C9CF;
+  border-radius: 100%;
+}
+
+.fancy::before {
+  /* これは雲の左耳の大きさです。 */
+  width  : 125px;
+  height : 125px;
+
+  /* 少し左に動かします。 */
+  left    : -80px;
+
+  /* 雲の底が平らに保たれるようにするには、
+     左耳の正方形の右下角を作る必要があります。 */
+  border-bottom-right-radius: 0;
+}
+
+.fancy::after {
+  /* これは右耳の雲の大きさです。 */
+  width  : 100px;
+  height : 100px;
+
+  /* 少し右に動かします。 */
+  right   : -60px;
+
+  /* 雲の底が平らに保たれるようにするには、
+     右耳の正方形の左下角を作る必要があります。 */
+  border-bottom-left-radius: 0;
+}</pre>
+
+<p>{{ EmbedLiveSample('A_cloud', '100%', '160') }}</p>
+
+<h3 id="Blockquote" name="Blockquote">ブロッククォート</h3>
+
+<p>擬似要素を使用するより実用的な例は、HTML の {{HTMLElement('blockquote')}} 要素のための素晴らしいフォーマットを構築することです。 それでは、少し異なる HTML スニペットを使った例を見てみましょう（デザインのローカライゼーションもどのように処理するかを見る機会を提供してくれます）。</p>
+
+<pre class="brush: html">&lt;blockquote&gt;People who think they know everything are a great annoyance to those of us who do. &lt;i&gt;Isaac Asimov&lt;/i&gt;&lt;/blockquote&gt;
+&lt;blockquote lang="fr"&gt;L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. &lt;i&gt;Pierre Desproges&lt;/i&gt;&lt;/blockquote&gt;</pre>
+
+<p>それで、これが装飾です。</p>
+
+<pre class="brush: css">blockquote {
+  min-height: 5em;
+  padding   : 1em 4em;
+  font      : 1em/150% sans-serif;
+  position  : relative;
+  background-color: lightgoldenrodyellow;
+}
+
+blockquote::before,
+blockquote::after {
+  position: absolute;
+  height  : 3rem;
+  font    : 6rem/100% Georgia, "Times New Roman", Times, serif;
+}
+
+blockquote::before {
+  content: '“';
+  top    : 0.3rem;
+  left   : 0.9rem;
+}
+
+blockquote::after {
+  content: '”';
+  bottom : 0.3rem;
+  right  : 0.8rem;
+}
+
+blockquote:lang(fr)::before {
+  content: '«';
+  top    : -1.5rem;
+  left   : 0.5rem;
+}
+
+blockquote:lang(fr)::after {
+  content: '»';
+  bottom : 2.6rem;
+  right  : 0.5rem
+}
+
+blockquote i {
+  display   : block;
+  font-size : 0.8em;
+  margin-top: 1rem;
+  text-style: italic;
+  text-align: right;
+}</pre>
+
+<p>{{ EmbedLiveSample('Blockquote', '100%', '300') }}</p>
+
+<h2 id="All_together_and_more" name="All_together_and_more">すべて一緒に、他</h2>
+
+<p>ですから、これらすべてを混ぜ合わせると素晴らしいエフェクトを生み出すことができます。 ある時点で、そのようなボックス装飾を達成することは、CSS プロパティの設計と技術的使用の両方において、創造性の問題です。 このようにすることで、この例のようにボックスを生き生きとさせることができる錯視を作成することが可能です。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>
+</div>
+
+<p>部分的なドロップシャドウ・エフェクトを作りましょう。 {{cssxref("box-shadow")}} プロパティを使用すると、内部光と平らなドロップシャドウ・エフェクトを作成できますが、ちょっとした追加作業で、擬似要素と {{cssxref("transform")}} プロパティを使用してより自然なジオメトリを作成することが可能になります。</p>
+
+<pre class="brush: css">.fancy {
+  position: relative;
+  background-color: #FFC;
+  padding: 2rem;
+  text-align: center;
+  max-width: 200px;
+}
+
+.fancy::before {
+  content: "";
+
+  position : absolute;
+  z-index  : -1;
+  bottom   : 15px;
+  right    : 5px;
+  width    : 50%;
+  top      : 80%;
+  max-width: 200px;
+
+  box-shadow: 0px 13px 10px black;
+  transform: rotate(4deg);
+}</pre>
+
+<p>{{ EmbedLiveSample('All_together_and_more', '100%', '100') }}</p>
+
+<h2 id="What's_next" name="What's_next">次は何ですか？</h2>
+
+<p>多くの点で、装飾的なボックスを作ることは主に背景の中に色と画像を追加することなので、<a href="/ja/docs/Learn/CSS/Howto/manage_colors_and_images">色と画像の管理</a>を掘り下げる価値があるかもしれません。 また、装飾的なボックス自体がより大きなレイアウトの一部でなければ、それ自体はまったく役に立ちません。 まだチェックしていないのであれば、<a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">レイアウトの基本</a>を見てください。</p>
+
+<div class="grammarly-disable-indicator"> </div>
diff --git a/files/ja/learn/css/howto/generated_content/index.html b/files/ja/learn/css/howto/generated_content/index.html
new file mode 100644
index 0000000000..add931f8d9
--- /dev/null
+++ b/files/ja/learn/css/howto/generated_content/index.html
@@ -0,0 +1,88 @@
+---
+title: Content
+slug: Learn/CSS/Howto/Generated_content
+tags:
+  - CSS
+  - 'CSS:Getting_Started'
+  - Getting_Started
+translation_of: Learn/CSS/Howto/Generated_content
+---
+<div>{{CSSTutorialTOC}}</div>
+
+<div>{{previousPage("/ja/docs/CSS/Getting_Started/Color", "Color")}} これは<span class="seoSummary"> <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a>チュートリアルの第9章です; 文書が表示されたとき CSS を使ってコンテンツを追加するいくつかの方法について述べます。スタイルシートを編集して、テキストや画像を追加できます。</span></div>
+
+<h2 class="clearLeft" id="Information.3A_Content" name="Information.3A_Content">コンテンツについて</h2>
+
+<p>CSS の重要な利点のひとつが、文書の体裁（style）と内容（コンテンツ）を切り離しやすくすることです。それでも、あるコンテンツを文書ではなく、スタイルシートに含めたほうがわかりやすいことがあります。</p>
+
+<p>スタイルシートではテキストや画像から成るコンテンツを記述できます。コンテンツと文書の構造に強い関連があるとき、コンテンツをスタイルシート内に記述します。</p>
+
+<div class="tuto_details">
+<div class="tuto_type">さらに詳しく</div>
+
+<p>スタイルシートでコンテンツを記述すると、面倒な話が生まれる可能性があります。例えば、文書の複数の言語版をスタイルシートを共有して作ることがあるかもしれません。これは、スタイルシートの部分的に訳すときには、その一部を別々のファイルにわけるとともに、適切な言語版の文書とリンクされるよう編集しなければならない、ということです。</p>
+
+<p>この混乱は、コンテンツがすべての言語や文化で利用できる記号や画像で記述されていれば発生しません。</p>
+
+<p>スタイルシート内に記述されたコンテンツは、DOMの一部にはなりません。</p>
+</div>
+
+<h3 id="Text_content" name="Text_content">テキストコンテンツ</h3>
+
+<p>CSS で要素の前または後ろにテキストコンテンツを挿入できます。このためには、ルールを作って {{cssxref(":before")}} または {{cssxref(":after")}} をそのセレクタに追加します。宣言部分には、specify the {{cssxref("content")}} プロパティと、その値としてテキストコンテンツを記述します。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html">A text where I need to <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ref<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>something<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.ref</span><span class="pseudo-element token">::before</span></span> <span class="punctuation token">{</span>
+  <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> navy<span class="punctuation token">;</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">"Reference "</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="結果">結果</h4>
+
+<p>{{ EmbedLiveSample('Text_content', 600, 30) }}<span id="cke_1_bottom"><span id="cke_1_path"><a id="cke_elementspath_7_0" title="h3 要素">h3</a></span></span></p>
+</div>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">さらに詳しく</div>
+
+<p>スタイルシートの文字セットのデフォルトは UTF-8 ですが、リンク、スタイルシート自身の内部、もしくはその他の方法で指定できます。CSS Specification の <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> をご覧ください。</p>
+
+<p>文字を、バックスペースによるエスケープ機構を使って記述することもできます。例えば、\265B はチェスの黒クイーンの記号 ♛ です。詳しくは、<a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a> と CSS Specification の <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> をご覧ください。</p>
+</div>
+
+<h3 id="Image_content" name="Image_content">画像コンテンツ</h3>
+
+<p>要素の前や後ろに画像を追加するには、{{cssxref("content")}} プロパティの値として画像ファイルの URL を記述します。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例</div>
+
+<p>このルールは <code>glossary</code> を持つすべてのリンクの後ろに、空白文字とアイコンを追加します:</p>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>developer.mozilla.org<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>glossary<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>developer.mozilla.org<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">a<span class="class token">.glossary</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+   <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">" "</span> <span class="token url">url("https://mdn.mozillademos.org/files/16322/glossary-icon.gif")</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="結果_2">結果</h3>
+
+<p>{{ EmbedLiveSample('Image_content', 600, 40) }}</p>
+</div>
+
+<p>次は何?</p>
+
+<div>{{nextPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} スタイルシートでコンテンツを追加し、リストの項目に印をつけることがよくあります。次の章では <a href="/ja/docs/CSS/Getting_Started/Lists" title="CSS/Getting_Started/Lists">リスト要素のスタイル記述</a> について述べます。</div>
diff --git a/files/ja/learn/css/howto/index.html b/files/ja/learn/css/howto/index.html
new file mode 100644
index 0000000000..2ecbac3e25
--- /dev/null
+++ b/files/ja/learn/css/howto/index.html
@@ -0,0 +1,90 @@
+---
+title: CSS を使ってよくある問題を解決する
+slug: Learn/CSS/Howto
+tags:
+  - Beginner
+  - CSS
+  - Learn
+translation_of: Learn/CSS/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">以下のリンクは CSS で解決できるよくある問題の解決法です。</p>
+
+<h2 id="Common_use_cases" name="Common_use_cases">よくある使用例</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basics" name="Basics">基本</h3>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works#Applying_CSS_to_the_DOM">CSS を HTML に適用する</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Syntax#White_space">CSS で空白を使用する</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Syntax#Comments">CSS でコメントを使用する</a></li>
+ <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Selectors#Type_class_and_ID_selectors">要素名、クラスまたは ID で要素を選択する方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">属性名と内容から要素を選択する方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes_and_pseudo-elements">擬似クラスの使い方</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes_and_pseudo-elements">擬似要素の使い方</a></li>
+ <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Selectors#Selector_lists">複数のセレクタに同じルールを適用する方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS で色を指定する方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">ブラウザーで CSS をデバッグする方法</a></li>
+</ul>
+
+<h3 id="CSS_and_text" name="CSS_and_text">CSS とテキスト</h3>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">テキストを装飾する方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リスト要素をカスタマイズする方法</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_text/Styling_links">リンクを装飾する方法</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">テキストに影を追加する方法</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Boxes_and_layouts" name="Boxes_and_layouts">ボックスとレイアウト</h3>
+
+<ul>
+ <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">How to control overflowing content</a></li>
+ <li><a href="/ja/docs/Web/CSS/background-clip">How to control the part of a CSS box that the background is drawn under</a></li>
+ <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/ja/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li>
+ <li><a href="/ja/docs/Web/CSS/background-clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li>
+ <li><a href="/ja/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li>
+ <li><a href="/ja/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_and_advanced_techniques" name="Uncommon_and_advanced_techniques">まれで高度なテクニック</h2>
+
+<p>CSS ではとても高度なデザインテクニックも利用できます。これらの記事は、複雑な使用例を解き明かします。</p>
+
+<h3 id="General" name="General">一般的</h3>
+
+<ul>
+ <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li>
+ <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li>
+</ul>
+
+<h3 id="Advanced_effects" name="Advanced_effects">高度なエフェクト</h3>
+
+<ul>
+ <li><a href="/ja/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">CSS でフィルターを使用する方法</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">CSS でブレンドモードを使用する方法</a></li>
+</ul>
+
+<h3 id="Layout" name="Layout">レイアウト</h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
+ <li><a href="/ja/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/ja/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
+ <li><a href="/ja/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<p><a href="/ja/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — さまざまなトピック: デバッグからセレクタの使い方まで。</p>
diff --git a/files/ja/learn/css/index.html b/files/ja/learn/css/index.html
new file mode 100644
index 0000000000..58897d3289
--- /dev/null
+++ b/files/ja/learn/css/index.html
@@ -0,0 +1,68 @@
+---
+title: CSS
+slug: Learn/CSS
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Debugging
+  - Landing
+  - NeedsContent
+  - Topic
+  - length
+  - specificity
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Cascading Style Sheets — {{glossary("CSS")}} — は{{glossary("HTML")}} を学んだら、まず次に勉強すべき技術です。 HTML はコンテンツの構造と{{glossary("Semantics","意味論")}}を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。 例えばフォント、色、サイズ、余白を変更したり、コンテンツを複数の列に分割して段組を作成したり、アニメーションやその他の装飾機能を追加するのに CSS は利用できます。</p>
+
+<h2 id="Learning_pathway" name="Learning_pathway">学習の道のり</h2>
+
+<p>CSS に挑戦する前に HTML の基礎を学習しておくべきです。 まず、<a href="/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a> に取り組むことを推奨します — その後に、以下のことについて学んでください:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps">CSS 入門</a> から始まる CSS モジュール</li>
+ <li>より高度な <a href="/Learn/HTML#Modules">HTML モジュール</a></li>
+ <li><a href="/docs/Learn/JavaScript">JavaScript</a> と、動的な機能をウェブページに追加する方法</li>
+</ul>
+
+<p>HTML の基本のキが理解できたら、HTML と CSS の 2 つのトピックスを行き来しながらふたつを同時に学習することを推奨します。 なぜなら、CSS を理解すると HTMLを勉強するのが更に興味深くまたもっと楽しくなり、またHTML を知ることなくして CSS を学習することはできないからです。</p>
+
+<p>またこのトピックを開始する前に、コンピューターの基本的な使い方と、ウェブを受動的に使用すること (つまり、ウェブコンテンツを消費すること) に慣れている必要があります。 <a href="/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a> に詳しく書かれているような基本的な環境を持っており、 <a href="/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a> に詳しく書かれているようなファイルの作成・管理方法を理解している必要があります — なおこれらについては初心者向けの記事集である<a href="/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>のなかに入っています。</p>
+
+<p>このトピックに取り組む前に <a href="/docs/Learn/Getting_started_with_the_web">ウェブ入門</a> を読むと良いでしょう。 ただ、このウェブ入門のなかの<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a>の記事で紹介されていることの多くは、<a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a> でもカバーされているのでこれは必須ではありません。</p>
+
+<h2 id="Modules" name="Modules">モジュール</h2>
+
+<p>このトピックは、以下のモジュールで構成されており、取り組むべき順に記載していますので、上から始めていくとよいでしょう。</p>
+
+<dl>
+ <dt></dt>
+ <dt><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a></dt>
+ <dd>CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、 あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは、CSSのはたらきからCSSの構文、そしてそれを使ってHTMLをどうデザインしていくのかといったCSSをマスターするための入門編を丁寧に解説します。</dd>
+ <dt></dt>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a></dt>
+ <dd>
+ <p>このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>から派生しています。CSSにちょっと慣れて簡単な経験も積んだところで、それをもう少し掘り下げてみましょう。カスケードと継承・セレクター・単位・サイズ設定・背景と枠線についてやデバックの方法などを見ていきます。</p>
+
+ <p>ここでの目的は、<a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>や <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。</p>
+ </dd>
+ <dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a></dt>
+ <dd>CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で最もよく使うことの一つです。 ここでは、フォント、太字、イタリック、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a></dt>
+ <dd>ここまでで既に CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートを基準にしてボックスを適切な場所に配置する方法、および互いの配置方法を検討します。 必要な前提知識はカバーされているので、奥深いCSSレイアウトの世界に飛び込むことができます。さまざまな <code>display</code> の設定、flexboxのようなモダンなやり方から、CSS grid、positioning、そしてまだまだ知っておきたいと思うかもしれないレガシーなテクニックまでを概観していきます。</dd>
+</dl>
+
+<h2 id="Solving_common_CSS_problems" name="Solving_common_CSS_problems">CSS でよくある問題を解決するには</h2>
+
+<p><a href="/ja/docs/Learn/CSS/Howto">CSS を使ってよくある問題を解決する</a> には、ウェブページを作成する際よく発生する問題を CSS を使って解決する方法へのリンクがまとめられています。</p>
+
+<p>最初から、HTML 要素とその背景に色を付けたり、要素の大きさや形や位置を変えたり、要素のボーダー（境界線）を定義することがもっとも多かったでしょう。 しかし CSS の基本をしっかり理解していれば、できないことはそれほど多くありません。 CSS学習のなかで最も嬉しいことの1つは、一度基礎を理解してしまうと、やり方が実はまだよくわかっていなくても、できることとできないことに対して大抵はかなり良い感触が得られることです！</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS">MDN での CSS</a></dt>
+ <dd>MDN での CSS ドキュメントの主な出発点です。 CSS 言語のすべての機能を詳しく説明したリファレンスドキュメントがあります。 プロパティがとりうるすべての値を知りたいですか？ ここは良い場所です。</dd>
+</dl>
diff --git a/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html b/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html
new file mode 100644
index 0000000000..c8012c9a8a
--- /dev/null
+++ b/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html
@@ -0,0 +1,133 @@
+---
+title: 基本的な CSS の理解
+slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension
+tags:
+  - Assessment
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Syntax
+  - コメント
+  - スタイル
+  - セレクタ
+  - ボックスモデル
+  - ルール
+translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div>
+
+<p class="summary">このモジュールで多くをカバーしてきました、最後まで来て気分が良いでしょう！ 次に進む前の最後のステップは、モジュールの評価を試みることです。これには、最終的なデザイン (名刺/ゲーマーカード/ソーシャルメディアプロファイル) を作成するために完了しなければならないいくつかの関連演習が含まれます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>この評価を実施する前に、すでにこのモジュールのすべての記事を通して作業しているはずです。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>基本的な CSS 理論、構文、およびメカニズムの理解をテストする。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="出発点">出発点</h2>
+
+<p>この評価を開始するには、次のことが必要です。</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">練習用の HTML ファイル</a>とそれに<a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">関連付けられた画像ファイル</a>を探して、ローカルコンピュータの新しいディレクトリに保存します。自身の画像ファイルを使い、自身の名前を記入したいのなら、それも大歓迎です — ちょうど画像が正方形であることを確認してください。</li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">CSS リソースのテキストファイル</a>を入手してください。これには、評価の一部に答えるために検討して組み合わせる必要がある一連の未加工のセレクタとルールセットが含まれています。</li>
+</ul>
+
+<div class="note">
+<p><strong>メモ</strong>: 代わりとして、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> のようなサイトを使って評価することもできます。HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力し、この URL を使用して <code>&lt;img&gt;</code> 要素を画像ファイルに向けることができます。使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <code>&lt;style&gt;</code> 要素に自由に配置してください。</p>
+</div>
+
+<h2 id="プロジェクト概要">プロジェクト概要</h2>
+
+<p>生の HTML と画像が提供されているので、これにスタイルを設定するのに必要な CSS を気の利いた小さなオンライン名刺に書く必要があります。これは、おそらくゲーマーカードやソーシャルメディアのプロファイルを兼ねるでしょう。次のセクションではする必要があることについて説明します。</p>
+
+<p>基本設定:</p>
+
+<ul>
+ <li>まず最初に、HTML と画像ファイルと同じディレクトリに新しいファイルを作成してください。それを <code>style.css</code> のような本当に想像力豊かなものと呼びます。</li>
+ <li><code>&lt;link&gt;</code> 要素を介して CSS を HTML ファイルにリンクします。</li>
+ <li>CSS リソースファイルの最初の2つのルールセットは無料です。幸運を祈って楽しんだら、コピーして新しい CSS ファイルの先頭に貼り付けます。これらをテストとして使用して、CSS が HTML に正しく適用されていることを確認してください。</li>
+ <li>2つの規則の上に、CSSコメントをその中にテキストを追加して、これがページ全体の一般的なスタイルのセットであることを示します。「一般的なページスタイル」でも構いません。また、CSS ファイルの下部にさらに3つのコメントを追加して、カードコンテナの設定に固有のスタイル、ヘッダーとフッターに固有のスタイル、およびメインの名刺の内容に固有のスタイルを示します。 今後、スタイルシートに追加された後続のスタイルは適切な場所に編成される必要があります。</li>
+</ul>
+
+<p>CSS リソースファイルで提供されているセレクタとルールセットに注意してください。</p>
+
+<ul>
+ <li>次に、4つのセレクタを見て、それぞれの詳細度を計算してください。CSS の上部にあるコメントなど、後で見つけられる場所にこれらを書き留めてください。</li>
+ <li>では、正しいセレクタを正しいルールセットに配置しましょう。CSS リソースには、4組のセレクタとルールセットがあります。今すぐこれを行い、それらを CSS ファイルに追加してください。必要があるのは：
+  <ul>
+   <li>メインカードコンテナの幅と高さ、背景色、ボーダー、ボーダー半径 (角丸) などを固定します。</li>
+   <li>ヘッダーに、濃い色から明るい色への背景グラデーションと、メインカードコンテナに設定された丸みのある角に合う丸みのある角を付けます。</li>
+   <li>フッターには、明るいものから暗いものまでの背景のグラデーションと、メインカードコンテナに設定された丸みのある角に合う丸みのある角を付けます。</li>
+   <li>画像をメインの名刺の内容の右側に貼り付け、最大の高さを100％にします (どの高さになるかにかかわらず、親コンテナと同じ高さを維持するために拡大/縮小することを保証する巧妙なトリック) 。</li>
+  </ul>
+ </li>
+ <li>注意してください。提供されているルールセットには2つのエラーがあります。知っている任意のテクニックを使用して、これらを見つけ出して進む前に修正してください。</li>
+</ul>
+
+<p>書く必要がある新しいルールセット：</p>
+
+<ul>
+ <li>カードヘッダーとカードフッターの両方を対象としたルールセットを作成し、計算された合計の高さは50ピクセル (コンテンツの高さ30ピクセル、パディングは全側面で10ピクセル) を両方に指定します。</li>
+ <li>ブラウザが <code>&lt;h2&gt;</code> 要素と <code>&lt;p&gt;</code> 要素に適用するデフォルトのマージンは、私たちのデザインを妨げるので、これらすべての要素をターゲットにしてそれらのマージンを 0 に設定するルールを書きましょう。</li>
+ <li>画像がメインの名刺の内容 (<code>&lt;article&gt;</code> 要素) からはみ出ないようにするには、特定の高さを指定する必要があります。<code>&lt;article&gt;</code> の高さを 120 px に設定します。ただし、<code>em</code>s で表します。また、背景色を半透明の黒にすると、やや濃い色になり、背景の赤い色も少し明るくなります。</li>
+ <li><code>&lt;h2&gt;</code> に 20 px の有効フォントサイズ (ただし <code>em</code>s で表示) とそれをヘッダーのコンテンツボックスの中央に配置するための適切な行の高さを指定するルールセットを作成します。やる前にコンテンツボックスの高さは 30 px でなければならないことを思い出してください — これで行の高さを計算するのに必要なすべての数が揃います。</li>
+ <li>フッターの内側の <code>&lt;p&gt;</code> を 15 px の有効フォントサイズ (ただし <code>em</code>s で表示) とフッターのコンテンツボックスの中央に配置するための適切な行の高さを指定するルールセットを作成します。やる前にコンテンツボックスの高さは 30 px でなければならないことを思い出してください — これで行の高さを計算するのに必要なすべての数が揃います。</li>
+ <li>最後のちょっとしたタッチとして、<code>&lt;article&gt;</code> の内側の段落に適切なパディング値を指定して、その左端が <code>&lt;h2&gt;</code> とフッターの段落に揃うようにし、読みやすくなるように色をかなり明るい色に設定します。</li>
+</ul>
+
+<div class="note">
+<p><strong>メモ</strong>: 2番目のルールセットは <code>&lt;html&gt;</code> 要素に <code>font-size: 10px;</code> を設定することに注意してください。これは <code>&lt;html&gt;</code> のすべての子孫について、em はデフォルトの16 px ではなく10 px になることを意味します (これはもちろん、階層内で問題の子孫と <code>&lt;html&gt;</code> の間に別の <code>font-size</code> が設定されている先祖がいない場合に限ります。これは必要な値に影響を与える可能性がありますが、この単純な例では問題にはなりません)。</p>
+</div>
+
+<p>その他の考慮事項</p>
+
+<ul>
+ <li>読みやすくするために CSS を作成すると、各行に個別の宣言を使用してボーナスマークが付けられます。</li>
+ <li>他のコンテンツを大量に含む名刺をページに配置する場合にこれらのルールが他の要素のスタイル設定を妨げないように、すべてのルールのセレクタチェーンの先頭に <code>.card</code> を含める必要があります。</li>
+</ul>
+
+<h2 id="ヒントとコツ">ヒントとコツ</h2>
+
+<ul>
+ <li>CSS を HTML に適用する以外は、HTML を編集する必要はありません。</li>
+ <li>特定のピクセル長を表現するために必要な <code>em</code> 値を計算する際には、ルート (<code>&lt;html&gt;</code>) 要素の基本フォントサイズと、必要な値を得るために乗算する必要があるサイズについて考えてください。少なくともこのような単純なケースでは、em の価値があるでしょう。</li>
+</ul>
+
+<h2 id="例">例</h2>
+
+<p>次のスクリーンショットは、完成したデザインの外観の例を示しています。</p>
+
+<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="評価">評価</h2>
+
+<p>組織的な研修の一部としてこの評価に従っているなら、あなたは採点のためにあなたの教師/メンターに作業結果を提出できるはずです。もし自己学習しているのであれば、<a href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682">この練習問題についてのディスカッションスレッド</a>、または <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、非常に簡単に採点ガイドを入手できます。最初にエクササイズをしてみてください — 不正をすることによって得られるものは何もありません！</p>
+
+<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">CSS の仕組み</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Syntax">CSS の構文</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS セレクタ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors">単純セレクタ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクタ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements">擬似クラスと擬似要素</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors">コンビネーターとセレクタリスト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS の値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">CSS のデバッグ</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">基本的な CSS の理解</a></li>
+</ul>
diff --git a/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html b/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html
new file mode 100644
index 0000000000..32aa19ca2e
--- /dev/null
+++ b/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html
@@ -0,0 +1,100 @@
+---
+title: かっこいいボックス
+slug: Learn/CSS/Styling_boxes/A_cool_looking_box
+tags:
+  - Assessment
+  - Beginner
+  - CSS
+  - Learn
+  - backgrounds
+  - borders
+  - box
+  - box model
+  - effects
+translation_of: Learn/CSS/Building_blocks/A_cool_looking_box
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary"><span class="seoSummary">この評価では、人目を引くボックスを作成しようとすることで、かっこいいボックスを作成する方法をさらに習得できます。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>CSS ボックスモデルと、境界線や背景などの他のボックス関連機能の理解をテストすること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Starting_point" name="Starting_point">出発点</h2>
+
+<p>この評価を開始するには、次のことが必要です。</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html">HTML</a> と <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css">CSS</a> のローカルコピーを作成します — それらを <code>index.html</code> と <code>style.css</code> として新しいディレクトリに保存します。</li>
+</ul>
+
+<div class="note">
+<p><strong>注</strong>: あるいは、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <code>&lt;style&gt;</code>  要素に自由に配置してください。</p>
+</div>
+
+<h2 id="Project_brief" name="Project_brief">プロジェクトの概要</h2>
+
+<p>あなたの仕事は、かっこよくて装飾的な箱を作り、私たちが CSS で持つことができる楽しみを探ることです。</p>
+
+<h3 id="General_tasks" name="General_tasks">一般的なタスク</h3>
+
+<ul>
+ <li>CSS を HTML に適用します。</li>
+</ul>
+
+<h3 id="Styling_the_box" name="Styling_the_box">ボックスの装飾</h3>
+
+<p>提供された {{htmlelement("p")}} に次のように装飾を設定してください。</p>
+
+<ul>
+ <li>およそ 200 ピクセルくらいの、大きなボタンに適した幅。</li>
+ <li>過程でテキストを垂直方向に中央揃えする、大きなボタンに適した高さ。</li>
+ <li>中央揃えのテキスト。</li>
+ <li>フォントサイズがわずかに増加し、計算したスタイルはおおよそ 17 から 18 ピクセルになりました。 rem を使用してください。 どのように値を導いたかについてのコメントを書いてください。</li>
+ <li>デザインの基本色。 この色を背景色としてボックスに付けます。</li>
+ <li>テキストの色は同じで、黒いテキストの影を使って読みやすくします。</li>
+ <li>かなり微妙な境界線の半径。</li>
+ <li>基本色に似た色で、やや暗い色合いの1ピクセルの実線の境界線。</li>
+ <li>右下隅に向かう半透明の黒の線形グラデーション。 最初は完全に透明にし、それに沿って 30% ずつ不透明度を約 0.2 に段階的に調整し、最後まで同じ色のままにします。</li>
+ <li>複数のボックスの影。 ボックスがページから少し浮き上がって見えるようにするには、標準のボックスの影を1つ指定します。 他の2つは、ボックスの内側の影であるべきです — 左上近くの半透明の白い影と右下近くの半透明の黒い影 — ボックスの素敵な浮いた3Dの外観に追加する。</li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13148/fancy-box.png" style="display: block; height: 76px; margin: 0px auto; width: 228px;"></p>
+
+<h2 id="Assessment" name="Assessment">評価</h2>
+
+<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/a-cool-looking-box-assessment/24685">この演習についてのディスカッションスレッド</a>や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！</p>
+
+<p>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Box_model_recap">ボックスモデルの復習</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Backgrounds">背景</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">境界線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">表の装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">ボックスの高度なエフェクト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">装飾的なレターヘッド付きの便箋の作成</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">かっこいいボックス</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html b/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html
new file mode 100644
index 0000000000..6d793d69ff
--- /dev/null
+++ b/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html
@@ -0,0 +1,108 @@
+---
+title: 装飾的なレターヘッド付きの便箋の作成
+slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper
+tags:
+  - Assessment
+  - Background
+  - Beginner
+  - Boxes
+  - CSS
+  - CodingScripting
+  - border
+  - box
+  - letter
+  - letterhead
+  - letterheaded
+  - paper
+translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary"><span class="seoSummary">好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>CSS ボックスモデルの理解と、背景の実装などの他のボックス関連機能をテストします。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Starting_point" name="Starting_point">出発点</h2>
+
+<p>この評価を開始するには、次のことが必要です。</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html">HTML</a> と <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css">CSS</a> のローカルコピーを作成します — それらを <code>index.html</code> と <code>style.css</code> として新しいディレクトリに保存します。</li>
+ <li>上部（<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png">top</a>）、下部（<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png">bottom</a>）、ロゴ（<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png">logo</a>）の画像のローカルコピーを、コードファイルと同じディレクトリに保存します。</li>
+</ul>
+
+<div class="note">
+<p><strong>注</strong>: あるいは、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <code>&lt;style&gt;</code>  要素に自由に配置してください。</p>
+</div>
+
+<h2 id="Project_brief" name="Project_brief">プロジェクトの概要</h2>
+
+<p>レターヘッド付きの便箋のテンプレートを作成するのに必要なファイルを与えられました。 ファイルをまとめるだけでいいのです。 目的を達するには、次のことが必要です。</p>
+
+<h3 id="The_main_letter" name="The_main_letter">メインの手紙</h3>
+
+<ul>
+ <li>CSS を HTML に適用します。</li>
+ <li><code>background</code> 宣言を手紙に追加します。
+  <ul>
+   <li>上部の画像を手紙の上部に固定します。</li>
+   <li>下部の画像を手紙の下部に固定します。</li>
+   <li>前記の両方の背景の上に半透明のグラデーションを追加して、手紙に少し質感を与えます。 上部と下部のすぐ近くで少し暗くしますが、中央の大部分は完全に透明にします。</li>
+  </ul>
+ </li>
+ <li>前記の宣言をサポートしていないブラウザーのための代替として、単に top の画像を手紙の上部に追加する別の <code>background</code> 宣言を追加します。</li>
+ <li>手紙に白い背景色を追加します。</li>
+ <li>配色の他の部分と調和している色で、手紙に 1mm の上下の実線の境界線を追加します。</li>
+</ul>
+
+<h3 id="The_logo" name="The_logo">ロゴ</h3>
+
+<ul>
+ <li>{{htmlelement("h1")}} にロゴを背景画像として追加します。</li>
+ <li>ロゴにフィルタを追加して、微妙なドロップシャドウを付けます。</li>
+ <li>今度はフィルタをコメントアウトし、丸い画像の形に沿った（ややクロスブラウザー互換の）別の方法でドロップシャドウを実装します。</li>
+</ul>
+
+<h2 id="Hints_and_tips" name="Hints_and_tips">ヒントとコツ</h2>
+
+<ul>
+ <li>代替バージョンの宣言を最初に配置し、その後に新しいブラウザーでのみ機能するバージョンを配置することによって、古いブラウザーのための代替を作成できることを忘れないでください。 古いブラウザーは最初の宣言を適用して2番目の宣言を無視しますが、新しいブラウザーは最初の宣言を適用してから2番目の宣言で上書きします。</li>
+ <li>ご希望の場合は、評価用に独自のグラフィックを自由に作成してください。</li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13144/letterhead.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h2 id="Assessment" name="Assessment">評価</h2>
+
+<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/creating-fancy-letterheaded-paper-assessment/24684/1">この演習についてのディスカッションスレッド</a>や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Box_model_recap">ボックスモデルの復習</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Backgrounds">背景</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">境界線</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">表の装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">ボックスの高度なエフェクト</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">装飾的なレターヘッド付きの便箋の作成</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">かっこいいボックス</a></li>
+</ul>
diff --git a/files/ja/learn/css/styling_text/fundamentals/index.html b/files/ja/learn/css/styling_text/fundamentals/index.html
new file mode 100644
index 0000000000..163dd945ee
--- /dev/null
+++ b/files/ja/learn/css/styling_text/fundamentals/index.html
@@ -0,0 +1,748 @@
+---
+title: 基本的なテキストとフォントの装飾
+slug: Learn/CSS/Styling_text/Fundamentals
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - Guide
+  - Style
+  - Text
+  - alignment
+  - family
+  - font
+  - shorthand
+  - spacing
+  - weight
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary"><span class="seoSummary">この記事では、{{glossary("CSS")}} によるテキストの装飾の習得に向けて旅を始めましょう。</span> ここでは、フォントの太さ、ファミリーそしてスタイルの設定、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔などを含んだ、テキストやフォントの装飾の基本について詳しく説明します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>基本的なコンピューターリテラシー、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、CSS の基本（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>ウェブページのテキストを装飾するために必要な基本的なプロパティとテクニックを学ぶこと。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_is_involved_in_styling_text_in_CSS" name="What_is_involved_in_styling_text_in_CSS">CSS においてテキストの装飾には何が関係していますか？</h2>
+
+<p>HTML と CSS を使った作業ですでに経験したように、要素内のテキストは要素のコンテンツボックス内にレイアウトされます。 コンテンツ領域の左上（RTL 言語のコンテンツの場合は右上）から始まり、ラインの終りに向かって流れます。 終りに達すると、次のラインに進み、続けてすべてのコンテンツがボックスに配置されるまで次のラインに進みます。 テキストコンテンツは事実上一連のインライン要素のようにふるまい、互いに隣接するラインに配置され、ラインの終りに達するまで、または、{{htmlelement("br")}} 要素を使用して手動で改行を強制しない限り改行を作成しません。</p>
+
+<div class="note">
+<p><strong>注</strong>: 上の段落で混乱していると感じても問題ありません — 先に進む前に、ボックスモデル理論を磨くために、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model">ボックスモデル</a>の記事に戻って見直してください。</p>
+</div>
+
+<p>テキストを装飾するために使用される CSS プロパティは、一般的に次の2つのカテゴリに分類されます。 この記事では、これらのプロパティを個別に説明します。</p>
+
+<ul>
+ <li><strong>フォントスタイル</strong>: テキストに適用されるフォントに影響するプロパティで、適用するフォント、大きさ、太字、斜体などに影響します。</li>
+ <li><strong>テキストのレイアウトスタイル</strong>: テキストの間隔やその他のレイアウト機能に影響するプロパティで、例えば、行間や文字間のスペースや、コンテンツボックス内でのテキストの配置方法などを操作できます。</li>
+</ul>
+
+<div class="note">
+<p><strong>注</strong>: 要素内のテキストはすべて単一の実体として影響を受けることに注意してください。 テキストの一部分を（{{htmlelement("span")}} や {{htmlelement("strong")}} など）適切な要素でラップしたり、{{cssxref("::first-letter")}}（要素のテキストの最初の文字を選択）、{{cssxref("::first-line")}}（要素のテキストの最初の行を選択）、{{cssxref("::selection")}}（現在カーソルで強調表示されているテキストを選択）のようなテキスト固有の疑似要素を使用しない限り、テキストの一部分を選択して装飾することはできません。</p>
+</div>
+
+<h2 id="Fonts" name="Fonts">フォント</h2>
+
+<p>フォントを装飾するためのプロパティを見るためにまっすぐに進みましょう。 この例では、次のような同じ HTML サンプルにいくつかの異なる CSS プロパティを適用します。</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+
+<p><a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">完成した例</a>は Github にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">ソースコード</a>も参照してください）。</p>
+
+<h3 id="Color" name="Color">色</h3>
+
+<p>{{cssxref("color")}} プロパティは、選択された要素の前景のコンテンツの色を設定します（通常はテキストですが、{{cssxref("text-decoration")}} プロパティを使用してテキストに下線や上線を配置するなど、他のいくつかの要素を含めることもできます）。</p>
+
+<p><code>color</code> は次のように任意の <a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS カラー単位</a>を受け入れることができます。</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}</pre>
+
+<p>これにより、次のように段落は標準のブラウザーのデフォルトの黒ではなく赤になります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Color', '100%', 220) }}</p>
+
+<h3 id="Font_families" name="Font_families">フォントファミリー</h3>
+
+<p>テキストに別のフォントを設定するには、{{cssxref("font-family")}} プロパティを使用します — これにより、選択した要素に適用するブラウザーのフォント（またはフォントのリスト）を指定できます。 ウェブサイトにアクセスしているマシンで利用可能な場合にのみ、ブラウザーはフォントを適用します。 そうでない場合は、ブラウザーの{{anch("Default fonts", "デフォルトフォント")}}を使用するだけです。 簡単な例はこんな感じです。</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: arial;
+}</pre>
+
+<p>これにより、ページ上のすべての段落に、どのコンピュータでも見られる arial フォントが採用されます。</p>
+
+<h4 id="Web_safe_fonts" name="Web_safe_fonts">ウェブセーフフォント</h4>
+
+<p>フォントの入手可能性と言えば、すべてのシステムで一般的に利用でき、したがってそれほど心配することなく使用できるフォントの数は限られています。これらはいわゆる<strong>ウェブセーフフォント </strong>(web safe fonts) です。</p>
+
+<p>ほとんどの場合、ウェブ開発者は、テキストコンテンツの表示に使用されるフォントをより具体的に制御したいと考えています。 問題は、ウェブページを見るために使用されているコンピュータでどのフォントが利用可能かを知る方法を見つけることです。 あらゆる場合にこれを知る方法はありませんが、ウェブセーフフォントは最も使用されているオペレーティングシステム（Windows、Mac、最も一般的な Linux ディストリビューション、Android、および iOS）のほぼすべての実例で使用可能です。</p>
+
+<p>実際のウェブセーフフォントのリストは、オペレーティングシステムが進化するにつれて変わりますが、少なくとも現時点では次のフォントをウェブセーフと見なすことをお勧めします（それらの多くは90年代後半から2000年代初頭にかけての Microsoft の <a href="https://en.wikipedia.org/wiki/Core_fonts_for_the_Web">Core fonts for the Web</a> の先鞭のおかげで普及しました）。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">名前</th>
+   <th scope="col" style="white-space: nowrap;">総称タイプ</th>
+   <th scope="col">注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Arial</td>
+   <td>sans-serif</td>
+   <td><em>Arial</em> に好ましい代替として <em>Helvetica</em> を追加するのがベストプラクティスと考えられることがよくあります。 それらのフォントフェースはほぼ同じですが、<em>Arial</em> の方が広く入手可能であっても <em>Helvetica</em> はより良い形状をしていると考えられます。</td>
+  </tr>
+  <tr>
+   <td>Courier New</td>
+   <td>monospace</td>
+   <td>いくつかの OS は <em>Courier</em> と呼ばれる <em>Courier New</em> フォントの代替（おそらく古い）バージョンを持っています。 <em>Courier New</em> と一緒に両方を使用することを推奨します。</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">Georgia</td>
+   <td>serif</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">Times New Roman</td>
+   <td>serif</td>
+   <td>いくつかの OS は <em>Times</em> と呼ばれる <em>Times New Roman</em> フォントの代替（おそらく古い）バージョンを持っています。 <em>Times New Roman</em> と一緒に両方を使用することを推奨します。</td>
+  </tr>
+  <tr>
+   <td>Trebuchet MS</td>
+   <td>sans-serif</td>
+   <td>このフォントの使用には注意が必要です — モバイル OS では広く使用されていません。</td>
+  </tr>
+  <tr>
+   <td>Verdana</td>
+   <td>sans-serif</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>注</strong>: さまざまなリソースの中で、<a href="http://www.cssfontstack.com/">cssfontstack.com</a> ウェブサイトには、Windows および macOS オペレーティングシステムで利用可能なウェブセーフフォントのリストがあり、使用しても安全と見なせるものについて判断を下すことができます。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: ウェブページとともにカスタムフォントをダウンロードして、フォントの使用方法を自由にカスタマイズできる方法があります。 それは、<strong>ウェブフォント</strong>（web fonts）です。 これはもう少し複雑で、このモジュールの後の別の記事でこれを議論するでしょう。</p>
+</div>
+
+<h4 id="Default_fonts" name="Default_fonts">デフォルトフォント</h4>
+
+<p>CSS はフォントの5つの総称名を定義しています: セリフ（<code>serif</code>）、サンセリフ（<code>sans-serif</code>）、等幅（<code>monospace</code>）、筆記体（<code>cursive</code>）、ファンタジー（<code>fantasy</code>）。 これらは非常に一般的なものであり、それらの総称名を使用するときに使用される正確なフォントは各ブラウザー次第であり、それらが実行されているオペレーティングシステムごとに異なります。 これは、ブラウザーが最低限適切なフォントを提供するように最善を尽くそうとする場合の<em>最悪のシナリオ</em>を表します。 <code>serif</code>、<code>sans-serif</code>、および <code>monospace</code> はかなり予測可能であり、妥当なものを提供するはずです。 その一方で、<code>cursive</code> や <code>fantasy</code> はそれほど予測できないので、慎重に使用してテストすることをお勧めします。</p>
+
+<p>5つの名前は次のように定義されています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">用語</th>
+   <th scope="col">定義</th>
+   <th scope="col">例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>serif</code></td>
+   <td>セリフ（いくつかの書体のストロークの終わりに見られる隆起やその他の細部）を持つフォントです。</td>
+   <td><span style="font-family: serif;">My big red elephant</span></td>
+  </tr>
+  <tr>
+   <td><code>sans-serif</code></td>
+   <td>セリフがないフォントです。</td>
+   <td><span style="font-family: sans-serif;">My big red elephant</span></td>
+  </tr>
+  <tr>
+   <td><code>monospace</code></td>
+   <td>すべての文字が同じ幅を持つフォントで、通常はコードリストで使用されます。</td>
+   <td><span style="font-family: monospace;">My big red elephant</span></td>
+  </tr>
+  <tr>
+   <td><code>cursive</code></td>
+   <td>流れるような連続したストロークで、手書き文字を模倣することを目的としたフォントです。</td>
+   <td><span style="font-family: cursive;">My big red elephant</span></td>
+  </tr>
+  <tr>
+   <td><code>fantasy</code></td>
+   <td>装飾的なフォントです。</td>
+   <td><span style="font-family: fantasy;">My big red elephant</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Font_stacks" name="Font_stacks">フォントスタック</h4>
+
+<p>ウェブページで使用したいフォントの可用性を保証することはできないため（ウェブフォントでさえ何らかの理由で失敗する<em>可能性</em>もあります）、ブラウザーに複数のフォントから選択できるように<strong>フォントスタック</strong>（font stack）を指定できます。 これは単に、次のようにカンマで区切られた複数のフォント名からなる <code>font-family</code> の値です。</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}</pre>
+
+<p>そのような場合、ブラウザーはリストの先頭から始めて、そのフォントがマシンで利用可能かどうかを確認します。 そうであれば、そのフォントを選択した要素に適用します。 そうでない場合は、次のフォントに移動します。</p>
+
+<p>リストされているフォントがどれも利用できない場合、ブラウザーが少なくともほぼ適切なものを提供できるように、スタックの最後に適切な総称フォント名を指定することをお勧めします。 この点を強調するために、他のオプションが利用できない場合、段落にはブラウザーのデフォルトの serif フォントを使用します — これは通常は Times New Roman です — これは sans-serif フォントには不適切です！</p>
+
+<div class="note">
+<p><strong>注</strong>: <code>Trebuchet MS</code> のように、複数の単語を含むフォント名は <code>"Trebuchet MS"</code> のように引用符で囲む必要があります。</p>
+</div>
+
+<h4 id="A_font-family_example" name="A_font-family_example">font-family の例</h4>
+
+<p>前の例に追加して、次のように段落に sans-serif フォントを付けます。</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>これにより、次のような結果が得られます。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('A_font-family_example', '100%', 220) }}</p>
+
+<h3 id="Font_size" name="Font_size">フォントサイズ</h3>
+
+<p>前のモジュールの <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS の値と単位</a>の記事で、<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>を確認しました。 フォントサイズ（{{cssxref("font-size")}} プロパティで設定）は、これらの単位のほとんど（および<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Percentages">パーセント</a>などの他の単位）で測定された値を取ることができますが、テキストのサイズを設定するために使用する最も一般的な単位は次のとおりです。</p>
+
+<ul>
+ <li><code>px</code> (pixels): テキストを表示したい高さのピクセル数。 これは絶対的な単位です — それはほとんどどんな状況でもページ上のフォントの同じ最終的な計算値になります。</li>
+ <li><code>em</code>: <code>1em</code> は、現在装飾している要素の親要素に設定されているフォントサイズ（より具体的には、親要素の内側に含まれる大文字の M の幅）に等しくなります。 フォントサイズの異なるネストされた要素が多数設定されている場合には厄介な作業になるかもしれませんが、以下に示すように、それは実行可能です。 なぜわざわざそうする？ 慣れると非常に自然になり、テキストだけでなく、<code>em</code> を使用してすべてのサイズを変更できます。 ウェブサイト全体を <code>em</code> を使用してサイズ設定することができ、これにより、メンテナンスが簡単になります。</li>
+ <li><code>rem</code>: これらは <code>em</code> とまったく同じように機能しますが、<code>1rem</code> が親要素ではなく文書のルート要素に設定されたフォントサイズ（つまり {{htmlelement("html")}}）に等しい点が異なります。 これにより、フォントサイズを簡単に計算することができますが、残念ながら Internet Explorer 8 以下では <code>rem</code> はサポートされていません。 プロジェクトで古いブラウザーをサポートする必要がある場合は、<code>em</code> や <code>px</code> を使用するか、<a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a> などの{{glossary("polyfill","ポリフィル")}}を使用することができます。</li>
+</ul>
+
+<p>要素の <code>font-size</code> は、その要素の親要素から継承されます。 これはすべてドキュメント全体のルート要素 — {{htmlelement("html")}} — で始まり、<code>font-size</code> はブラウザー間で標準で <code>16px</code> に設定されています。 ルート要素内の段落（またはブラウザーによって設定された異なるサイズを持たない他の要素）は、最終サイズが <code>16px</code> になります。 他の要素はデフォルトサイズが異なる場合があります。 例えば、{{htmlelement("h1")}} 要素のサイズはデフォルトで <code>2em</code> に設定されているため、最終的なサイズは <code>32px</code> になります。</p>
+
+<p>入れ子になった要素のフォントサイズを変更し始めると、物事はより複雑になります。 例えば、ページに {{htmlelement("article")}} 要素があり、その <code>font-size</code> を <code>1.5em</code>（これは計算すると <code>24px</code> の最終的なサイズになります）に設定し、次に <code>&lt;article&gt;</code> 要素内の段落に <code>20px</code> で計算したフォントサイズを使用するようにしたい場合に、あなたは何 <code>em</code> の値を使用しますか？</p>
+
+<pre class="brush: html notranslate">&lt;!-- ドキュメントのベースフォントサイズは 16px です --&gt;
+&lt;article&gt; &lt;!-- ここのフォントサイズが 1.5em の場合 --&gt;
+  &lt;p&gt;My paragraph&lt;/p&gt; &lt;!-- 20px のフォントサイズにするにはどう計算しますか？ --&gt;
+&lt;/article&gt;</pre>
+
+<p>その <code>em</code> 値を 20 / 24 、つまり <code>0.83333333em</code> に設定する必要があります。 数学は複雑になる可能性があるため、装飾方法には注意が必要です。 可能な限り <code>rem</code> を使用して、物事を単純にし、可能な限りコンテナ要素のフォントサイズを設定しないようにするのが最善です。</p>
+
+<h4 id="A_simple_sizing_example" name="A_simple_sizing_example">簡単なサイズ設定の例</h4>
+
+<p>テキストのサイズを変更するときは、通常、ドキュメントのベース <code>font-size</code> を <code>10px</code> に設定することをお勧めします。 そうすれば、数学の計算がはるかに簡単になります — その場合、必要な <code>(r)em</code> 値は、16 ではなく、10 で割ったピクセルフォントサイズです。 これで、ドキュメント内のさまざまな種類のテキストのサイズを簡単に変更できます。 スタイルシートの指定された領域にすべての <code>font-size</code> の規則セットをリストすることをお勧めします。 そうすれば、それらは簡単に見つけられます。</p>
+
+<p>新しい結果はこんな感じです。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>{{ EmbedLiveSample('A_simple_sizing_example', '100%', 220) }}</p>
+
+<h3 id="Font_style_font_weight_text_transform_and_text_decoration" name="Font_style_font_weight_text_transform_and_text_decoration">フォントスタイル、フォントの太さ、テキスト変換、テキスト飾り</h3>
+
+<p>CSS は、テキストの視覚的な太さや強調を変更するために次の4つの共通のプロパティを提供します。</p>
+
+<ul>
+ <li>{{cssxref("font-style")}}: イタリック体テキストのオンとオフを切り替えるために使用されます。 可能な値は次のとおりです（何らかの理由でイタリック装飾をオフにしたい場合を除いて、これを使用することはめったにありません）。
+  <ul>
+   <li><code>normal</code>: テキストを通常のフォントに設定します（既存のイタリック体をオフにします）。</li>
+   <li><code>italic</code>: 利用できる場合は、<em>イタリック体版のフォント</em>を使用するようにテキストを設定します。 利用できない場合は、代わりに <code>oblique</code> でイタリック体をシミュレートします。</li>
+   <li><code>oblique</code>: <span style="font-style: oblique;">通常版を斜め​​にして</span>作成された、イタリック体フォントのシミュレート版を使用するようにテキストを設定します。</li>
+  </ul>
+ </li>
+ <li>{{cssxref("font-weight")}}: テキストの太さを設定します。 利用可能なフォントのバリエーションが多数ある場合（<em>-light</em>、<em>-normal</em>、<em>-bold</em>、<em>-extrabold</em>、<em>-black</em> など）、これには多くの値がありますが、現実的には <code>normal</code> と <code>bold</code> 以外のものを使用することはほとんどありません。
+  <ul>
+   <li><code>normal</code>, <code>bold</code>: 標準および<strong style="font-weight: bold;">太字</strong>のフォントの太さ。</li>
+   <li><code>lighter</code>, <code>bolder</code>: 現在の要素の太さを、親要素の太さよりも1段階細くまたは太くします。</li>
+   <li><code>100</code>～<code>900</code>: 必要に応じて、上記のキーワードよりもきめ細かい制御を提供する太さの数値。</li>
+  </ul>
+ </li>
+ <li>{{cssxref("text-transform")}}: フォントを変換するように設定できます。 値は次のとおりです。
+  <ul>
+   <li><code>none</code>: 変換を禁止します。</li>
+   <li><code>uppercase</code>: すべてのテキストを大文字（<span style="text-transform: uppercase;">all text to capitals</span>）に変換します。</li>
+   <li><code>lowercase</code>: すべてのテキストを小文字（<span style="text-transform: lowercase;">ALL TEXT TO LOWER CASE</span>）に変換します。</li>
+   <li><code>capitalize</code>: すべての単語を最初の文字を大文字にする（<span style="text-transform: capitalize;">have the first letter capitalized</span>）ように変換します。</li>
+   <li><code>full-width</code>: 例えば、ラテン文字を（中国語、日本語、韓国語など）アジア言語のグリフと一緒に揃えて、等幅フォントのように、固定幅の四角形の中にすべてのグリフを書く（<span style="text-transform: full-width;">written inside a fixed-width square</span>）ように変換します。</li>
+  </ul>
+ </li>
+ <li>{{cssxref("text-decoration")}}: フォントのテキスト飾りを設定/設定解除します（主にリンクのデフォルトの下線を解除するために使用します）。 使用可能な値は次のとおりです。</li>
+ <li>
+  <ul>
+   <li><code>none</code>: 既に存在するテキスト飾りをすべて解除します。</li>
+   <li><code>underline</code>: <u>テキストに下線を引きます</u>。</li>
+   <li><code>overline</code>: <span style="text-decoration: overline;">テキストに上線を付けます</span>。</li>
+   <li><code>line-through</code>: <s style="text-decoration: line-through;">テキストの上に取り消し線を引きます</s>。</li>
+  </ul>
+  複数の飾りを同時に追加したい場合は、<span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span> のように、{{cssxref("text-decoration")}} は一度に複数の値を受け入れることができます。 また、{{cssxref("text-decoration")}} は、{{cssxref("text-decoration-line")}}、{{cssxref("text-decoration-style")}}、および {{cssxref("text-decoration-color")}} の一括指定プロパティです。 例えば、<span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code></span> のように、これらのプロパティ値の組み合わせを使用して、興味深い効果を生み出すことができます。</li>
+</ul>
+
+<p>例にこれらのプロパティをいくつか追加してみましょう。</p>
+
+<p>新しい結果はこんな感じです。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>{{ EmbedLiveSample('Font_style_font_weight_text_transform_and_text_decoration', '100%', 220) }}</p>
+
+<h3 id="Text_drop_shadows" name="Text_drop_shadows">テキストのドロップシャドウ</h3>
+
+<p>{{cssxref("text-shadow")}} プロパティを使ってテキストにドロップシャドウを付けることができます。 次の例に示すように、これは最大4つの値を取ります。</p>
+
+<pre class="brush: css notranslate">text-shadow: 4px 4px 5px red;</pre>
+
+<p>4つのプロパティは次のとおりです。</p>
+
+<ol>
+ <li>元のテキストからの影の水平方向のオフセット — これは、ほとんどの CSS の<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>を取ることができますが、最も一般的には <code>px</code> を使用します。 この値を含める必要があります。</li>
+ <li>元のテキストからの影の垂直方向のオフセット — 基本的に水平方向のオフセットと同じようにふるまいますが、影を左右に移動するのではなく上下に移動する点が異なります。 この値を含める必要があります。</li>
+ <li>ぼかし半径 — 値が大きいほど、影はより広く分散されます。 この値が含まれていない場合、デフォルトは 0 になり、ぼかしは行われません。 これは、ほとんどの CSS の<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>を取ることができます。</li>
+ <li>影のベースカラー — 任意の <a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS カラー単位</a>を取ります。 含まれていない場合、デフォルトは <code>black</code> です。</li>
+</ol>
+
+<div class="note">
+<p>注: 正のオフセット値は影を右下に移動させますが、<code>-1px -1px</code> のように負のオフセット値を使用して影を左上に移動させることもできます。</p>
+</div>
+
+<h4 id="Multiple_shadows" name="Multiple_shadows">複数の影</h4>
+
+<p>複数の影の値をコンマで区切って含めることで、次のように同じテキストに複数の影を付けることができます。</p>
+
+<pre class="brush: css notranslate"><code class="language-css"><span class="property token">text-shadow</span><span class="punctuation token">:</span> -<span class="number token">1</span>px -<span class="number token">1</span>px <span class="number token">1</span>px <span class="hexcode token">#aaa</span>,
+             <span class="number token">0</span>px <span class="number token">4</span>px <span class="number token">1</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.5</span><span class="punctuation token">)</span>,
+             <span class="number token">4</span>px <span class="number token">4</span>px <span class="number token">5</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.7</span><span class="punctuation token">)</span>,
+             <span class="number token">0</span>px <span class="number token">0</span>px <span class="number token">7</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>これを Tommy the cat の例の {{htmlelement("h1")}} 要素に適用すると、結果は次のようになります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 26px;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 14px;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multiple_shadows', '100%', 220) }}</p>
+
+<div class="note">
+<p><strong>注</strong>:  Sitepoint の記事 <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a> で、<code>text-shadow</code> の使い方のより興味深い例を見ることができます。</p>
+</div>
+
+<h2 id="Text_layout" name="Text_layout">テキストのレイアウト</h2>
+
+<p>基本的なフォントのプロパティ以外の方法で、テキストのレイアウトに影響を与えるために使用できるプロパティを見てみましょう。</p>
+
+<h3 id="Text_alignment" name="Text_alignment">テキストの配置</h3>
+
+<p>{{cssxref("text-align")}} プロパティは、テキストを含むコンテンツボックス内でのテキストの配置方法を制御するために使用されます。 利用可能な値は次の通りで、通常のワードプロセッサアプリケーションとほとんど同じように機能します。</p>
+
+<ul>
+ <li><code>left</code>: テキストを左揃えにします。</li>
+ <li><code>right</code>: テキストを右揃えにします。</li>
+ <li><code>center</code>: テキストを中央揃えにします。</li>
+ <li><code>justify</code>: テキストを両端揃えにします。 すべてのテキストのラインが同じ幅になるように、単語の間隔を変えてテキストを広げます。 これは慎重に使用する必要があります — 特に、長い単語が多数含まれている段落に適用すると、ひどく見えます。 もしこれを使うつもりなら、{{cssxref("hyphens")}} のような他の何かを使用して、複数ラインにまたがる長い単語を分割することも考えてください。</li>
+</ul>
+
+<p>例の {{htmlelement("h1")}} に、<code>text-align: center;</code> を適用した場合、次のようになるでしょう。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Text_alignment', '100%', 220) }}</p>
+
+<h3 id="Line_height" name="Line_height">ラインの高さ</h3>
+
+<p>{{cssxref("line-height")}} プロパティはテキストの各ラインの高さを設定します — これはほとんどの<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>をとることができますが、乗数として機能し、一般的に最良の選択肢と考えられる単位なしの値をとることもできます — <code>line-height</code> を得るために {{cssxref("font-size")}} が乗算されます。 本文はラインが離れていると、一般的に見栄えがよく、読みやすくなります。 推奨されるラインの高さは約 1.5 〜 2（ダブルスペース）です。 したがって、テキストのラインをフォントの高さの 1.5 倍に設定するには、次のようにします。</p>
+
+<pre class="brush: css notranslate">line-height: 1.5;</pre>
+
+<p>この例の {{htmlelement("p")}} 要素にこれを適用すると、次のようになります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Line_height', '100%', 250) }}</p>
+
+<h3 id="Letter_and_word_spacing" name="Letter_and_word_spacing">文字と単語の間隔設定</h3>
+
+<p>{{cssxref("letter-spacing")}} プロパティと {{cssxref("word-spacing")}} プロパティを使用すると、テキスト内の文字と単語の間隔を設定できます。 これらはあまり使用しませんが、ある外観を得るためや、特に濃いフォントの読みやすさを向上させるために使用することがあります。 それらはほとんどの<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>を取ることができます。</p>
+
+<p>例として、この例の {{htmlelement("p")}} 要素の最初のラインに次を適用したとします。</p>
+
+<pre class="brush: css notranslate">p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}</pre>
+
+<p>次のようになります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 250) }}</p>
+
+<h3 id="Other_properties_worth_looking_at" name="Other_properties_worth_looking_at">その他の検討に値するプロパティ</h3>
+
+<p>上記のプロパティは、ウェブページ上でテキストを装飾する方法のアイデアを与えますが、使うことができるもっと多くのプロパティがあります。 ここでは最も重要なものだけを取り上げたいと思います。 上記の使い方に慣れてきたら、次のことも調べてください。</p>
+
+<p>フォントスタイル</p>
+
+<ul>
+ <li>{{cssxref("font-variant")}}: スモールキャップと通常の代替フォントを切り替えます。</li>
+ <li>{{cssxref("font-kerning")}}: フォントのカーニングオプションのオンとオフを切り替えます。</li>
+ <li>{{cssxref("font-feature-settings")}}: さまざまな <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a> フォント機能のオンとオフを切り替えます。</li>
+ <li>{{cssxref("font-variant-alternates")}}: 与えられたフォントフェースのための代替グリフの使用を制御します。</li>
+ <li>{{cssxref("font-variant-caps")}}: 代替大文字グリフの使用を制御します。</li>
+ <li>{{cssxref("font-variant-east-asian")}}: 日本語や中国語など、東アジアの文字の代替グリフの使用方法を制御します。</li>
+ <li>{{cssxref("font-variant-ligatures")}}:テキストで使用される合字と文脈形式を制御します。</li>
+ <li>{{cssxref("font-variant-numeric")}}: 数字、分数、および序数記号の代替グリフの使用方法を制御します。</li>
+ <li>{{cssxref("font-variant-position")}}: 上付き文字または下付き文字として配置された、小さいサイズの代替グリフの使用方法を制御します。</li>
+ <li>{{cssxref("font-size-adjust")}}: 実際のフォントサイズとは無関係にフォントの表示サイズを調整します。</li>
+ <li>{{cssxref("font-stretch")}}: 与えられたフォントの可能な代替の伸縮バージョン間で切り替えます。</li>
+ <li>{{cssxref("text-underline-position")}}: <code>text-decoration-line</code> プロパティの <code>underline</code> 値を使用して設定された下線の位置を指定します。</li>
+ <li>{{cssxref("text-rendering")}}: テキストレンダリングの最適化を試します。</li>
+</ul>
+
+<p>テキストのレイアウトスタイル</p>
+
+<ul>
+ <li>{{cssxref("text-indent")}}: テキスト内容の最初のラインの始まりの前にどれだけの水平スペースを残すべきかを指定します。</li>
+ <li>{{cssxref("text-overflow")}}: 表示されないオーバーフローしたコンテンツがユーザーに通知される方法を定義します。</li>
+ <li>{{cssxref("white-space")}}: 要素内の空白とそれに関連する改行の扱い方を定義します。</li>
+ <li>{{cssxref("word-break")}}: 単語内で改行するかどうかを指定します。</li>
+ <li>{{cssxref("direction")}}: テキストの方向を定義します（これは言語に依存します。 通常、テキストの内容に結び付けられているので、HTML にその部分を処理させる方が良いです）。</li>
+ <li>{{cssxref("hyphens")}}: サポートしている言語のハイフネーションをオンまたはオフにします。</li>
+ <li>{{cssxref("line-break")}}: アジア言語の改行を緩和または強化します。</li>
+ <li>{{cssxref("text-align-last")}}: ブロックの最後のラインまたは強制改行の直前のラインの配置方法を定義します。</li>
+ <li>{{cssxref("text-orientation")}}:  ライン内での文字の向きを定義します。</li>
+ <li>{{cssxref("overflow-wrap")}}: オーバーフローを防ぐために、ブラウザーが単語内で改行できるかどうかを指定します。</li>
+ <li>{{cssxref("writing-mode")}}: テキストのラインを水平に配置するか垂直に配置するか、およびそれに続いてラインが流れる方向を定義します。</li>
+</ul>
+
+<h2 id="Font_shorthand" name="Font_shorthand">フォントの一括指定</h2>
+
+<p>多くのフォントプロパティは、一括指定プロパティの {{cssxref("font")}} を介して設定することもできます。 これらは、{{cssxref("font-style")}}、{{cssxref("font-variant")}}、{{cssxref("font-weight")}}、{{cssxref("font-stretch")}}、{{cssxref("font-size")}}、{{cssxref("line-height")}}、{{cssxref("font-family")}} の順に書きます。</p>
+
+<p>これらすべてのプロパティのうち、<code>font</code> 一括指定プロパティを使用する場合に必要なのは、<code>font-size</code> と <code>font-family</code> のみです。</p>
+
+<p>{{cssxref("font-size")}} プロパティと {{cssxref("line-height")}} プロパティの間にスラッシュを入れる必要があります。</p>
+
+<p>完全な例は次のようになります。</p>
+
+<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre>
+
+<h2 id="Active_learning_Playing_with_styling_text" name="Active_learning_Playing_with_styling_text">能動的学習: テキストの装飾で遊ぶ</h2>
+
+<p>この能動的学習セッションでは、具体的な演習はありません。 フォントやテキストのレイアウトのプロパティをいくつか試してみて、作成できるものを確認してください！ オフラインの HTML / CSS ファイルを使用してこれを行うか、下記のライブ編集可能な例にコードを入力することができます。</p>
+
+<p>間違えた場合は、<em>Reset</em> ボタンを使用していつでもリセットできます。</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;
+  &lt;p&gt;Some sample text for your delight&lt;/p&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;p {
+
+  }&lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>この記事のテキストで遊んで楽しんでくださいね！ 次の記事では、HTML リストの装飾について知っておくべきことをすべて説明します。</p>
+
+<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li>
+</ul>
diff --git a/files/ja/learn/css/styling_text/index.html b/files/ja/learn/css/styling_text/index.html
new file mode 100644
index 0000000000..6bcfb0a722
--- /dev/null
+++ b/files/ja/learn/css/styling_text/index.html
@@ -0,0 +1,55 @@
+---
+title: テキストの装飾
+slug: Learn/CSS/Styling_text
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Fonts
+  - Landing
+  - Links
+  - Module
+  - Text
+  - font
+  - letter
+  - line
+  - lists
+  - shadow
+  - web fonts
+translation_of: Learn/CSS/Styling_text
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。</span></p>
+
+<h2 id="Prerequisites" name="Prerequisites">前提知識</h2>
+
+<p>このモジュールを始める前に、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>のモジュールで説明したようにすでに HTML についての基本的な知識があり、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>で説明したように CSS の基本に慣れている必要があります。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 自分のファイルを作成できないコンピューター/タブレット/その他の端末で作業している場合、<a href="http://jsbin.com/">JSBin</a>、<a href="https://codepen.io/">CodePen</a>、<a href="https://thimble.mozilla.org/">Thimble</a> のようなオンラインコーディングプログラムで (ほとんどの) サンプルコードを試せます。</p>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<p>このモジュールには以下の記事が含まれていて、HTML のテキストコンテンツの装飾の背後にあるすべての重要事項を説明しています。</p>
+
+<dl>
+ <dt><a href="/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></dt>
+ <dd>この記事では、フォントの太さ、ファミリーとスタイル、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔の設定など、テキストとフォントの装飾のすべての基本について詳しく説明します。</dd>
+ <dt><a href="/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></dt>
+ <dd>リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。この記事はすべてを説明しています。</dd>
+ <dt><a href="/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></dt>
+ <dd>リンクを装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。この記事では、これらすべてのトピックを見ていきます。</dd>
+ <dt><a href="/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></dt>
+ <dd>ここでは、ウェブフォントを詳しく探ります — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様でカスタムなテキストの装飾を可能にします。</dd>
+</dl>
+
+<h2 id="Assessments" name="Assessments">評価</h2>
+
+<p>以下の評価では、上記のガイドで説明されているテキストの装飾のテクニックについての理解をテストします。</p>
+
+<dl>
+ <dt><a href="/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></dt>
+ <dd>この評価では、コミュニティスクールのホームページのテキストを装飾してもらい、テキストの装飾についての理解をテストします。</dd>
+</dl>
diff --git a/files/ja/learn/css/styling_text/styling_links/index.html b/files/ja/learn/css/styling_text/styling_links/index.html
new file mode 100644
index 0000000000..60588e794f
--- /dev/null
+++ b/files/ja/learn/css/styling_text/styling_links/index.html
@@ -0,0 +1,453 @@
+---
+title: リンクの装飾
+slug: Learn/CSS/Styling_text/Styling_links
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - Focus
+  - Guide
+  - Learn
+  - Links
+  - Pseudo-class
+  - hover
+  - hyperlinks
+  - menus
+  - tabs
+translation_of: Learn/CSS/Styling_text/Styling_links
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary"><span class="seoSummary"><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">リンク</a>を装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。 この記事では、これらすべてのトピックを見ていきます。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>基本的なコンピューターリテラシー、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、CSS の基本（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）、<a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">CSS のテキストとフォントの基礎</a>。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>リンク状態を装飾する方法と、ナビゲーションメニューのような一般的な UI 機能でリンクを効果的に使用する方法を学ぶこと。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Lets_look_at_some_links" name="Let's_look_at_some_links">いくつかのリンクを見てみましょう</h2>
+
+<p><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a>のベストプラクティスに従って、HTML がリンクをどのように実装するかを調べました。 この記事では、この知識を基にして、リンクの装飾のためのベストプラクティスを示します。</p>
+
+<h3 id="Link_states" name="Link_states">リンク状態</h3>
+
+<p>最初に理解するべきことはリンク状態の概念です。リンクが存在できる様々な状態のことで、それらは異なる<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements">疑似クラス</a>を使って装飾することができます。</p>
+
+<ul>
+ <li><strong>リンク（未訪問）</strong>: リンクが他のどの状態にもない場合に、リンクが属するデフォルトの状態。 これは、{{cssxref(":link")}} 疑似クラスを使用して特に装飾できます。</li>
+ <li><strong>訪問済み</strong>: 既に訪問済み（ブラウザーの履歴に存在する）のリンクで、{{cssxref(":visited")}} 擬似クラスを使用して装飾します。</li>
+ <li><strong>ホバー</strong>: リンクにユーザーのマウスポインタが合わせられているときのリンクで、{{cssxref(":hover")}} 疑似クラスを使用して装飾します。</li>
+ <li><strong>フォーカス</strong>: フォーカスしたときのリンク（例えば、<kbd>Tab</kbd> キーなどを使用してキーボードユーザーによって移動してきたか、{{domxref("HTMLElement.focus()")}} を使用してプログラムでフォーカスした） — これは {{cssxref(":focus")}} 擬似クラスを使用して装飾します。</li>
+ <li><strong>アクティブ</strong>: アクティブ化している（例えばクリックされている）ときのリンクで、{{cssxref(":active")}} 疑似クラスを使用して装飾します。</li>
+</ul>
+
+<h3 id="Default_styles" name="Default_styles">デフォルトの装飾</h3>
+
+<p>次の例は、リンクがデフォルトでどのようにふるまうかを示しています（CSS は、テキストをより見やすくするために、単にテキストを拡大して中央に配置しています）。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="#"&gt;A simple link&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">p {
+  font-size: 2rem;
+  text-align: center;
+}</pre>
+
+<p>{{ EmbedLiveSample('Default_styles', '100%', 120) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: このページの例にあるリンクはすべて偽のリンクです — <code>#</code>（ハッシュまたはポンド記号）が実際の URL の代わりに配置されています。 これは、実際のリンクが含まれている場合、それらをクリックすると例が壊れる可能性があるためです（エラーが発生したり、ロードしたページから埋め込まれた例に戻ることができません）。 <code>#</code> は現在のページにリンクしているだけです。</p>
+</div>
+
+<p>デフォルトの装飾を調べていくうちに、次のようないくつかのことに気付くでしょう。</p>
+
+<ul>
+ <li>リンクには下線が引かれています。</li>
+ <li>未訪問のリンクは青です。</li>
+ <li>訪問済みのリンクは紫色です。</li>
+ <li>リンクにホバーすると、マウスポインタが小さな手のアイコンに変わります。</li>
+ <li>フォーカスのあるリンクの周囲にはアウトラインがあります — <kbd>Tab</kbd> キーを押すと、キーボードでこのページのリンクにフォーカスを合わせることができます（Mac では、これが機能する前に <kbd>Ctrl</kbd> + <kbd>F7</kbd> を押して<em>フルキーボードアクセス: すべてのコントロール</em>オプションを有効にする必要があるかもしれません）。</li>
+ <li>アクティブなリンクは赤です（リンクをクリックしながらマウスボタンを押したままにしてみてください）。</li>
+</ul>
+
+<p>興味深いことに、これらのデフォルトの装飾は、1990年代半ばのブラウザーの初期の頃のものとほぼ同じです。 これは、ユーザーがこのふるまいを知っており、予期するようになったためです — リンクの装飾が異なると、多くの人が混乱してしまうでしょう。 これは、リンクの装飾を設定してはいけないという意味ではなく、予想されるふるまいから大きく外れてはいけないということです。 少なくとも次のことをするべきです。</p>
+
+<ul>
+ <li>リンクには下線を使用しますが、他のものには使用しません。 リンクに下線を付けたくない場合は、少なくとも他の方法でリンクをハイライトしてください。</li>
+ <li>ホバー/フォーカスしたときに何らかの方法で反応するようにし、アクティブ化したときには少し異なる方法で反応するようにします。</li>
+</ul>
+
+<p>デフォルトの装飾は、次の CSS プロパティを使用してオフにしたり変更したりできます。</p>
+
+<ul>
+ <li>テキストの色は {{cssxref("color")}} です。</li>
+ <li>マウスポインタのスタイルは {{cssxref("cursor")}} です — 非常に良い理由がない限り、これをオフにしないでください。</li>
+ <li>テキストのアウトラインは {{cssxref("outline")}} です（アウトラインは境界線に似ていますが、唯一の違いは、境界線はボックス内のスペースを占めますが、アウトラインは占めずに背景の上にあるだけだということです）。 このアウトラインは、アクセシビリティを向上させるのに役立つので、オフにする前に慎重に検討してください。 フォーカス状態でリンクホバー状態に与えられた装飾を少なくとも2倍にするべきです。</li>
+</ul>
+
+<div class="note">
+<p><strong>注</strong>: リンクの装飾は上記のプロパティに制限されているわけではありません — 好きなプロパティを自由に使用できます。 夢中になりすぎないようにしてください！</p>
+</div>
+
+<h3 id="Styling_some_links" name="Styling_some_links">いくつかのリンクを装飾する</h3>
+
+<p>デフォルトの状態を少し詳しく見てきたので、典型的なリンクの装飾のセットを見てみましょう。</p>
+
+<p>まず始めに、空の規則セットを書き出します。</p>
+
+<pre class="brush: css notranslate">a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}</pre>
+
+<p>リンクのスタイルは互いに重なっているため、この順序は重要です。 例えば、最初の規則の装飾は、それ以降のすべての規則に適用され、リンクがアクティブになっているときは、ホバーもしています。 これらを間違った順序で並べると、物事は適切に機能しません。 順番を覚えておくには、<strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te のようなニーモニックを使用してみてください。</p>
+
+<p>それでは、これを適切に装飾するための情報を追加しましょう。</p>
+
+<pre class="brush: css notranslate">body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}</pre>
+
+<p>CSS を適用するためのサンプル HTML も提供します。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;There are several browsers available, such as &lt;a href="#"&gt;Mozilla
+Firefox&lt;/a&gt;, &lt;a href="#"&gt;Google Chrome&lt;/a&gt;, and
+&lt;a href="#"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>2つをまとめると、この結果が得られます。</p>
+
+<p>{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}</p>
+
+<p>それでは、ここで何をしたでしょうか？ これは確かにデフォルトの装飾とは異なるように見えますが、それでもユーザーに何が起こっているのかを知るための十分な身近な経験を提供します。</p>
+
+<ul>
+ <li>最初の2つの規則は、この説明にとってそれほど興味深いものではありません。</li>
+ <li>3番目の規則は <code>a</code> セレクタを使ってデフォルトのテキストのアンダーラインとフォーカスのアウトライン（とにかくブラウザーによって異なります）を取り除き、各リンクに少量のパディングを追加します — これらすべては後で明らかになります。</li>
+ <li>次に、<code>a:link</code> セレクタと <code>a:visited</code> セレクタを使用して、未訪問リンクと訪問済みリンクに2つのカラーバリエーションを設定して区別します。</li>
+ <li>次の2つの規則では、<code>a:focus</code> と <code>a:hover</code> を使用して、フォーカスされたリンクとホバーされたリンクを異なる背景色に設定し、さらにリンクを目立たせるために下線を使用します。 ここで注意すべき2つの点があります。
+  <ul>
+   <li>下線は {{cssxref("text-decoration")}} ではなく、 {{cssxref("border-bottom")}} を使用して作成されています — 前者よりも後者の方が装飾オプションが優れていて、少し下に描かれるので下線が引かれている単語のディセンダ（例えば、g と y で x より下に出ている部分）を横切ることがないため、一部の人々はこれを好みます。</li>
+   <li>{{cssxref("border-bottom")}} の値は、色を指定せずに <code>1px solid</code> として設定しています。 こうすると、境界線は要素のテキストと同じ色になります。 これは、テキストがそれぞれ異なる色であるような場合に役立ちます。</li>
+  </ul>
+ </li>
+ <li>最後に、<code>a:active</code> は、リンクがアクティブになっている間に反転配色を与えるために使用され、重要なことが起こっていることを明確にします！</li>
+</ul>
+
+<h3 id="Active_learning_Style_your_own_links" name="Active_learning_Style_your_own_links">能動的学習: あなた自身のリンクを装飾する</h3>
+
+<p>この能動的学習セッションでは、空の規則のセットにあなた自身の宣言を追加してリンクを本当にかっこよく見せてください。 想像力を駆使して、ワイルドに。 上記の例と同じように、よりかっこよく機能的なものを思いつくことができると確信しています。</p>
+
+<p>間違えた場合は、<em>Reset</em> ボタンを使用していつでもリセットできます。 本当に立ち往生してしまったら、上に示した例を挿入するために <em>Show solution</em> ボタンを押してください。</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;p&gt;There are several browsers available, such as &lt;a href="#"&gt;Mozilla
+ Firefox&lt;/a&gt;, &lt;a href="#"&gt;Google Chrome&lt;/a&gt;, and
+&lt;a href="#"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;a {
+
+}
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}&lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = 'p {\n  font-size: 1.2rem;\n  font-family: sans-serif;\n  line-height: 1.4;\n}\n\na {\n  outline: none;\n  text-decoration: none;\n  padding: 2px 1px 0;\n}\n\na:link {\n  color: #265301;\n}\n\na:visited {\n  color: #437A16;\n}\n\na:focus {\n  border-bottom: 1px solid;\n  background: #BAE498;\n}\n\na:hover {\n  border-bottom: 1px solid;\n  background: #CDFEAA;\n}\n\na:active {\n  background: #265301;\n  color: #CDFEAA;\n}';
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="Including_icons_on_links" name="Including_icons_on_links">リンクにアイコンを含める</h2>
+
+<p>一般的なやり方は、リンクがどの種類のコンテンツを指しているかに関するより多くの標識を提供するためにリンクにアイコンを含めることです。 外部リンク（他のサイトにつながるリンク）にアイコンを追加する、本当に簡単な例を見てみましょう。 このようなアイコンは、通常、ボックスから出る小さな矢印のように見えます — この例では、<a href="https://icons8.jp/icon/741/external-link">icons8.com からの素晴らしい例</a>を使います。</p>
+
+<p>欲しい効果が得られる HTML と CSS を見てみましょう。 まず、装飾する簡単な HTML です。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;For more information on the weather, visit our &lt;a href="#"&gt;weather page&lt;/a&gt;,
+look at &lt;a href="http://#"&gt;weather on Wikipedia&lt;/a&gt;, or check
+out &lt;a href="http://#"&gt;weather on Extreme Science&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>次に、CSS です。</p>
+
+<pre class="brush: css notranslate">body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}</pre>
+
+<p>{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}</p>
+
+<p>それでは、ここで何が起こっているのでしょうか？ これまで見てきたのと同じ情報なので、CSS の大部分はスキップします。 しかし最後の規則は興味深いです — ここでは前回の記事の<a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">リストアイテムのカスタム行頭記号</a>を処理したのと同じ方法で外部リンクにカスタム背景画像を挿入しています — 今回は個々のプロパティの代わりに {{cssxref("background")}} の一括指定を使用します。 挿入したい画像へのパスを設定し、<code>no-repeat</code> を指定してコピーを1つだけ挿入するようにしてから、テキストコンテンツの右側へ 100%、上から 0 ピクセルの位置を指定します。</p>
+
+<p>また、{{cssxref("background-size")}} を使用して、背景画像を表示するサイズを指定します。 レスポンシブウェブデザインの目的に合わせて、アイコンを大きくしておいて、このようにサイズを変更すると便利です。 ただし、これは IE 9 以降でのみ機能するため、これらの古いブラウザーをサポートする必要がある場合は、画像のサイズを変更しておいて、それをそのまま挿入する必要があります。</p>
+
+<p>最後に、背景画像を表示するスペースを確保するためにリンクに {{cssxref("padding-right")}} を設定しているので、テキストと重なっていません。</p>
+
+<p>最後の一言 — どのように外部リンクだけを選択したのでしょうか？ あなたが<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML リンク</a>を適切に記述しているのなら、外部リンクには絶対 URL のみを使用しているはずです — 自分のサイトの他の部分にリンクするには（最初のリンクのように）相対リンクを使用するほうが効率的です。 したがって、テキスト  "http" は（2番目と3番目のリンクのように）外部リンクにのみ現れ、これを<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクタ</a>で選択できます。 <code>a[href*="http"]</code> は {{htmlelement("a")}} 要素を選択しますが、"http" を含む値を持つ {{htmlattrxref("href","a")}} 属性がある場合に限ります。</p>
+
+<p>それでは、これで全部です — 上の能動的学習セクションを再検討して、この新しいテクニックを試してみてください！</p>
+
+<div class="note">
+<p><strong>注</strong>: <a href="/ja/docs/Learn/CSS/Styling_boxes">背景</a>や<a href="/ja/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">レスポンシブウェブデザイン</a>にまだ慣れていなくても心配しないでください。 これらは他の場所で説明されています。</p>
+</div>
+
+<h2 id="Styling_links_as_buttons" name="Styling_links_as_buttons">ボタンとしてのリンクの装飾</h2>
+
+<p>この記事でこれまでに説明したツールは、他の方法でも使用できます。 例えば、ホバーのような状態は、リンクだけでなく、さまざまな要素を装飾するために使用できます — 段落、リスト項目、またはその他のもののホバー状態を装飾することができます。</p>
+
+<p>さらに、リンクは特定の状況下ではボタンのように見えて、そうふるまうように装飾されているのが普通です — ウェブサイトのナビゲーションメニューは通常リンクを含むリストとしてマークアップれており、ユーザーがサイトの他の部分にアクセスできるようにする一連のコントロールボタンやタブのように簡単にスタイル設定できます。 その方法を探りましょう。</p>
+
+<p>まず、いくつかの HTML です。</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Pizza&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Music&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Wombats&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Finland&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>そして CSS です。</p>
+
+<pre class="brush: css notranslate">body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}</pre>
+
+<p>これにより、次のような結果が得られます。</p>
+
+<p>{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}</p>
+
+<p>最も興味深い部分に焦点を当てて、ここで何が起こっているのかを説明しましょう。</p>
+
+<ul>
+ <li>2番目の規則は、{{htmlelement("ul")}} 要素からデフォルトの {{cssxref("padding")}} を削除し、その幅を外側のコンテナ（この場合は {{htmlelement("body")}}）の 100% になるように設定します。</li>
+ <li>{{htmlelement("li")}} 要素は通常デフォルトでブロックです（復習のために <a href="/ja/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS ボックスの種類</a>を参照してください）。 つまり、要素はそれぞれ自身のラインに配置されます。 この場合、水平方向のリンクのリストを作成しているので、3番目の規則で {{cssxref("display")}} プロパティを <code>inline</code> に設定します。 これにより、リスト項目は互いに同じラインに配置されます — それらはインライン要素のようにふるまいます。</li>
+ <li>{{htmlelement("a")}} 要素を装飾する4番目の規則は、ここで最も複雑です。 ステップバイステップで進みましょう。
+  <ul>
+   <li>前の例と同様に、デフォルトの {{cssxref("text-decoration")}} と {{cssxref("outline")}} をオフにすることから始めます — 見た目を損なうものは欲しくありません。</li>
+   <li>次に、{{cssxref("display")}} を <code>inline-block</code> に設定します — {{htmlelement("a")}} 要素はデフォルトではインラインですが、ブロックのように、要素を自身のラインからこぼさずに、サイズを変更できるようにしたいのです。 <code>inline-block</code> はこれを可能にします。</li>
+   <li>これからサイズを設定します！ {{htmlelement("ul")}} の全幅を埋め、各ボタンの間には少しマージンを残して（ただし、右端には隙間はありません）、5つのボタンを配置します。 それらはすべて同じサイズでなければなりません。 これを行うには、{{cssxref("width")}} を 19.5% に設定し、{{cssxref("margin-right")}} を 0.625% に設定します。この幅の合計が 100.625% になることに気付くでしょう。 これは最後のボタンが <code>&lt;ul&gt;</code> をオーバーフローさせ、次のラインに落ちることになります。 ただし、次の規則を使用してリストの最後の <code>&lt;a&gt;</code> のみを選択し、そこからマージンを削除して、100% に戻します。 これで完了です！</li>
+   <li>最後の3つの宣言は非常に単純で、主に見た目を目的としています。 各リンク内のテキストを中央揃えにし、ボタンの高さ設定するために {{cssxref("line-height")}} を 3 に設定し（テキストを垂直方向に中央揃えする利点もあります）、テキストの色を黒に設定します。</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>注</strong>: HTML 内のリスト項目がすべて一行に記述されていることに気付いたかもしれません。インラインブロック要素間のスペースや改行は、単語間のスペースと同様にページにスペースを作成します。 そして、そのようなスペースは水平ナビゲーションメニューのレイアウトを壊すでしょう。だからスペースを取り除きました。この問題（と、その解決方法）についての詳細は、<a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">インラインブロック要素間のスペースの戦い</a>（英語）で見つけることができます。</p>
+</div>
+
+<h2 id="Summary" name="Summary">あなたのスキルをテストしてみてください!</h2>
+
+<p>あなたはこの記事の最後に到達し、すでに私たちのアクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後の最も重要な情報を覚えていますか？この情報を保持しているかどうかを確認するためのアセスメントがモジュールの最後にあります。<a href="/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a>を参照してください。</p>
+
+<p>この評価ではこのモジュールで説明されているすべての知識をテストしますので、次に進む前に次の記事を読んだほうがいいかもしれません。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>この記事が、リンクについて知っておく必要があるすべての情報を提供してくれることを願っています — 今のところは！ テキストの装飾モジュールの最後の記事では、ウェブサイトでのカスタムフォントの使用方法や、ウェブフォントの使用方法について詳しく説明しています。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li>
+</ul>
diff --git a/files/ja/learn/css/styling_text/styling_lists/index.html b/files/ja/learn/css/styling_text/styling_lists/index.html
new file mode 100644
index 0000000000..0690271d64
--- /dev/null
+++ b/files/ja/learn/css/styling_text/styling_lists/index.html
@@ -0,0 +1,398 @@
+---
+title: リストの装飾
+slug: Learn/CSS/Styling_text/Styling_lists
+tags:
+  - Article
+  - Beginner
+  - CSS
+  - Guide
+  - Styling
+  - Text
+  - bullets
+  - lists
+translation_of: Learn/CSS/Styling_text/Styling_lists
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary"><span class="seoSummary"><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">リスト</a>は他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。 この記事はすべてを説明しています。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>基本的なコンピューターリテラシー、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、CSS の基本（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）、<a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">CSS のテキストとフォントの基礎</a>。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>リストの装飾に関連するベストプラクティスとプロパティに慣れること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A_simple_list_example" name="A_simple_list_example">簡単なリストの例</h2>
+
+<p>はじめに、簡単なリストの例を見てみましょう。 この記事を通して、順序なしリスト、順序付きリスト、そして説明リストを見ていきます。これらはどれも似たような装飾機能持っていますが、リストの種類に特有のものもあります。 <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">装飾していない例</a>は Github にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">ソースコード</a>もチェックしてください）。</p>
+
+<p>そのリストの例の HTML はこんな感じです。</p>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Shopping (unordered) list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Hummus&lt;/li&gt;
+  &lt;li&gt;Pita&lt;/li&gt;
+  &lt;li&gt;Green salad&lt;/li&gt;
+  &lt;li&gt;Halloumi&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;h2&gt;Recipe (ordered) list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;ol&gt;
+  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h2&gt;Ingredient description list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;dl&gt;
+  &lt;dt&gt;Hummus&lt;/dt&gt;
+  &lt;dd&gt;A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.&lt;/dd&gt;
+  &lt;dt&gt;Pita&lt;/dt&gt;
+  &lt;dd&gt;A soft, slightly leavened flatbread.&lt;/dd&gt;
+  &lt;dt&gt;Halloumi&lt;/dt&gt;
+  &lt;dd&gt;A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.&lt;/dd&gt;
+  &lt;dt&gt;Green salad&lt;/dt&gt;
+  &lt;dd&gt;That green healthy stuff that many of us just use to garnish kebabs.&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+
+<p>ここで実際の例に行き、<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発者ツール</a>を使用してリスト要素を調べると、次のようないくつかの装飾のデフォルト設定に気付くでしょう。</p>
+
+<ul>
+ <li>{{htmlelement("ul")}} 要素と {{htmlelement("ol")}} 要素の上下の {{cssxref("margin")}} は <code>16px</code>（<code>1em</code>）、{{cssxref("padding-left")}} は <code>40px</code>（<code>2.5em</code>）です。</li>
+ <li>リスト項目（{{htmlelement("li")}} 要素）には、間隔の設定に関するデフォルトはありません。</li>
+ <li>{{htmlelement("dl")}} 要素の上下の {{cssxref("margin")}} は <code>16px</code>（<code>1em</code>）ですが、パディングの設定はありません。</li>
+ <li>{{htmlelement("dd")}} 要素の {{cssxref("margin-left")}} は <code>40px</code>（<code>2.5em</code>）です。</li>
+ <li>参照用に含めた {{htmlelement("p")}} 要素には、さまざまな種類のリストと同じ <code>16px</code>（<code>1em</code>）の上下の {{cssxref("margin")}} があります。</li>
+</ul>
+
+<h2 id="Handling_list_spacing" name="Handling_list_spacing">リストの間隔の取り扱い</h2>
+
+<p>リストを装飾するときは、（段落や画像などの）周囲の要素と同じ垂直方向の間隔（バーティカルリズム（vertical rhythm）とも呼ばれる）と、互いに同じ水平方向の間隔を維持するように装飾を調整する必要があります（Github で<a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">完成した装飾した例</a>を見ることができ、<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">ソースコード</a>も見つけることができます）。</p>
+
+<p>テキストの装飾と間隔調整に使用する CSS は次のとおりです。</p>
+
+<pre class="brush: css notranslate">/* General styles */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Description list styles */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}</pre>
+
+<ul>
+ <li>規則1はサイト全体のフォントと <code>10px</code> の基準フォントサイズを設定します。 これらはページ上のすべてのものに継承されます。</li>
+ <li>規則2と3では、見出し、さまざまなリストの種類（リスト要素の子はこれらを継承）、および段落に相対フォントサイズを設定します。 つまり、各段落とリストのフォントサイズ、上下の間隔は同じになり、バーティカルリズムを一定に保つのに役立ちます。</li>
+ <li>規則4では、段落とリスト項目に同じ {{cssxref("line-height")}} を設定しているため、段落と各個々のリスト項目のラインの間隔は同じになります。 これは、バーティカルリズムを一定に保つのにも役立ちます。</li>
+ <li>説明リストには規則5と6が適用されます。 説明リストの用語と説明には、段落とリスト項目の場合と同じ <code>line-height</code> を設定します。 繰り返しますが、一貫性があることは良いことです！ また、説明する用語は太字にして、視覚的に目立つようにしています。<span id="cke_bm_126E" style="display: none;"> </span></li>
+</ul>
+
+<h2 id="List-specific_styles" name="List-specific_styles">リスト固有の装飾</h2>
+
+<p>リストの一般的な間隔調整テクニックを見てきました。 次に、リスト固有のプロパティを調べてみましょう。 最初に知っておくべき3つのプロパティがあり、それらは {{htmlelement("ul")}} や {{htmlelement("ol")}} 要素に設定できます。</p>
+
+<ul>
+ <li>{{cssxref("list-style-type")}}: リストに使用する行頭記号の種類を設定します。 例えば、順序なしリストの場合は正方形や丸の行頭記号、順序付きリストの場合は数字、文字、ローマ数字などです。</li>
+ <li>{{cssxref("list-style-position")}}: 行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。</li>
+ <li>{{cssxref("list-style-image")}}: 行頭記号に簡単な正方形や円ではなく、カスタム画像を使うことができます。</li>
+</ul>
+
+<h3 id="Bullet_styles" name="Bullet_styles">行頭記号の装飾</h3>
+
+<p>前述のように、{{cssxref("list-style-type")}} プロパティを使用して、行頭記号（bullet point）に使用する行頭記号（bullet）の種類を設定できます。 この例では、順序付きリストで大文字のローマ数字を使用するように設定しています。</p>
+
+<pre class="brush: css notranslate">ol {
+  list-style-type: upper-roman;
+}</pre>
+
+<p>これにより、次のようになります。</p>
+
+<p><img alt="行頭記号がリスト項目テキストの外側に表示されるように設定された順序付きリスト。" src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p>
+
+<p>{{cssxref("list-style-type")}} のリファレンスページをチェックすることで、もっとたくさんのオプションを見つけることができます。</p>
+
+<h3 id="Bullet_position" name="Bullet_position">行頭記号の位置</h3>
+
+<p>{{cssxref("list-style-position")}} プロパティは、行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。 デフォルト値は <code>outside</code> です。 これは、上で見たように、行頭記号をリスト項目の外側に配置します。</p>
+
+<p>値を <code>inside</code> に設定すると、行頭記号をラインの内側に配置します。</p>
+
+<pre class="brush: css notranslate">ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}</pre>
+
+<p><img alt="行頭記号がリスト項目のテキストの内側に表示されるように設定された順序付きリスト。" src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p>
+
+<h3 id="Using_a_custom_bullet_image" name="Using_a_custom_bullet_image">カスタム行頭記号画像の使用</h3>
+
+<p>{{cssxref("list-style-image")}} プロパティを使用すると、行頭記号にカスタム画像を使用できます。 構文は次のようにとても簡単です。</p>
+
+<pre class="brush: css notranslate">ul {
+  list-style-image: url(star.svg);
+}</pre>
+
+<p>ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 {{cssxref("background")}} プロパティファミリーを使用するほうが得策です。 これについては、<a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>モジュールで詳しく説明します。 今のところ、これは味見です！</p>
+
+<p>完成した例では、（既に上で見たものの上に）次のように順序なしリストを装飾しました。</p>
+
+<pre class="brush: css notranslate">ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}</pre>
+
+<p>ここでは次のことを行いました。</p>
+
+<ul>
+ <li> {{htmlelement("ul")}} の {{cssxref("padding-left")}} をデフォルトの <code>40px</code> から <code>20px</code> に減らし、リスト項目にも同じ量を設定します。 これにより、リスト項目は全体的にはまだ順序リスト項目や説明リストの説明文が並んでいますが、リスト項目には背景画像が入るように多少のパディングが入っています。これをしないと、背景画像がリスト項目のテキストと重なってしまい、見た目がごちゃごちゃしてしまいます。</li>
+ <li>デフォルトで行頭記号が表示されないように、{{cssxref("list-style-type")}} を <code>none</code> に設定します。 代わりに、行頭記号を処理するために {{cssxref("background")}} プロパティを使用します。</li>
+ <li>各順序なしリスト項目に行頭記号を挿入しました。 関連するプロパティは次のとおりです。
+  <ul>
+   <li>{{cssxref("background-image")}}: 行頭記号として使用する画像ファイルへのパスを参照します。</li>
+   <li>{{cssxref("background-position")}}: これは選択した要素の背景のどこに画像を表示するかを定義します。 この場合は <code>0 0</code> としています。 つまり、各リスト項目の左上に行頭記号が表示されます。</li>
+   <li>{{cssxref("background-size")}}: 背景画像のサイズを設定します。 行頭記号のサイズをリスト項目と同じサイズ（または、ごくわずかに大きいか小さい）にすることをお勧めします。 サイズは <code>1.6rem</code>（<code>16px</code>）を使用しています。 これは、行頭記号を内部に配置できる <code>20px</code> のパディングに非常によく合っています — 行頭記号とリスト項目のテキストの間に 16px + 4px のスペースがあるとうまくいきます。</li>
+   <li>{{cssxref("background-repeat")}}: デフォルトでは、背景画像は利用可能な背景スペースを埋めつくすまで繰り返します。 それぞれの場合に画像のコピーを1つだけ挿入したいので、これを <code>no-repeat</code> の値に設定します。</li>
+  </ul>
+ </li>
+</ul>
+
+<p>これにより、次のような結果が得られます。</p>
+
+<p><img alt="行頭記号が小さな星の画像として設定された順序なしリスト" src="https://mdn.mozillademos.org/files/16226/list_formatting.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p>
+
+<h3 id="list-style_shorthand" name="list-style_shorthand">list-style 一括指定</h3>
+
+<p>上記の3つのプロパティはすべて、単一の一括指定プロパティ {{cssxref("list-style")}} を使用して設定できます。 例えば、次の CSS を、</p>
+
+<pre class="brush: css notranslate">ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}</pre>
+
+<p>これに置き換えることができます。</p>
+
+<pre class="brush: css notranslate">ul {
+  list-style: square url(example.png) inside;
+}</pre>
+
+<p>値は任意の順序でリストすることができ、1つ、2つ、または3つすべてを使用できます（含まれていないプロパティーに使用されるデフォルト値は <code>disc</code>、<code>none</code>、<code>outside</code> です）。 <code>type</code> と <code>image</code> の両方が指定されている場合、画像が何らかの理由でロードできない場合に、<code>type</code> を代替として使用します。</p>
+
+<h2 id="Controlling_list_counting" name="Controlling_list_counting">リストの数え方の制御</h2>
+
+<p>場合によっては、順序付きリストで異なる方法で数えたいことがあります — 例えば 1 以外の数から始めたり、逆方向に数えたり、1 以上のステップで数えたりです。 HTML と CSS には、ここで役立つツールがいくつかあります。</p>
+
+<h3 id="start" name="start">start</h3>
+
+<p>{{htmlattrxref("start","ol")}} 属性を使用すると、1 以外の数からリストを数え始めます。 次の例では、</p>
+
+<pre class="brush: html notranslate">&lt;ol start="4"&gt;
+  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>この出力を与えます。</p>
+
+<p>{{ EmbedLiveSample('start', '100%', 150) }}</p>
+
+<h3 id="reversed" name="reversed">reversed</h3>
+
+<p>{{htmlattrxref("reversed","ol")}} 属性はリストのカウントアップではなくカウントダウンを開始します。 次の例では、</p>
+
+<pre class="brush: html notranslate">&lt;ol start="4" reversed&gt;
+  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>この出力を与えます。</p>
+
+<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p>
+
+<div class="note">
+<p><strong>注</strong>: 逆方向のリストに <code>start</code> 属性の値より多くのリスト項目がある場合、カウントは引き続きゼロになり、その後負の値になります。</p>
+</div>
+
+<h3 id="value" name="value">value</h3>
+
+<p>{{htmlattrxref("value","li")}} 属性を使用すると、リスト項目を特定の数値に設定できます。 次の例では、</p>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li value="2"&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li value="4"&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li value="6"&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li value="8"&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>この出力を与えます。</p>
+
+<p>{{ EmbedLiveSample('value', '100%', 150) }}</p>
+
+<div class="note">
+<p>注: 非数値の {{cssxref("list-style-type")}} を使用している場合でも、<code>value</code> 属性に同等の数値を使用する必要があります。</p>
+</div>
+
+<h2 id="Active_learning_Styling_a_nested_list" name="Active_learning_Styling_a_nested_list">能動的学習: ネストしたリストの装飾</h2>
+
+<p>この能動的学習セッションでは、上で学んだことを取り入れて、ネストしたリストを装飾してください。 HTML を提供してあるので、次のことを行います。</p>
+
+<ol>
+ <li>順序なしリストに正方形の行頭記号を付けます。</li>
+ <li>順序なしリスト項目と順序付きリスト項目のフォントサイズの 1.5 のラインの高さを指定します。</li>
+ <li>順序付きリストに小文字のアルファベットの行頭記号を付けます。</li>
+ <li>行頭記号の種類、間隔、その他見つけられるものは何でも試して、好きなだけリストの例を試してみてください。</li>
+</ol>
+
+<p>間違えた場合は、<em>Reset</em> ボタンを使用していつでもリセットできます。 本当に立ち往生したら、答えを見るために <em>Show solution</em> ボタンを押してください。</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;ul&gt;
+  &lt;li&gt;First, light the candle.&lt;/li&gt;
+  &lt;li&gt;Next, open the box.&lt;/li&gt;
+  &lt;li&gt;Finally, place the three magic items in the box, in this exact order, to complete the spell:
+    &lt;ol&gt;
+      &lt;li&gt;The book of spells&lt;/li&gt;
+      &lt;li&gt;The shiny rod&lt;/li&gt;
+      &lt;li&gt;The goblin statue&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = 'ul {\n  list-style-type: square;\n}\n\nul li, ol li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\n}';
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<p>CSS カウンターは、リストの数え方と装飾をカスタマイズするための高度なツールを提供しますが、非常に複雑です。 あなたが自身を伸ばしたいと思うならば、これらを調べることを勧めます。 次を見てください。</p>
+
+<ul>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+</ul>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>関連するいくつかの基本的な原則と特定のプロパティを知っていれば、リストの装飾のこつは比較的簡単です。 次の記事では、リンクの装飾テクニックについて説明します。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p>
+
+
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li>
+</ul>
diff --git a/files/ja/learn/css/styling_text/typesetting_a_homepage/index.html b/files/ja/learn/css/styling_text/typesetting_a_homepage/index.html
new file mode 100644
index 0000000000..7fb8d97e42
--- /dev/null
+++ b/files/ja/learn/css/styling_text/typesetting_a_homepage/index.html
@@ -0,0 +1,126 @@
+---
+title: コミュニティスクールのホームページの組版
+slug: Learn/CSS/Styling_text/Typesetting_a_homepage
+tags:
+  - Assessment
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Link
+  - Styling text
+  - font
+  - list
+  - web font
+translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary"><span class="seoSummary">この評価では、コミュニティスクールのホームページ用にテキストを装飾することで、このモジュール全体でカバーしてきたすべてのテキスト装飾テクニックについての理解をテストします。 途中で楽しい時間があるかもしれません。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>CSS テキスト装飾テクニックの理解をテストすること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Starting_point" name="Starting_point">出発点</h2>
+
+<p>この評価を開始するには、次のことが必要です。</p>
+
+<ul>
+ <li>練習用の <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> ファイルと <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> ファイルと、提供されている<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">外部リンクアイコン</a>を入手してください。</li>
+ <li>ローカルコンピュータにそれらのコピーを作成します。</li>
+</ul>
+
+<div class="note">
+<p><strong>注</strong>: あるいは、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力し、<a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">この URL</a> を使用して背景画像を指定することができます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <code>&lt;style&gt;</code> 要素に自由に配置してください。</p>
+</div>
+
+<h2 id="Project_brief" name="Project_brief">プロジェクトの概要</h2>
+
+<p>架空のコミュニティカレッジのホームページ用の生の HTML と、ページを2列のレイアウトに装飾し、その他の基本的な装飾をする CSS が提供されています。 CSS ファイルの最後にあるコメントの下に CSS の追加部分を書いて、あなたが行った部分に簡単に印を付けることができるようにします。 一部のセレクタがくどくても心配しないで、この場合は見逃してください。</p>
+
+<p>フォント</p>
+
+<ul>
+ <li>まずはじめに、いくつかの自由に使えるフォントをダウンロードしてください。 これはカレッジですから、フォントはかなり真面目で、形式的で、信頼できる感じをページに与えるために選ばれるべきです — 一般的なテキスト本文のためのサイト全体の serif フォントに、見出しのための sans-serif または slab serif を組み合わせるといいかもしれません。</li>
+ <li>適切なサービスを使用して、これら2つのフォント用の bulletproof <code>@font-face</code> コードを生成してください。</li>
+ <li>本文フォントをページ全体に適用し、見出しフォントを見出しに適用します。</li>
+</ul>
+
+<p>一般的なテキスト装飾</p>
+
+<ul>
+ <li>サイト全体の <code>font-size </code>を <code>10px</code> にします。</li>
+ <li>見出しや他の要素タイプには、適切な相対単位を使用して定義された適切な <code>font-size</code> を与えます。</li>
+ <li>本文に適切な <code>line-height</code> を与えます。</li>
+ <li>トップレベルの見出しをページの中央に配置します。</li>
+ <li>見出しをあまりにも押しつぶしすぎないようにし、文字が少し呼吸できるようにするために、見出しに少し <code>letter-spacing</code> を与えます。</li>
+ <li>必要に応じて、本文に <code>letter-spacing</code> と <code>word-spacing</code> を与えます。</li>
+ <li><code>&lt;section&gt;</code> の各見出しの後の最初の段落に、<code>20px</code> で、少し <code>text-indent</code> を与えます。</li>
+</ul>
+
+<p>リンク</p>
+
+<ul>
+ <li>ページの上部と下部にある水平バーの色に合わせて、リンクに訪問、フォーカス、ホバーの状態を設定します。</li>
+ <li>デフォルトでリンクに下線が引かれますが、ホバーするかフォーカスを合わせると下線が消えるようにします。</li>
+ <li>ページ上のすべてのリンクからデフォルトのフォーカスアウトラインを取り除きます。</li>
+ <li>目立つようにアクティブな状態に著しく異なるスタイルを与えますが、それでも全体的なページデザインに収まるようにします。</li>
+ <li>外部リンクの隣に外部リンクアイコンが挿入されるようにします。</li>
+</ul>
+
+<p>リスト</p>
+
+<ul>
+ <li>リストとリスト項目の間隔が、ページ全体のスタイルとうまく一致するようにしてください。 各リスト項目は段落行と同じ <code>line-height</code> を持ち、各リストの上下の段落の間隔は同じです。</li>
+ <li>リスト項目に、ページのデザインにふさわしい素敵な行頭記号を付けてください。 カスタムの行頭記号画像を選択するか、それ以外のものを選択するかは、あなた次第です。</li>
+</ul>
+
+<p>ナビゲーションメニュー</p>
+
+<ul>
+ <li>ページのルックアンドフィールが適切になるようにナビゲーションメニューを装飾します。</li>
+</ul>
+
+<h2 id="Hints_and_tips" name="Hints_and_tips">ヒントとコツ</h2>
+
+<ul>
+ <li>この演習では、HTML を編集する必要はまったくありません。</li>
+ <li>ナビゲーションメニューを必ずしもボタンのように見せる必要はありませんが、ページの横に愚かに見えないように少し高くする必要があります。 また、これを垂直ナビゲーションメニューにする必要があることも忘れないでください。</li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>次のスクリーンショットは、完成したデザインの外観の例です。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p>
+
+<h2 id="Assessment" name="Assessment">評価</h2>
+
+<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683">この演習についてのディスカッションスレッド</a>や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！</p>
+
+<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ja/learn/css/styling_text/ウェブフォント/index.html b/files/ja/learn/css/styling_text/ウェブフォント/index.html
new file mode 100644
index 0000000000..d96b610029
--- /dev/null
+++ b/files/ja/learn/css/styling_text/ウェブフォント/index.html
@@ -0,0 +1,219 @@
+---
+title: ウェブフォント
+slug: Learn/CSS/Styling_text/ウェブフォント
+tags:
+  - '@font-face'
+  - Article
+  - Beginner
+  - CSS
+  - CSS Fonts
+  - Fonts
+  - Guide
+  - Learn
+  - Web Development
+  - Web Fonts Article
+  - Web fonts documentation
+  - font-family
+  - web fonts
+translation_of: Learn/CSS/Styling_text/Web_fonts
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary"><span class="seoSummary">このモジュールの最初の記事では、フォントとテキストの装飾に使用できる基本的な CSS 機能について調べました。 この記事では、ウェブフォントの詳細を調べながら、さらに進みます — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様なカスタムテキストの装飾を可能にします。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>基本的なコンピューターリテラシー、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、CSS の基本（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）、<a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">CSS のテキストとフォントの基礎</a>。</td>
+  </tr>
+  <tr>
+   <th scope="row">学習目標:</th>
+   <td>サードパーティのサービスを使用するか、独自のコードを作成することによって、ウェブフォントをウェブページに適用する方法を習得する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Font_families_recap" name="Font_families_recap">フォントファミリーの復習</h2>
+
+<p><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a>で見たように、HTML に適用されるフォントは {{cssxref("font-family")}} プロパティを使って制御できます。 これは1つ以上のフォントファミリー名を取り、ブラウザーはそれが実行されているシステムで利用可能なフォントを見つけるまでリストを順にたどります。</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}</pre>
+
+<p>このシステムはうまく機能しますが、伝統的にウェブ開発者のフォント選択は限られていました。 一般的なすべてのシステムで利用できることを保証できるフォントは、ほんの一握りです — いわゆる<a href="/ja/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">ウェブセーフフォント</a>です。 フォントスタックを使用して希望するフォントを指定し、その後にウェブセーフの代替フォントを指定してからデフォルトのシステムフォントを指定することができますが、これはデザインが各フォントなどでうまく見えることを確認するためにテストの面でオーバーヘッドを追加します。（訳注：日本語フォントを英語フォントの後、デフォルトフォントの前に指定すれば、英語部分だけ英語フォントにすることができます。 つまり、英語フォントだけの指定であっても、日本語環境なら、日本語には日本語のデフォルトフォントが使われるということです。 中国語環境なら、中国語の漢字が使われることでしょう。）</p>
+
+<h2 id="Web_fonts" name="Web_fonts">ウェブフォント</h2>
+
+<p>しかし、IE バージョン 6 でも非常にうまく動作する代替手段があります。 ウェブフォントは、ウェブサイトにアクセスした時に一緒にダウンロードするフォントファイルを指定できる CSS の機能です。 つまり、ウェブフォントをサポートするブラウザーであれば、指定したフォントをそのまま使用できることを意味しています。 すばらしい！ 必要な構文は次のようになります。</p>
+
+<p>まず最初に、CSS の先頭に {{cssxref("@font-face")}} ブロックがあり、ダウンロードするフォントファイルを指定します。</p>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: "myFont";
+  src: url("myFont.woff");
+}</pre>
+
+<p>これより下では、<code>@font-face</code> の中で指定されているフォントファミリー名を使ってカスタムフォントを通常通り好きなものに適用できます。</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}</pre>
+
+<p>構文はこれより少し複雑になります。 以下で詳しく説明します。</p>
+
+<p>ウェブフォントに関して留意すべき重要な点が2つあります。</p>
+
+<ol>
+ <li>ブラウザーはさまざまなフォント形式をサポートしているため、適切なクロスブラウザーをサポートするには複数のフォント形式が必要になります。 例えば、最近のほとんどのブラウザーは最も効率的な形式である WOFF / WOFF2（Web Open Font Format バージョン 1 および 2）をサポートしていますが、古いバージョンの IE は EOT（Embedded Open Type）フォントしかサポートしていないし、古いバージョンの iPhone や Android のブラウザーをサポートするには、SVG 版のフォントを含める必要があるかもしれません。 必要なコードの生成方法を下の方で示します。</li>
+ <li>フォントは一般に自由に使用できません。 それらの代金を払わなければなりません、そして/またはコードの中で（またはサイトで）フォント作成者のクレジット表示のような他のライセンス条件に従わなければなりません。 フォントを盗み、適切なクレジットを与えずに使用するべきではありません。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: テクノロジーとしてのウェブフォントは、バージョン 4 以降の Internet Explorer でサポートされています！</p>
+</div>
+
+<h2 id="Active_learning_A_web_font_example" name="Active_learning_A_web_font_example">能動的学習: ウェブフォントの例</h2>
+
+<p>この点を考慮して、最初の原則から基本的なウェブフォントの例を作り上げましょう。 埋め込まれたライブの例を使用してこれをデモすることは困難なので、代わりに、以下のセクションで詳述されている手順に従うことでプロセスを理解してください。</p>
+
+<p>コードを追加するための出発点として、<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> ファイルと <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> ファイルを使用する必要があります（<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">ライブの例</a>を見る）。 ここで、これらのファイルのコピーをコンピュータの新しいディレクトリに作成します。 <code>web-font-start.css</code> ファイルには、この例の基本的なレイアウトと組版を処理するための最小限の CSS がいくつかあります。</p>
+
+<h3 id="Finding_fonts" name="Finding_fonts">フォントを探す</h3>
+
+<p>この例では、見出し用と本文テキスト用の2つのウェブフォントを使用します。 まず最初に、フォントを含むフォントファイルを見つける必要があります。 フォントはフォント製造元によって作成され、さまざまなファイル形式で保存されます。 フォントを入手できるサイトは、一般的に3種類あります。</p>
+
+<ul>
+ <li>無料フォント配布会社: これは無料フォントをダウンロードできるサイトです（フォント作成者へのクレジット表示などのライセンス条件が他にあるかもしれません）。 例としては、<a href="https://www.fontsquirrel.com/">Font Squirrel</a>、<a href="http://www.dafont.com/">dafont</a>、<a href="https://everythingfonts.com/">Everything Fonts</a> などがあります。</li>
+ <li>有料フォント配布会社: これは、<a href="http://www.fonts.com/">fonts.com</a> や <a href="http://www.myfonts.com/">myfonts.com</a> など、フォントを有料で利用できるようにするサイトです。 <a href="https://www.linotype.com/">Linotype</a>、<a href="http://www.monotype.com">Monotype</a>、<a href="http://www.exljbris.com/">Exljbris</a> などのフォント製造元から直接フォントを購入することもできます。</li>
+ <li>オンラインフォントサービス: これはあなたに代わってフォントを保存し提供するサイトで、全体のプロセスをより簡単にします。 詳細については、{{anch("Using an online font service","オンラインフォントサービスの使用")}}のセクションを参照してください。</li>
+</ul>
+
+<p>いくつかのフォントを見つけましょう！ <a href="https://www.fontsquirrel.com/">Font Squirrel</a> に行き、2つのフォントを選択します — 見出しには素敵で面白いフォント（多分素敵な display や slab serif フォント）、段落にはやや派手で読みやすいフォントです。 各フォントが見つかったら、download（ダウンロード）ボタンを押して、先ほど保存した HTML ファイルと CSS ファイルと同じディレクトリ内にファイルを保存します。 TTF（True Type Fonts）か OTF（Open Type Fonts）かは関係ありません。</p>
+
+<p>いずれの場合も、フォントパッケージを解凍します（ウェブフォントは通常、フォントファイルとライセンス情報を含む ZIP ファイルで配布されます）。 パッケージの中に複数のフォントファイルを見つけるかもしれません — 例えば、thin（細字）、medium（中字）、bold（太字）、italic（イタリック）、thin italic（細字イタリック）など、利用可能なさまざまな異形（variant）を持つファミリーとして配布されるフォントがあります。 この例では、それぞれの選択に対して 1つのフォントファイルを使用することを考慮してください。</p>
+
+<div class="note">
+<p><strong>注</strong>: 右側の列の "Find fonts"（フォントの検索）セクションで、さまざまな tags（タグ）や classifications（分類）をクリックして表示された選択肢を絞り込むことができます。 （訳注：残念なことに現在のところ日本語フォントはないようです。）</p>
+</div>
+
+<h3 id="Generating_the_required_code" name="Generating_the_required_code">必要なコードの生成</h3>
+
+<p>今、必要なコード（そしてフォント形式）を生成する必要があります。 フォントごとに、次の手順に従います。</p>
+
+<ol>
+ <li>商用やウェブのプロジェクトでこれを使用する場合は、ライセンス要件をすべて満たしていることを確認してください。</li>
+ <li>Font Squirrel の <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a>（ウェブフォントジェネレータ）に行きます。</li>
+ <li><em>Upload Fonts</em>（フォントのアップロード）ボタンを使って2つのフォントファイルをアップロードします。</li>
+ <li>"Yes, the fonts I'm uploading are legally eligible for web embedding." （はい、アップロードしたフォントはウェブの埋め込みに法的に適格です。）というチェックボックスをオンにします。</li>
+ <li><em>Download your kit</em>（キットをダウンロードする）をクリックします。</li>
+</ol>
+
+<p>ジェネレータの処理が完了したら、ZIP ファイルをダウンロードする必要があります — それを HTML と CSS と同じディレクトリに保存してください。</p>
+
+<h3 id="Implementing_the_code_in_your_demo" name="Implementing_the_code_in_your_demo">デモでのコードの実装</h3>
+
+<p>この時点で、生成したばかりのウェブフォントのキットを解凍します。 解凍したディレクトリ内には、3つの便利なアイテムがあります。</p>
+
+<ul>
+ <li>各フォントの複数のバージョン: （例えば、<code>.ttf</code>、<code>.woff</code>、<code>.woff2</code> などで、ブラウザーのサポート要件が変わると、提供される正確なフォントも次第に更新されます）。 上記のように、クロスブラウザーをサポートするには複数のフォントが必要です — これが、必要なものがすべて揃っていることを確認するための Font Squirrel の方法です。</li>
+ <li>各フォントのデモ HTML ファイル: ブラウザーにこれらをロードして、フォントがさまざまな使用状況でどのように見えるかを確認します。</li>
+ <li><code>stylesheet.css</code> ファイル: 生成された <code>@font-face</code> コードが含まれています。</li>
+</ul>
+
+<p>デモにこれらのフォントを実装するには、次の手順に従います。</p>
+
+<ol>
+ <li>解凍したディレクトリの名前を <code>fonts</code> のように簡単でシンプルなものに変更します。</li>
+ <li><code>stylesheet.css</code> ファイルを開き、その中に含まれている両方の <code>@font-face</code> ブロックを <code>web-font-start.css</code> ファイルにコピーします — フォントはサイトで使用する前にインポートする必要があるため、CSS のどれよりも前の一番上に配置する必要があります。</li>
+ <li>各 <code>url()</code> 関数は CSS にインポートしたいフォントファイルを指しています — ファイルへのパスが正しいことを確認する必要があるので、各パスの先頭に <code>fonts/</code> を追加します（必要に応じて調整します）。</li>
+ <li>これで、ウェブセーフフォントやデフォルトのシステムフォントと同じように、これらのフォントをフォントスタックで使用できます。 例えば、
+  <pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre>
+ </li>
+</ol>
+
+<p>いくつかの素敵なフォントが実装されたデモページができあがるはずです。異なるフォントは異なるサイズで作成されるため、サイズや間隔などを調整して、ルック・アンド・フィールを調整する必要があります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p><strong>注</strong>: これがうまくいかない場合は、あなたのバージョンと完成したファイルとを比較してみてください — <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> を見てください（<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">完成した例をライブで実行してください</a>）。</p>
+</div>
+
+<h2 id="Using_an_online_font_service" name="Using_an_online_font_service">オンラインフォントサービスの使用</h2>
+
+<p>オンラインフォントサービスは一般的にあなたのためにフォントを保存して提供するので、<code>@font-face</code> コードを書くことを心配する必要はなく、一般的にサイトに1行か2行の単純なコードを挿入するだけですべてがうまくいきます。例としては、<a href="https://fonts.adobe.com/">Adobe Fonts</a> や <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a> などが挙げられます。これらのサービスのほとんどはサブスクリプションベースですが、特に迅速なテスト作業やデモを書くのに便利な無料のサービスである <a href="https://www.google.com/fonts">Google Fonts</a> は例外です。</p>
+
+<p>これらのサービスのほとんどは使いやすいので、詳細には説明しません。 Google のフォントを簡単に見てみましょう。 そうすれば、アイデアを得ることができます。 ここでも、出発点として <code>web-font-start.html</code> と <code>web-font-start.css</code> のコピーを使用してください。</p>
+
+<ol>
+ <li><a href="https://www.google.com/fonts">Google Fonts</a> に行きます。</li>
+ <li>左側のフィルタを使って、選択したいフォントの種類を表示し、好きなフォントをいくつか選択します。 （訳注：Languages（言語）に Japanese（日本語）を選んでも、中国語のフォントも表示されます。 フォントによっては、存在しない文字があるようなので注意しましょう。 日本語環境なら文字は表示されますが、書体の統一感はなくなってしまいます。）</li>
+ <li>フォントファミリーを選択するには、その横にある ⊕ ボタンを押します。</li>
+ <li>フォントファミリーを選択したら、ページ下部の <em>[選択数] Families Selected</em> バーを押します。</li>
+ <li>表示された画面で、最初に表示された HTML コードの行をコピーして、それを HTML ファイルの先頭に貼り付ける必要があります。 フォントを CSS で使用する前にインポートされるように、既存の {{htmlelement("link")}} 要素の上に配置します。 （訳注：{{cssxref("@import")}} を選択すれば、CSS ファイルに貼り付けることもできます。）</li>
+ <li>次に、カスタムフォントを HTML に適用するために、リストされている CSS 宣言を必要に応じて CSS にコピーする必要があります。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: あなたの作品を私たちの作品と照合する必要がある場合は、完成版を <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> および <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a> で見ることができます（それを<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">ライブで見る</a>）。</p>
+</div>
+
+<h2 id="font-face_in_more_detail" name="font-face_in_more_detail">@font-face の詳細</h2>
+
+<p>Font Squirrel によって生成された <code>@font-face</code> 構文を調べてみましょう。 これは、ブロックの1つがどのように見えるかです。</p>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}</pre>
+
+<p><code>@font-face</code> が普及し始めた頃の Paul Irish による投稿（<a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>）の後、これは "bulletproof  @font-face 構文" と呼ばれています。 それを見て、それが何をするのか見てみましょう。</p>
+
+<ul>
+ <li><code>font-family</code>: この行はフォントとして参照したい名前を指定します。 CSS を通して一貫してそれを使う限り、好きなものにすることができます。</li>
+ <li><code>src</code>: これらの行は CSS にインポートされるフォントファイルへのパス（<code>url</code> 部分）と各フォントファイルの形式（<code>format</code> 部分）を指定します。 どの場合も後者の部分はオプションですが、ブラウザーが使用できるフォントをすばやく見つけることができるため、宣言すると有益です。 複数の宣言をカンマで区切ってリストすることができます — ブラウザーはそれらを検索し、最初に理解できるとわかったものを使用します — 従って、先に WOFF2 のようなより新しくより良い形式を置き、そして後に TTF のようなより古くあまり良くない形式を置くのが最善です。 これに対する1つの例外は EOT フォントです — それらは、古いバージョンの IE が実際にフォントを使用できない場合でも、最初に見つかったものを使用しようとするので、古いバージョンの IE のいくつかのバグを修正するために最初に配置されています。</li>
+ <li>{{cssxref("font-weight")}} / {{cssxref("font-style")}}: これらの行はフォントの太さ、およびイタリックかどうかを指定します。 同じフォントの複数の太さをインポートする場合は、フォントファミリーのすべての異なるメンバーに異なる名前を付けるのではなく、それらの太さ/スタイルを指定して、異なる値の {{cssxref("font-weight")}} / {{cssxref("font-style")}} を使用することができます。 <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face のこつ: CSS をシンプルに保つために font-weight と font-style を定義する</a>（英語）によって Roger Johansson が何をすべきかをより詳細に示しています。</li>
+</ul>
+
+<div class="note">
+<p><strong>注</strong>: ウェブフォントに特定の {{cssxref("font-variant")}} および {{cssxref("font-stretch")}} の値を指定することもできます。 新しいブラウザーでは、<code><a href="/ja/docs/Web/CSS/@font-face/unicode-range">unicode-range</a></code> の値でウェブフォントで使用する特定の文字範囲を指定することもできます — サポートしているブラウザーでは、指定された文字のみがダウンロードされ、不要なダウンロードを節約できます。 Drew McLellan による <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">unicode-range を使ったカスタムフォントスタックの作成</a>（英語）は、これをどのように利用するかについていくつかの役に立つアイデアを提供します。</p>
+</div>
+
+<h2 id="Summary" name="Summary">可変フォント</h2>
+
+<p>これは、幅、太さ、スタイルごとに別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを一つのファイルに組み込むことができるフォントです。これらのフォントは初心者向けのコースにしてはやや高度なものですが、もしあなたが自分自身を伸ばして調べたいと思っているのであれば、可変フォントガイドを読んでみてください。</p>
+
+<p>ブラウザでは、可変フォントと呼ばれる新しいフォントテクノロジーがあります。これらは、幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを1つのファイルに組み込むことができるフォントです。 初心者コースでは多少上級ですが、調べてみたい場合は、<a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable フォントガイド</a>をお読みください。</p>
+
+<h2 id="Summary" name="Summary">あなたのスキルをテストしてください！</h2>
+
+<p>あなたはこの記事の最後に到達し、すでに私たちのアクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後の最も重要な情報を覚えていますか？あなたがこの情報を保持していることを確認するための評価をモジュールの最後に見つけることができます。<a href="/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a>を参照してください。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>テキストの装飾の基本についての記事を読み終えたので、今度はモジュール「コミュニティスクールのホームページの組版」の評価で理解度をテストします。</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p>
+
+
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li>
+</ul>