unslug ja: move

3 files changed, 341 insertions, 0 deletions

diff --git a/files/ja/learn/css/building_blocks/a_cool_looking_box/index.html b/files/ja/learn/css/building_blocks/a_cool_looking_box/index.html
new file mode 100644
index 0000000000..32aa19ca2e
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/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/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html
new file mode 100644
index 0000000000..6d793d69ff
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/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/building_blocks/fundamental_css_comprehension/index.html b/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html
new file mode 100644
index 0000000000..c8012c9a8a
--- /dev/null
+++ b/files/ja/learn/css/building_blocks/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>