Learn/Getting_started_with_the_web/CSS_basics を更新 (#674)

- 2021/02/20 時点の英語版に同期
- 原語併記マクロを削除

1 files changed, 116 insertions, 112 deletions

diff --git a/files/ja/learn/getting_started_with_the_web/css_basics/index.html b/files/ja/learn/getting_started_with_the_web/css_basics/index.html
index 86fb5b8ee5..a8165db7cd 100644
--- a/files/ja/learn/getting_started_with_the_web/css_basics/index.html
+++ b/files/ja/learn/getting_started_with_the_web/css_basics/index.html
@@ -2,11 +2,13 @@
 title: CSS の基本
 slug: Learn/Getting_started_with_the_web/CSS_basics
 tags:
+  - Beginner
   - CSS
   - CodingScripting
+  - Learn
   - Styling
   - Web
-  - 'l10n:priority'
+  - l10n:priority
   - 初心者
   - 学習
 translation_of: Learn/Getting_started_with_the_web/CSS_basics
@@ -16,201 +18,199 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics
 <div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
 
 <div class="summary">
-<p>CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。「<em>CSS の基本</em>」では、始めるのに必要なものを紹介します。ここでは、テキストを黒または赤にするにはどうすればいいのか？そのような場所でコンテンツを画面に表示させるにはどうすればいいのか？背景画像と色を使って ウェブページをどのように飾るのか？というような疑問に答えていきます。</p>
+<p>CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。「<em>CSS の基本</em>」では、始めるのに必要なものを紹介します。ここでは、テキストを赤くするにはどうすればいいのか？コンテンツを (ウェブページの) レイアウトの中で特定の場所に表示するにはどうすればいいのか？背景画像と色を使って ウェブページをどのように飾るのか？というような疑問に答えていきます。</p>
 </div>
 
-<h2 id="So_what_is_CSS_really" name="So_what_is_CSS_really">それでは CSS とは何でしょうか？</h2>
+<h2 id="What_is_CSS">CSS とは何か</h2>
 
 <p>HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。<strong>CSS はスタイルシート言語です</strong>。CSS は、HTML の要素を選択的にスタイルにするために使うものです。例えば、この CSS は段落のテキストを選択し、色を赤に設定しています。</p>
 
-<pre class="brush: css notranslate">p {
+<pre class="brush: css">p {
   color: red;
 }</pre>
 
-<p>それでは試してみましょう: これらの 3 行の CSS をテキストエディタの新しいファイルに貼り付け、ファイルを <code>style.css</code> として <code>styles</code> ディレクトリに保存します。</p>
+<p>それでは試してみましょう。テキストエディターを使用して、 (上記の) 3 行の CSS 新しいファイルに貼り付けてください。そのファイルを <code>style.css</code> として <code>styles</code> という名前のディレクトリーに保存してください。。</p>
 
-<p>しかし、まだ CSS を HTML 文書に適用する必要があります。そうしないと CSS のスタイリングはブラウザの HTML 文書の表示方法に影響しません。(私たちのプロジェクトに従っていない場合、<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a><span lang="ja"><span>と </span></span><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a>を読み、まず何をする必要があるのかを見てください)</p>
+<p>コードを働かせるには、この (上記の) CSS を HTML 文書に適用する必要があります。そうしないと、このスタイルはブラウザーの HTML 文書の表示に影響しません。 (今までのプロジェクトを実行していない場合は、ここでいったん止めて<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>と <a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a>を読み、まず何をする必要があるのかを見てください。)</p>
 
 <ol>
- <li><code>index.html</code> ファイルを開き、head ({{HTMLElement("head")}} タグと <code>&lt;/head&gt;</code> タグの間) に以下の行を貼り付けます
+ <li><code>index.html</code> ファイルを開き、先頭 ({{HTMLElement("head")}} タグと <code>&lt;/head&gt;</code> タグの間) に以下の行を貼り付けてください。
 
-  <pre class="brush: html notranslate">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet"&gt;</pre>
  </li>
- <li><code>index.html</code> を保存し、ブラウザで読み込みます。このように表示されるでしょう :</li>
+ <li><code>index.html</code> を保存し、ブラウザーで読み込んでください。次のように表示されるはずです。</li>
 </ol>
 
-<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">段落テキスト(<code>&lt;p&gt;</code>と<code>&lt;/p&gt;</code>で囲んだ文字)が赤色になりましたか？おめでとうございます！今はじめて CSS を書き、成功しました！</p>
+<p><img alt="Mozilla のロゴといくつかの段落です。段落のテキストは、 CSS によって赤くスタイル付けされています。" src="website-screenshot-styled.png" style="display: block; margin: 0px auto;">段落のテキストが赤くなっていれば、おめでとう！ CSS が動作しています。</p>
 
-<h3 id="Anatomy_of_a_CSS_ruleset" name="Anatomy_of_a_CSS_ruleset">CSS ルールセットの構造</h3>
+<h3 id="Anatomy_of_a_CSS_ruleset">CSS 規則セットの構造</h3>
 
-<p>上記の CSS をもう少し詳しく見てみましょう:</p>
+<p>赤い段落テキストの CSS コードを分解して、その仕組みを理解してみましょう。</p>
 
-<p><img alt="CSS p declaration color red" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+<p><img alt="CSS p declaration color red" src="css-declaration-small.png"></p>
 
-<p>全体の構造は<strong>ルールセット</strong>と呼びます (しかし、しばしば "ルール" として略されます)。個々のパーツの名前にも注意してください :</p>
+<p>全体の構造は<strong>規則セット</strong>と呼びます (<em>規則セット</em>という語はよく、単に<em>規則</em>とも呼ばれます)。それぞれの部分の名前にも注意してください。</p>
 
 <dl>
- <dt>{{原語併記("セレクタ", "selector")}}</dt>
- <dd>ルールセットの先頭にある HTML 要素名。これはスタイルを設定する要素 (この場合は p 要素) を選択します。別の要素をスタイルするには、Selector を変更します。</dd>
- <dt>{{原語併記("宣言", "declaration")}}</dt>
- <dd><code>color: red;</code> のような単一のルールで、要素の<strong>プロパティ</strong>のうちどの要素をスタイルするかを指定します。</dd>
- <dt>{{原語併記("プロパティ", "property")}}</dt>
- <dd>指定された HTML 要素のスタイルを設定する方法 (この場合 <code>color</code> は {{htmlelement("p")}} 要素のプロパティです)。CSS ではルール内でどのプロパティを適用するかを選択します。</dd>
- <dt>{{原語併記("プロパティ値", "property value")}}</dt>
- <dd>プロパティの右側にはコロンの後に<strong>プロパティ値</strong>があり、与えられたプロパティの多くの外観から 1 つを選択します (赤以外にも多くの色の値があります)。</dd>
+ <dt>セレクター (Selector)</dt>
+ <dd>これは規則セットの先頭にある HTML 要素名です。これはスタイルを設定する要素 (この例の場合は {{HTMLElement("p")}} 要素) を定義します。別の要素をスタイル付けするには、セレクターを変更してください。</dd>
+ <dt>宣言 (Declaration)</dt>
+ <dd><code>color: red;</code> のような単一の規則です。これは要素の<strong>プロパティ</strong>のうち、スタイル付けしたいものを指定します。</dd>
+ <dt>プロパティ (Property)</dt>
+ <dd>これらは、 HTML 要素をスタイル付けするための方法です。 (この例では、 <code>color</code> は {{htmlelement("p")}} 要素のプロパティです。)  CSS では、規則の中で影響を与えたいプロパティを選択します。</dd>
+ <dt>プロパティ値 (Property value)</dt>
+ <dd>プロパティの右側には—コロンの後に—<strong>プロパティ値</strong>があります。与えられたプロパティの多くの外観から 1 つを選択します。 (例えば、 <code>color</code> の値は <code>red</code> 以外にもたくさんあります。)</dd>
 </dl>
 
-<p>構文の他の重要な部分に注意してください:</p>
+<p>構文の他の重要な部分に注意してください。</p>
 
 <ul>
- <li>各ルールセット (セレクタを除く) は中括弧 (<code>{}</code>) で囲む必要があります。</li>
- <li>各宣言内ではコロン (<code>:</code>) を使用してプロパティを値から分離する必要があります。</li>
- <li>各規則セット内でセミコロン (<code>;</code>) を使用し、各宣言を次の規則と区切る必要があります。</li>
+ <li>セレクターを除き、それぞれの規則セットは中括弧 (<code>{}</code>) で囲む必要があります。</li>
+ <li>それぞれの宣言内では、コロン (<code>:</code>) を使用してプロパティと値を分離する必要があります。</li>
+ <li>それぞれの規則セット内でセミコロン (<code>;</code>) を使用して、それぞれの宣言と次の規則を区切る必要があります。</li>
 </ul>
 
-<p>したがって、一度に複数のプロパティ値を変更するには、セミコロンで区切って次のように記述するだけです:</p>
+<p>一つの規則セットで複数のプロパティ値を変更するには、次のようにセミコロンで区切って書いてください。</p>
 
-<pre class="brush: css notranslate">p {
+<pre class="brush: css">p {
   color: red;
   width: 500px;
   border: 1px solid black;
 }</pre>
 
-<h3 id="Selecting_multiple_elements" name="Selecting_multiple_elements">複数の要素を選択する</h3>
+<h3 id="Selecting_multiple_elements">複数の要素の選択</h3>
 
-<p>複数の要素の種類を選択することができ、すべての要素に単一のルールセットを適用することもできます。カンマで区切られた複数のセレクタを含めます。例えば:</p>
+<p>複数の要素を選択して、そのすべてに一つの規則セットを適用することもできます。複数のセレクターはカンマで区切ります。たとえば、以下のようになります。</p>
 
-<pre class="brush: css notranslate">p,li,h1 {
+<pre class="brush: css">p, li, h1 {
   color: red;
 }</pre>
 
-<h3 id="Different_types_of_selectors" name="Different_types_of_selectors">さまざまな種類のセレクタ</h3>
+<h3 id="Different_types_of_selectors">さまざまな種類のセレクター</h3>
 
-<p>多くのさまざまな種類のセレクタがあります。上の項目では、特定のHTMLドキュメント内の特定のタイプのすべての要素を選択する<strong>要素セレクタ</strong>だけを取り上げました。しかしそれ以上に細かい選択をすることができます。一般的なタイプのセレクタを次に示します:</p>
+<p>セレクターにはさまざまな種類があります。上記の例では、<strong>要素セレクター</strong>を使用しており、特定の種類の要素をすべて選択しています。しかし、もっと特定の要素を選択することもできます。ここでは、より一般的なセレクターの種類を紹介します。</p>
 
 <table class="standard-table">
  <thead>
   <tr>
-   <th scope="col">セレクタ名</th>
-   <th scope="col">何を選択するか</th>
+   <th scope="col">セレクター名</th>
+   <th scope="col">選択するもの</th>
    <th scope="col">例</th>
   </tr>
  </thead>
  <tbody>
   <tr>
-   <td>要素セレクタ (時々タグまたは型セレクタと呼ばれます)</td>
+   <td>要素セレクター (タグまたは型セレクターと呼ばれることもあります)</td>
    <td>指定された型のすべての HTML 要素</td>
    <td><code>p</code><br>
     <code>&lt;p&gt;</code> を選択</td>
   </tr>
   <tr>
-   <td>ID セレクタ</td>
-   <td>ページ上の指定された ID を持つ要素。 特定のHTMLページでは、1つのIDにつき1つの要素（そしてもちろん1つの要素につき1つのID）しか許されません。</td>
+   <td>ID セレクター</td>
+   <td>指定された ID を持つページ上の要素です。指定された HTML ページでは、各 id 値は一意でなければなりません。</td>
    <td><code>#my-id</code><br>
     <code>&lt;p id="my-id"&gt;</code> または <code>&lt;a id="my-id"&gt;</code> を選択</td>
   </tr>
   <tr>
-   <td>クラスセレクタ</td>
-   <td>指定されたクラスを持つページの要素 (複数のクラスインスタンスがページに表示されます)</td>
+   <td>クラスセレクター</td>
+   <td>指定されたクラスを持つページ上の要素です。同じクラスの複数のインスタンスが 1 つのページに現れることがあります。</td>
    <td><code>.my-class</code><br>
-    <code>&lt;p class="my-class"&gt;</code> 及び <code>&lt;a class="my-class"&gt;</code> を選択</td>
+    <code>&lt;p class="my-class"&gt;</code> および <code>&lt;a class="my-class"&gt;</code> を選択</td>
   </tr>
   <tr>
-   <td>属性セレクタ</td>
-   <td>指定された属性を持つページ上の要素</td>
+   <td>属性セレクター</td>
+   <td>指定された属性を持つページ上の要素です。</td>
    <td><code>img[src]</code><br>
     <code>&lt;img src="myimage.png"&gt;</code> を選択するが、<code>&lt;img&gt; は選択しない</code></td>
   </tr>
   <tr>
-   <td>擬似クラスセレクタ</td>
-   <td>指定された要素が指定された状態にあるとき。例えば、マウスポインターが上に乗っている (ホバー) 状態。</td>
+   <td>擬似クラスセレクター</td>
+   <td>指定された要素が指定された状態にあるとき。 (例えば、マウスポインターが上に乗っている (ホバー) 状態。)</td>
    <td><code>a:hover</code><br>
     <code>&lt;a&gt;</code> を選択するが、マウスポインターがリンク上にあるときのみ。</td>
   </tr>
  </tbody>
 </table>
 
-<p>セレクタの種類は多く、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">セレクタガイド</a>により詳しい一覧があります。</p>
+<p>他にも様々なセレクターがあります。詳しくは、 MDN の<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">セレクターガイド</a>をご覧ください。</p>
 
-<h2 id="Fonts_and_text" name="Fonts_and_text">フォントとテキスト</h2>
+<h2 id="Fonts_and_text">フォントとテキスト</h2>
 
-<p>CSS の基本をいくつか勉強しましたので、<code>style.css</code> ファイルにいくつかのルールと情報を追加して、この例を見栄え良くしましょう。最初に、フォントとテキストの見ばえを少し良くしてみましょう。</p>
+<p>CSS の基本をいくつか勉強しましたので、<code>style.css</code> ファイルにいくつかの規則と情報を追加して、この例を見栄え良くしましょう。</p>
 
 <ol>
- <li>まず最初に、どこかの安全に保存した<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Font"> Google フォントの出力</a>を見つけてください。{{htmlelement("link")}} 要素を <code>index.html</code> の上部 (<code>&lt;head&gt;</code> タグと <code>&lt;/head&gt;</code> タグの間) のどこかに追加します。これは次のようになります:
-
-  <pre class="brush: html notranslate">&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
-
-  <p>このコードは、ウェブページとともにOpen Sansフォントファミリをダウンロードするスタイルシートにページをリンクし、独自のスタイルシートを使用してHTML要素に設定することを可能にします。</p>
- </li>
- <li>次に <code>style.css</code> ファイルにある既存のルールを削除します。良いテストでしたが、赤いテキストは実のところあまりよくありません。</li>
- <li>代わりに次の行を追加し、プレースホルダー行を Google フォントから取得した実際の <code>font-family</code> 行に置き換えます。(この <code>font-family</code> は、テキストに使用するフォントを意味します)。このルールは最初にページ全体のグローバルベースフォントとフォントサイズを設定します (<code>&lt;html&gt;</code> はページ全体の親要素です。その中のすべての要素は同じ <code>font-size</code> と <code>font-family</code> を継承します):
-  <pre class="brush: css notranslate">html {
-  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
-  font-family: 'Open Sans', sans-serif; /* this should be the rest of the output you got from Google fonts */
+ <li>まず、以前に<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a>で保存した、 <a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#font">Google フォントの出力</a>を探します。 {{htmlelement("link")}} 要素を <code>index.html</code> の先頭のどこか ({{HTMLElement("head")}} タグと <code>&lt;/head&gt;</code> タグの間) に追加します。それは次のようなものです。
+
+  <pre class="brush: html">&lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;</pre>
+  このコードは、ウェブページに Open Sans フォントファミリを読み込むスタイルシートにページをリンクします。</li>
+ <li>次に <code>style.css</code> ファイルにある既存の規則を削除します。試験としては良いものでしたが、赤いテキストだらけにするのはもうやめましょう。</li>
+ <li>以下の行 (下記参照) を追加し、 <code>font-family</code> の割り当てを<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a>で選択した <code>font-family</code> に置き換えます。 <code>font-family</code> というプロパティは、テキストに使用するフォントを指します。この規則では、ページ全体の基本フォントとフォントの大きさを定義します。 {{HTMLElement("html")}} はページ全体の親要素なので、その中のすべての要素は同じ <code>font-size</code> と <code>font-family</code> を継承します。
+  <pre class="brush: css">html {
+  font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high  */
+  font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google fonts */
 }</pre>
 
   <div class="note">
-  <p><strong>注</strong>: 「px」の意味を説明するコメントを追加しました。<code>/*</code> と <code>*/</code> の間にある CSS ドキュメント内のものは <strong>CSS コメント</strong>です。ブラウザはコードをレンダリングするときにこれを無視します。これはあなたが実施していることについての役立つメモを書く場所です。</p>
+  <p><strong>注</strong>: CSS の <code>/*</code> と <code>*/</code> の間にあるものは何でも <strong>CSS コメント</strong>になります。ブラウザーはコードをレンダリングするときにこれを無視します。 CSS コメントはコードや論理について役立つメモを書くための方法です。</p>
   </div>
  </li>
- <li>HTML ボディ ({{htmlelement("h1")}}、{{htmlelement("li")}}、{{htmlelement("p")}}) 内のテキストを含む要素のフォントサイズを設定します)。また、読みやすくするために見出しのテキストを中央に置き、本文の内容に行の高さと文字の間隔を設定します:
-  <pre class="brush: css notranslate">h1 {
-  font-size: 60px;
-  text-align: center;
+ <li>次に、 HTML 本文内にテキストを配置する要素 ({{htmlelement("h1")}}, {{htmlelement("li")}}, {{htmlelement("p")}}) のフォントの大きさを設定します。また、見出しを中央揃えにします。最後に、 2 つ目の規則セット (下記) を展開して、行の高さや文字の間隔などの設定を行い、本文のコンテンツを読みやすくしましょう。
+  <pre class="brush: css">h1 {
+  font-size: 60px;
+  text-align: center;
 }
 
 p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
 }</pre>
  </li>
 </ol>
 
-<p>これらの <code>px</code> 値はあなたが望むようにデザインを得るために好きなものに調整できますが、一般的にデザインは次のようになります:</p>
+<p><code>px</code> の値はお好みで調整してください。進行中の作品は、このようになるはずです。</p>
 
-<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+<p><img alt="mozilla のロゴといくつかの段落。 sans-serif フォントが設定され、フォントの大きさ、行の高さ、文字の間隔が調整され、メインページの見出しが中央に配置されています。" src="website-screenshot-font-small.png" style="display: block; margin: 0px auto;"></p>
 
-<h2 id="Boxes_boxes_its_all_about_boxes" name="Boxes_boxes_it's_all_about_boxes">ボックス、ボックス、ボックスについてのすべてのこと</h2>
+<h2 id="CSS_all_about_boxes">CSS: ボックスのすべて</h2>
 
-<p>CSS を書いていて気づくことの 1 つは、ボックスのサイズ・色・位置などを設定することです。ページの HTML 要素のほとんどはお互いの上にあるボックスと考えることができます。</p>
+<p>CSS を書いていて気づくことがあります。それは、その多くがボックスに関するものだということです。これには、サイズ、色、位置の設定が含まれます。ページ上のほとんどの HTML 要素は、他の箱の上に置かれた箱と考えることができます。</p>
 
-<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+<p><img alt="大きな箱や木箱が積み重なっている状態" src="boxes.jpg" style="display: block; margin: 0px auto;"></p>
 
-<p>当然のことながら、CSS レイアウトは主に<em>ボックスモデル</em>に基づいています。ページ上のスペースを占める各ブロックは、次のようなプロパティを持ちます:</p>
+<p>CSS のレイアウトは、主に<em>ボックスモデル</em>に基づいています。ページ上のスペースを占める各ボックスには、次のようなプロパティがあります。</p>
 
 <ul>
- <li><code>padding</code>: コンテンツのまわりのスペース (例えば段落テキストの周り)</li>
+ <li><code>padding</code>: コンテンツの周囲のスペースです。以下の例では、段落テキストの周りのスペースです。</li>
  <li><code>border</code>: <code>padding</code> のすぐ外側にある実線</li>
  <li><code>margin</code>: 要素の外側の周りの空間</li>
 </ul>
 
-<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+<p><img alt="3 つのボックスがお互いの内側に配置されています。外側から内側に向かって、 margin, border, padding と書かれています。" src="box-model.png" style="display: block; margin: 0px auto;"></p>
 
-<p>このセクションでは次のものを使用します :</p>
+<p>この節では次のものを使用します。</p>
 
 <ul>
  <li><code>width</code> (要素の)</li>
- <li><code>background-color</code>: <span class="short_text" id="result_box" lang="ja"><span>要素の内容と padding の背後にある色</span></span></li>
+ <li><code>background-color</code>: 要素の内容と padding の背後にある色</li>
  <li><code>color</code>: 要素のコンテンツ (通常はテキスト) の色</li>
- <li><code>text-shadow</code>: 要素内のテキストに影を設定する</li>
+ <li><code>text-shadow</code>: 要素内のテキストに影を設定します</li>
  <li><code>display</code>: 要素の表示モードを設定します (これについてはまだ心配しないでください)</li>
 </ul>
 
-<p>では、ページに CSS を追加しましょう！これらの新しいルールをページの最後に追加しておき、値の変更を試すのを恐れることなく、どのように変化するかを確認してください。</p>
+<p>続けて、さらに CSS を追加していきましょう。 <code>style.css</code> の一番下に、これらの新しい規則を追加し続けます。値を変えてどうなるか実験してみましょう。</p>
 
-<h3 id="Changing_the_page_color" name="Changing_the_page_color">ページの色を変更する</h3>
+<h3 id="Changing_the_page_color">ページの色を変更する</h3>
 
-<pre class="brush: css notranslate">html {
+<pre class="brush: css">html {
   background-color: #00539F;
 }</pre>
 
-<p>このルールはページ全体の背景色に設定を行います。上記のカラーコードを、<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Theme_color">サイトを計画する際に選択した</a>色に変更します。</p>
+<p>この規則はページ全体の背景色に設定を行います。上記のカラーコードを、<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#theme_color">ウェブサイトをどんな外見にするかで選んだ色</a>に変更しましょう。</p>
 
-<h3 id="Sorting_the_body_out" name="Sorting_the_body_out">ボディのスタイリング</h3>
+<h3 id="Styling_the_body">本文のスタイル付け</h3>
 
-<pre class="brush: css notranslate">body {
+<pre class="brush: css">body {
   width: 600px;
   margin: 0 auto;
   background-color: #FF9500;
@@ -218,78 +218,82 @@ p, li {
   border: 5px solid black;
 }</pre>
 
-<p>次は {{htmlelement("body")}}  要素です。ここにはいくつかの宣言がありますので、それらをひとつひとつ見て行きましょう:</p>
+<p>次は {{htmlelement("body")}}  要素です。ここにはいくつかの宣言がありますので、 1 行ずつ見て行きましょう。</p>
 
 <ul>
  <li><code>width: 600px;</code> — これにより body は常に 600 ピクセルの幅になります。</li>
- <li><code>margin: 0 auto;</code> — <code> margin</code> や <code>padding</code> などのプロパティに 2 つの値を設定すると、最初の値は要素の上下の辺に影響を与えます (この場合は 0 になります )。2 番目の値は左右です (<a href="/ja/docs/Web/CSS/margin#Values">ここ</a>で <code>auto</code> は利用可能な水平スペースを左右に均等に分割します)。<a href="https://developer.mozilla.org/ja/docs/Web/CSS/margin#Values">margin の構文</a>で説明するように 1 つ、3 つ、または 4 つの値を使用することもできます。</li>
- <li><code>background-color: #FF9500;</code> — 前と同じようにこれは要素の背景色を設定します。このプロジェクトでは <code>body</code> に <code>html</code> 要素の暗い青とは対照的な赤いオレンジ色の一種を使用しました。実験してください。<code>white</code> や何でも好きなものを自由に使用してください。</li>
- <li><code>padding: 0 20px 20px 20px;</code> — <code>padding</code> に 4 つの値を設定して、コンテンツの周りに少しのスペースを確保します。今回はボディの上にパディングを設定せず、左・下・右に 20 ピクセルを設定します。値は上・右・下・左の順に設定されます。<code>margin</code> と同様に、<a href="/ja/docs/Web/CSS/padding#Syntax">パディング構文</a>で説明されているように、1つ、2つ、または3つの値を使用することもできます。</li>
- <li><code>border: 5px solid black;</code> — これは <code>body</code> の全側面に 5 ピクセル幅の黒ベタの境界線を設定するだけです。</li>
+ <li><code>margin: 0 auto;</code> — <code> margin</code> や <code>padding</code> などのプロパティに 2 つの値を設定すると、最初の値は要素の上下の辺に影響します (この場合は <code>0</code> になります )。2 番目の値は左右に影響します (ここで <code>auto</code> は残った水平方向の余白を左右に均等に配分する特別な値です)。 <a href="/ja/docs/Web/CSS/margin#syntax">margin の構文</a>で説明しているように、 1 つ、3 つ、または 4 つの値を使用することもできます。</li>
+ <li><code>background-color: #FF9500;</code> — これは要素の背景色を設定します。このプロジェクトでは body の背景色に明るいオレンジ色を使用して、 {{htmlelement("html")}} 要素の暗い青とは対照的にしました。 (気軽に試してみてください。)</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — これはパディングに 4 つの値を設定します。これは、コンテンツの周りに少しのスペースを確保するためです。今回は body の上にパディングを設定せず、左・下・右に 20 ピクセルを設定します。値は上・右・下・左の順に設定されます。<code>margin</code> と同様、 <a href="/ja/docs/Web/CSS/padding#syntax">padding の構文</a>で説明されているように、 1 つ、 2 つ、または 3 つの値を使用することもできます。</li>
+ <li><code>border: 5px solid black;</code> — これは境界の太さ、スタイル、色の値を設定します。この場合は、 body の全側面に 5 ピクセルの太さの黒ベタの境界線を設定します。</li>
 </ul>
 
-<h3 id="Positioning_and_styling_our_main_page_title" name="Positioning_and_styling_our_main_page_title">メインページタイトルの配置とスタイリング</h3>
+<h3 id="Positioning_and_styling_the_main_page_title">メインページのタイトルの配置とスタイル付け</h3>
 
-<pre class="brush: css notranslate">h1 {
+<pre class="brush: css">h1 {
   margin: 0;
   padding: 20px 0;
   color: #00539F;
   text-shadow: 3px 3px 1px black;
 }</pre>
 
-<p><code>body</code> の上部にひどい隙間があることに気づいたかもしれません。これは CSS をまったく適用していなくても、ブラウザが {{htmlelement("h1")}} 要素 (他の中でも) に<strong>デフォルトのスタイル</strong>を適用するためです。それは悪い考えのように聞こえるかもしれませんが、私たちは未構築のウェブページでも基本的な読みやすさを求めています。ギャップをなくすには、<code>margin: 0;</code> を設定してデフォルトのスタイルを上書きします。</p>
+<p>body の上部にひどい隙間があることに気づいたかもしれません。これは CSS をまったく適用していなくても、ブラウザーが (他のものの中で)  {{htmlelement("h1")}} 要素に既定のスタイルを適用するためです。それは悪い考えのように見えるかもしれませんが、スタイルのないページにも一定の読みやすさを求めるためのものです。隙間をなくすために、 <code>margin: 0;</code> を設定して既定のスタイルを上書きします。</p>
 
-<p>次に見出しの上下のパディングを 20 ピクセルに設定し、見出しテキストを <code>html</code> の背景色と同じ色にしました。</p>
+<p>次に見出しの上下のパディングを 20 ピクセルに設定します。</p>
 
-<p>私たちがここで使ってきた興味深いプロパティの 1 つは、要素のテキストコンテンツにテキストシャドウを適用する <code>text-shadow</code> です。その 4 つの値は次のとおりです。</p>
+<p>続いて、見出しテキストが HTML の背景色と同じ色になるように設定します。</p>
+
+<p>最後に、 <code>text-shadow</code> は要素のテキストコンテンツに影を適用します。 4 つの値は次のとおりです。</p>
 
 <ul>
- <li>最初のピクセル値は、テキストからのシャドウの<strong>水平オフセット</strong>を設定します。移動する距離は負の値で、左に移動する必要があります。</li>
- <li>2 番目のピクセル値は、テキストからシャドウの<strong>垂直オフセット</strong>を設定します　(この例では、どれだけ下に移動するか)。負の値では上に移動します。</li>
- <li>3 番目のピクセル値は影の<strong>ぼかし半径</strong>を設定します。値が大きいほど影がぼやけることを意味します。</li>
- <li>4 番目の色は影の基本色を設定します。</li>
+ <li>最初はピクセル値で、影のテキストからの<strong>水平オフセット</strong>、どれだけ横に移動するかを設定します。</li>
+ <li>2 番目はピクセル値で、影のテキストから<strong>垂直オフセット</strong>、どれだけ下に移動するかを設定します。</li>
+ <li>3 番目のピクセル値で、影を<strong>ぼかす半径</strong>を設定します。値が大きいほどぼやけた影を生成します。</li>
+ <li>4 番目の値は、影の基本色を設定します。</li>
 </ul>
 
-<p>繰り返しますが、さまざまな値を試してみてください。</p>
+<p>いろいろな値を試して、表示方法の変化を確認してみてください。</p>
 
-<h3 id="Centering_the_image" name="Centering_the_image">画像のセンタリング</h3>
+<h3 id="Centering_the_image">画像のセンタリング</h3>
 
-<pre class="brush: css notranslate">img {
+<pre class="brush: css">img {
   display: block;
   margin: 0 auto;
 }</pre>
 
-<p>最後に画像をよりよく見えるように中央に配置します。以前は <code>body</code> のために実施したことと同じようにもう一度 <code>margin: 0 auto</code> トリックを使うことができましたが、何か別のことをする必要もあります。<code>body</code> 要素は<strong>ブロックレベル</strong>です。つまり、ページ上のスペースを占有し、マージンや他のスペーシング値を適用することができます。一方、イメージは<strong>インライン</strong>要素でありできないことを意味します。画像にマージンを適用するには、<code>display: block;</code> を使用して画像のブロックレベルの動作を指定する必要があります。</p>
+<p>次に、画像を中央に配置して見栄えを良くします。本文のときと同じように、 <code>margin: 0 auto</code> のトリックを使うこともできます。しかし、 CSS を機能させるために追加の設定が必要になる違いがあります。</p>
+
+<p>{{htmlelement("body")}} は<strong>ブロック</strong>要素であるため、ページの中でスペースを占めます。ブロック要素は、マージンやその他の余白を開ける値を適用することができます。一方、画像は<strong>インライン</strong>要素です。インライン要素にマージンやその他の余白を開ける値を適用することはできません。画像にマージンを適用するには、<code>display: block;</code> を使用して画像にブロックレベルの動作を指定する必要があります。</p>
 
 <div class="note">
-<p><strong>注</strong>: 上記の手順では、本体に設定されている幅 (600ピクセル) よりも小さい画像を使用していることを前提としています。画像が大きい場合、それは本文をオーバーフローし、ページの残りの部分にはみ出します。これを修正するには、1) グラフィックスエディタを使用してイメージの幅を縮小するか、2) <code>&lt;img&gt;</code> 要素の {{cssxref("width")}} プロパティを小さな値、例えば <code>400 px;</code> に設定することで、 CSS を使用してイメージのサイズを変更します。</p>
+<p><strong>注</strong>: 上記の手順は、本体に設定されている幅 (600ピクセル) よりも小さい画像を使用していることを前提としています。画像が大きい場合、それは本文をあふれ、ページの残りの部分にはみ出します。これを修正するには、1) <a href="https://ja.wikipedia.org/wiki/%E3%83%9A%E3%82%A4%E3%83%B3%E3%83%88%E3%82%BD%E3%83%95%E3%83%88">画像編集ソフト</a>を使用して画像の幅を縮小するか、2) CSS を使用して、 {{cssxref("width")}} プロパティでより小さな値を <code>&lt;img&gt;</code> 要素に設定し、画像の大きさを変更します。</p>
 </div>
 
 <div class="note">
-<p><strong>注</strong>: あなたがまだ <code>display: block;</code> とブロックレベル/インラインの区別を理解していなくても、心配しないでください。CSS をもっと深く勉強することが出来ます。使用可能なさまざまな表示値の詳細については、<a href="/ja/docs/Web/CSS/display">display のリファレンスページ</a><span lang="ja">を参照してください。</span></p>
+<p><strong>注</strong>: <code>display: block;</code> や、ブロックレベル/インラインの区別がまだ理解できなくても心配しないでください。 CSS の勉強を続けていくうちに意味が分かってくるはずです。さまざまな display の値の違いについて詳しくは、 MDN の <a href="/ja/docs/Web/CSS/display">display のリファレンスページ</a><span lang="ja">を参照してください。</span></p>
 </div>
 
-<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+<h2 id="Conclusion">まとめ</h2>
 
-<p>この記事のすべての手順に従っている場合は、次のようなページが表示されます (<a href="http://mdn.github.io/beginner-html-site-styled/">このリンクから我々が作成したバージョンを見る</a>こともできます)。</p>
+<p>この記事のすべての手順に従っている場合は、次のようなページが表示されます。</p>
 
-<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+<p><img alt="モジラのロゴを中央に配置し、ヘッダーとパラグラフを配置しています。これで、ページ全体の背景が青くになり、中央に配置されたメインコンテンツストリップの背景がオレンジになるなど、きれいなスタイルになりました。" src="website-screenshot-final.png" style="display: block; margin: 0px auto;"></p>
 
-<p>もしわからなくなった場合、<a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">Github の完成したサンプルコード</a>と作業内容を常に比較することができます。</p>
+<p>(<a href="https://mdn.github.io/beginner-html-site-styled/">作成した結果はこちらから見ることができます</a>。) もしわからなくなった場合、<a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">Github の完成したサンプルコード</a>と作業内容を常に比較することができます。</p>
 
-<p>ここでは、CSS の表面に少し触れただけです。詳細については、<a href="https://developer.mozilla.org/ja/docs/Learn/CSS">CSS の学習トピック</a><span lang="ja">をご覧ください。 </span></p>
+<p>ここでは、CSS の表面に少し触れただけです。詳細については、<a href="/ja/docs/Learn/CSS">CSS の学習トピック</a>をご覧ください。</p>
 
 <p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>
 
-<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+<h2 id="In_this_module">このモジュール</h2>
 
 <ul>
- <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
+ <li id="Installing_basic_software"><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li>
  <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a></li>
  <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li>
  <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li>
  <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li>
  <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li>
- <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">ウェブサイトの公開</a></li>
+ <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">ウェブサイトの公開</a></li>
  <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブのしくみ</a></li>
 </ul>