diff --git a/files/ja/learn_web_development/core/styling_basics/getting_started/index.md b/files/ja/learn_web_development/core/styling_basics/getting_started/index.md
index 6f4b13270c5783..d34b1d80a94660 100644
--- a/files/ja/learn_web_development/core/styling_basics/getting_started/index.md
+++ b/files/ja/learn_web_development/core/styling_basics/getting_started/index.md
@@ -1,12 +1,13 @@
---
title: CSS 入門
slug: Learn_web_development/Core/Styling_basics/Getting_started
-original_slug: Learn/CSS/First_steps/Getting_started
l10n:
- sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3
+ sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---
-{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
+{{LearnSidebar}}
+
+{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/What_is_CSS", "Learn_web_development/Core/Styling_basics/Styling_a_bio_page", "Learn_web_development/Core/Styling_basics")}}
この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。
@@ -16,22 +17,28 @@ l10n:
| 前提条件: |
ソフトウェアのインストール、
ファイルの扱いについての基本的な知識、 HTML の基本（
- HTML 入門を学んでいること）。
|
- | 目的: |
+ 学習成果: |
- CSS 文書と HTML ファイルのリンクのさせかたを理解し、簡単なテキストをスタイル設定できるようになること。
+
+ - CSS を HTML 文書に適用すること。
+ - 基本的な CSS を書く実践的な経験。
+ - 基本的なセレクター型と結合子の操作の知識。
+ - CSS に適用される状態の概念。
+ - その他の CSS 構文機能（アットルール、関数、一括指定プロパティ、ホワイトスペースなど）に慣れること。
+ |
@@ -39,9 +46,9 @@ l10n:
## HTML からはじめよう
-HTML 文書から始めましょう。あなたのコンピューターのフォルダーに `index.html` として以下のコードを保存してください。
+HTML 文書から始めましょう。下記からコードをコピーして、自分のコンピューターで作業することができます。下記のコードを、自分のコンピューター上のフォルダー内に、 `index.html` として保存してください。
-```html-nolint
+```html-nolint live-sample___unstyled
@@ -50,36 +57,43 @@ HTML 文書から始めましょう。あなたのコンピューターのフォ
- 見出し１です
+ これは見出し 1 です
- これは第一段落の文です。この文にはspan 要素とリンクが含まれます。
+ これはテキストの段落です。このテキストには
+ span 要素とリンクがあります。
- これは第二段落の文です。この文には em 要素が含まれます。
+ これは 2 つ目の段落です。ここには強調された要素があります。
- - 一つ目のアイテム
- - 二つ目のアイテム
- - 三つ目のアイテム
+ - 1 つ目のアイテム
+ - 2 つ目のアイテム
+ - 3 つ目のアイテム
```
+これは次のように表示されます。
+
+{{EmbedLiveSample("unstyled", "", "240px")}}
+
> [!NOTE]
-> もし簡単にファイルの作れないデバイスや環境でこの記事を読んでいても心配しないでください。このページにあるコードを書くためにライブコードエディターが用意されています。
+> もし簡単にファイルの作れないデバイスや環境でこの記事を読んでいても心配しないでください。上記のライブサンプルの "Play" ボタンをクリックすると、 MDN Playground で開きます。そこでは、下部に記載されている指示に従って CSS と HTML コードを編集し、結合された結果をライブで確認することができます。
## 文書に CSS を追加
-一番最初にしなければならないことは、 HTML 文書に使用したい CSS ルールがあることを指示することです。 HTML 文書に CSS を適用するためによく使われる方法は 3 つがありますが、ここでは最も一般的で便利な方法である、文書の head から CSS を使用する方法について見ていきます。
+一番最初にしなければならないことは、 HTML 文書に使用したい CSS ルールがあることを指示することです。 HTML 文書に CSS を適用するためによく使われる方法は、外部スタイルシート、内部スタイルシート、インラインスタイルの 3 つがあります。これらを見てみましょう。
-HTML 文書と同じフォルダーにファイルをつくり、 `styles.css` として保存してください。拡張子 `.css` となっているのが CSS ファイルです。
+### 外部スタイルシート
+
+外部スタイルシートは、拡張子が `.css` の独立したファイルに CSS を格納します。これは、 CSS を文書に適用する最も一般的で便利な方法です。単一の CSS ファイルを複数のウェブページにリンクすると、すべて同じ CSS スタイルシートでスタイルを適用することができます。
+
+HTML 文書と同じフォルダーにファイルをつくり、 `styles.css` として保存してください。
`styles.css` を `index.html` にリンクさせるには、HTML 文書にある {{htmlelement("head")}} 要素の中に次のコードを追記してください。
@@ -95,13 +109,70 @@ h1 {
}
```
-HTML ファイルと CSS ファイルを保存し、ブラウザーでこのページを再読み込みしてみましょう。文書の先頭にある見出し 1 が赤くなるはずです。もしそうなったら、おめでとうございます。 CSS の HTML への適用に成功しました！ もしそうならなかったら、すべてを正しく入力しているか慎重に確認してください。
+HTML ファイルと CSS ファイルを保存し、ブラウザーでこのページを再読み込みしてみましょう。文書の先頭にある見出し 1 が赤くなるはずです。もしそうなったら、おめでとうございます。 CSS の HTML への適用が成功です。もしそうならなかったら、すべてを正しく入力しているか慎重に確認してください。
+
+#### 異なる場所へのスタイルシートの配置
+
+上記の例では、 CSS ファイルは HTML 文書と同じフォルダー内にありますが、別の場所に配置してパスを調整することも可能です（[HTML の画像](/ja/docs/Learn_web_development/Core/Structuring_content/HTML_images)と同様）。以下に 3 つの例を示します。
+
+```html-nolint
+
+
+
+
+
+
+
+
+```
-自分ののコンピューターに保存した `styles.css` を使い続けても良いですし、このチュートリアルの下の方にあるインタラクティブエディターを使い続けることもできます。もし最初のパネルにある CSS が 上にある HTML 文書とリンクされているなら、インタラクティブエディターは動作します。
+### 内部スタイルシート
-## HTML 要素のスタイル設定
+内部スタイルシートは、 HTML 文書の中に配置します。内部スタイルシートを作成するには、 CSS を HTML 文書の {{htmlelement("head")}} の中にある {{htmlelement("style")}} 要素の中に入れてください。
-見出しを赤くすることで、 HTML 要素を対象としたスタイル設定を試しました。**要素セレクター**（HTML の要素名を直接あてはめるセレクター）を対象としたのです。文書内のすべての段落に焦点をあてるなら、セレクターとして `p` を使うことができます。すべての段落を緑色にするために次を使います。
+HTML 文書内の `` および `` タグの間に、次のスニペットを追加してください。
+
+```html
+
+```
+
+保存して再読み込みすると、すべての段落が紫色に変わります。
+
+状況によっては、内部スタイルシートが便利な場合もあります。たとえば、コンテンツ管理システムを使用している場合、外部の CSS ファイルを変更することがブロックされているかもしれません。
+
+しかし、複数のページを持つサイトでは、内部スタイルシートは効率の悪い作業方法になります。内部スタイルシートを使用して、複数のページに統一された CSS スタイルを適用するには、そのスタイルを使用するすべてのウェブページに内部スタイルシートをコピーしなければなりません。効率性の低下はサイトの保守にも影響します。内部スタイルシートの CSS では、1 つの簡単なスタイル変更でも、複数のウェブページの編集が必要になるリスクがあります。
+
+次に行く前に、 HTML の例から `