diff --git a/files/ja/learn_web_development/core/styling_basics/basic_selectors/selectors_tasks/index.md b/files/ja/learn_web_development/core/styling_basics/basic_selectors/selectors_tasks/index.md
index 88873533cc658b..1b2c311625ea00 100644
--- a/files/ja/learn_web_development/core/styling_basics/basic_selectors/selectors_tasks/index.md
+++ b/files/ja/learn_web_development/core/styling_basics/basic_selectors/selectors_tasks/index.md
@@ -1,19 +1,18 @@
---
title: "スキルテスト: セレクター"
slug: Learn_web_development/Core/Styling_basics/Basic_selectors/Selectors_Tasks
-original_slug: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
l10n:
- sourceCommit: c64e813d8ab9dbe22cbc049c26f7c6703370a2b7
+ sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---
{{LearnSidebar}}
-このスキルテストの目的は、 [CSS セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors)を理解しているかどうかを評価することです。
+このスキルテストの目的は、 [CSS セレクター](/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors)を理解しているかどうかを評価することです。
> [!NOTE]
-> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターで解決策を試すことができます。
->
-> もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
+> 以下のコードブロックで **"Play"** をクリックすると、 MDN Playground で例を編集することができます。
+> コードをコピー（クリップボードアイコンをクリック）し、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターに貼り付けることもできます。
+> 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
## 課題 1
@@ -29,11 +28,53 @@ l10n:
以下のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}
-
-> [!CALLOUT]
->
-> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/type-download.html)しましょう。
+```html live-sample___type
+
+
これは見出しです
+
+ Veggies es bonus vobis, proinde vos postulo essum magis
+ kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
+ garlic.
+
+
これはレベル 2 の見出しです
+
+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+ tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+ Dandelion cucumber earthnut pea peanut soko zucchini.
+
+
+ここをクリックすると、解決策を表示します。
+
+色やサイズを変更するには、`h1`、`h2`、`span` セレクターを対象とする必要があります。
+
+```css
+h1 {
+ color: blue;
+}
+
+h2 {
+ background-color: blue;
+ color: white;
+}
+
+span {
+ font-size: 200%;
+}
+```
+
+
## 課題 2
@@ -50,11 +91,58 @@ l10n:
以下のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}
-
-> [!CALLOUT]
->
-> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/class-id-download.html)しましょう。
+```html live-sample___class-id
+
+
これは見出しです
+
+ Veggies es bonus vobis, proinde vos postulo
+ essum magis kohlrabi welsh onion daikon
+ amaranth tatsoi tomatillo melon azuki bean garlic.
+
+
これはレベル 2 の見出しです
+
Gumbo beet greens corn soko endive gumbo gourd.
+
他のレベル 2 の見出しです
+
+ Parsley shallot courgette tatsoi pea sprouts
+ fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
+ earthnut pea peanut soko zucchini.
+
+
+ここをクリックすると、解決策を表示します。
+
+これは、クラスセレクターと ID セレクターの違いを理解しているか、また、アイテムの複数のクラスを対象とする方法を理解しているかを検査するものです。
+
+```css
+#special {
+ background-color: yellow;
+}
+
+.alert {
+ border: 2px solid grey;
+}
+
+.alert.stop {
+ background-color: red;
+}
+
+.alert.go {
+ background-color: green;
+}
+```
+
+
## 課題 3
@@ -70,11 +158,109 @@ l10n:
以下のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}
-
-> [!CALLOUT]
->
-> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/pseudo-download.html)しましょう。
+```html live-sample___pseudo
+
+
+ Veggies es bonus vobis, proinde vos postulo
+ essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon
+ azuki bean garlic.
+
+
+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+ tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+ Dandelion cucumber earthnut pea peanut soko zucchini.
+
+
+
+
+ | 果物 |
+ 野菜 |
+
+
+ | りんご |
+ じゃがいも |
+
+
+ | オレンジ |
+ 人参 |
+
+
+ | トマト |
+ 西洋人参 |
+
+
+ | キウイ |
+ タマネギ |
+
+
+ | バナナ |
+ 赤かぶ |
+
+
+
+
+ここをクリックすると、解決策を表示します。
+
+コンテンツに擬似クラス (`:first-child`) と擬似要素 (`::first-line`) を適用します。
+`a` 要素の`:link`、`:visited`、`:hover`の状態にスタイル設定を行い、 `:nth-child` 擬似クラスを使用して表の行を縞模様にします。
+
+```css
+.container p:first-child {
+ font-size: 150%;
+}
+
+.container p:first-child::first-line {
+ color: red;
+}
+
+a:link {
+ color: orange;
+}
+
+a:visited {
+ color: green;
+}
+
+a:hover {
+ text-decoration: none;
+}
+
+tr:nth-child(even) {
+ background-color: #333;
+ color: #fff;
+}
+```
+
+
## 課題 4
@@ -89,11 +275,55 @@ l10n:
以下のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}
-
-> [!CALLOUT]
->
-> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/combinators-download.html)しましょう。
+```html live-sample___combinators
+
+
これは見出しです
+
見出しの後の段落です。
+
これは 2 番目の段落です。
+
+
もう一つの見出し
+
見出しの後の段落です。
+
+ - One
+ -
+ Two
+
+
+ - Three
+
+
+ここをクリックすると、解決策を表示します。
+
+この課題では、さまざまな結合子を使用する方法を理解しているか調べます。
+適切な解答は次の通りです。
+
+```css
+h2 + p {
+ color: red;
+}
+
+.list > li {
+ list-style: none;
+ border-bottom: 1px solid #ccc;
+}
+```
+
+
## 課題 5
@@ -109,8 +339,70 @@ l10n:
以下のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}
-
-> [!CALLOUT]
->
-> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/selectors/attribute-links-download.html)しましょう。
+```html live-sample___attribute-links
+
+```
+
+```css hidden live-sample___attribute-links
+body {
+ font: 1.2em / 1.5 sans-serif;
+}
+
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+li {
+ margin: 0 0 0.5em 0;
+}
+
+a {
+ display: block;
+ padding: 0.5em;
+}
+```
+
+```css live-sample___attribute-links
+a {
+ border: 5px solid grey;
+}
+/* Add styles here */
+```
+
+{{EmbedLiveSample("attribute-links", "", "300px")}}
+
+
+ここをクリックすると、解決策を表示します。
+
+- title 属性を持つ要素を選択するには、角カッコ内に title を追加します (`a[title]`)。これにより、唯一タイトル属性を持つ 2 つ目のリンクが選択されます。
+
+- `` 要素の `href` 属性の値のどこかに "contact" という語が格納されている要素を対象とし、境界線をオレンジ色 (`border-color: orange`) にします。
+ ここで照合したいのは、 href 値の `/contact` と `../contact` の 2 つです。そのため、値のどこかに文字列 "contact" が含まれていることを照合する必要があり、 `*=` を使用します。これにより 3 つ目と 4 つ目のリンクが選択されます。
+
+- `` 要素の `href` 値が `https` で始まるものを対象とし、緑色の境界線 (`border-color: green`) を設定します。
+ `href` 値が "https" で始まるものを探していくには、最初のリンクのみを選択するために `^=` を使用します。
+
+```css
+a[title] {
+ border-color: pink;
+}
+a[href*="contact"] {
+ border-color: orange;
+}
+a[href^="https"] {
+ border-color: green;
+}
+```
+
+
+
+## 関連情報
+
+- [CSS によるスタイル設定の基本](/ja/docs/Learn_web_development/Core/Styling_basics)
diff --git a/files/ja/learn_web_development/core/styling_basics/box_model_tasks/index.md b/files/ja/learn_web_development/core/styling_basics/box_model_tasks/index.md
index c66e7039f24e22..a537453d969b8a 100644
--- a/files/ja/learn_web_development/core/styling_basics/box_model_tasks/index.md
+++ b/files/ja/learn_web_development/core/styling_basics/box_model_tasks/index.md
@@ -1,19 +1,18 @@
---
title: "スキルテスト: ボックスモデル"
slug: Learn_web_development/Core/Styling_basics/Box_Model_Tasks
-original_slug: Learn/CSS/Building_blocks/Box_Model_Tasks
l10n:
- sourceCommit: c64e813d8ab9dbe22cbc049c26f7c6703370a2b7
+ sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---
{{LearnSidebar}}
-このスキルテストの目的は、 [CSS ボックスモデル](/ja/docs/Learn/CSS/Building_blocks/The_box_model)を理解しているかどうかを評価することです。
+このスキルテストの目的は、 [CSS ボックスモデル](/ja/docs/Learn_web_development/Core/Styling_basics/Box_model)を理解しているかどうかを評価することです。
> [!NOTE]
-> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/)などのオンラインエディターで解決策を試すことができます。
->
-> もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
+> 以下のコードブロックで **"Play"** をクリックすると、 MDN Playground で例を編集することができます。
+> コードをコピー（クリップボードアイコンをクリック）し、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターに貼り付けることもできます。
+> 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
## 課題 1
@@ -25,11 +24,45 @@ l10n:
下記のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}
-
-> [!CALLOUT]
->
-> [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/box-models-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
+```html live-sample___box-models
+標準ボックスモデルを使用しています。
+代替ボックスモデルを使用しています。
+```
+
+```css live-sample___box-models
+body {
+ font: 1.2em / 1.5 sans-serif;
+}
+.box {
+ border: 5px solid rebeccapurple;
+ background-color: lightgray;
+ padding: 40px;
+ margin: 40px;
+ width: 300px;
+ height: 150px;
+}
+
+.alternate {
+ box-sizing: border-box;
+}
+```
+
+{{EmbedLiveSample("box-models", "", "540px")}}
+
+
+ここをクリックすると、解決策を表示します。
+
+2 つ目のブロックの高さと幅を大きくし、パディングと境界線のサイズを追加する必要があります。
+
+```css
+.alternate {
+ box-sizing: border-box;
+ width: 390px;
+ height: 240px;
+}
+```
+
+
## 課題 2
@@ -48,11 +81,36 @@ l10n:
下記のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}
+```html live-sample___mbp
+標準ボックスモデルを使用しています。
+```
+
+```css live-sample___mbp
+body {
+ font: 1.2em / 1.5 sans-serif;
+}
+
+.box {
+}
+```
+
+{{EmbedLiveSample("mbp")}}
-> [!CALLOUT]
->
-> [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/mbp-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
+
+ここをクリックすると、解決策を表示します。
+
+この作業には、マージン、境界線、パディングのプロパティを正しく使用することが含まれます。
+個別指定プロパティ（{{cssxref("margin-top")}}、{{cssxref("margin-right")}} など）を使用することもできますが、すべての辺にマージンとパディングを設定する場合は、一括指定を使用するのがより良い選択でしょう。
+
+```css
+.box {
+ border: 5px dotted black;
+ margin: 20px 1em 40px 2em;
+ padding: 1em;
+}
+```
+
+
## 課題 3
@@ -64,8 +122,53 @@ l10n:
下記のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}
-
-> [!CALLOUT]
->
-> [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/box-model/inline-block-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
+```html live-sample___inline-block
+
+
+ Veggies es bonus vobis, proinde vos postulo essum magis
+ kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
+ garlic.
+
+
+
+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+ tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+ Dandelion cucumber earthnut pea peanut soko zucchini.
+
+
+ここをクリックすると、解決策を表示します。
+
+この課題を解決するには、異なる {{cssxref("display")}} 値を使用するタイミングを理解することが要求されます。
+`display: inline-block` を追加すると、ブロック方向のマージン、境界線、パディングにより、他にも行が要素から押し出されるようになります。
+
+```css
+.box span {
+ background-color: pink;
+ border: 5px solid black;
+ padding: 1em;
+ display: inline-block;
+}
+```
+
+
+
+## 関連情報
+
+- [CSS によるスタイル設定の基本](/ja/docs/Learn_web_development/Core/Styling_basics)
diff --git a/files/ja/learn_web_development/core/styling_basics/cascade_tasks/index.md b/files/ja/learn_web_development/core/styling_basics/cascade_tasks/index.md
index 4eab87a813aed7..33d4683dd4033f 100644
--- a/files/ja/learn_web_development/core/styling_basics/cascade_tasks/index.md
+++ b/files/ja/learn_web_development/core/styling_basics/cascade_tasks/index.md
@@ -1,23 +1,22 @@
---
title: "スキルテスト: カスケード"
slug: Learn_web_development/Core/Styling_basics/Cascade_tasks
-original_slug: Learn/CSS/Building_blocks/Cascade_tasks
l10n:
- sourceCommit: c64e813d8ab9dbe22cbc049c26f7c6703370a2b7
+ sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---
{{LearnSidebar}}
-このスキルテストの目的は、 [CSS における継承の制御](/ja/docs/Learn/CSS/Building_blocks/Selectors)の全般的なプロパティ値を理解しているかどうかを評価することです。
+このスキルテストの目的は、 [CSS における継承の制御](/ja/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts)の全般的なプロパティ値を理解しているかどうかを評価することです。
> [!NOTE]
-> このページのインタラクティブエディターや、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターで解決策を試すことができます。
->
-> もし行き詰まったら、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してみてください。
+> 以下のコードブロックで **"Play"** をクリックすると、 MDN Playground で例を編集することができます。
+> コードをコピー（クリップボードアイコンをクリック）し、[CodePen](https://codepen.io/)、[JSFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのオンラインエディターに貼り付けることもできます。
+> 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。
## 課題 1
-この課題では、[継承の制御](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#継承の制御)の節で見てきた特別な値の 1 つを使用します。実際の色値を用いずに、背景色を白に戻す宣言を新しいルールに書いてください。
+この課題では、[継承の制御](/ja/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#継承の制御)の節で見てきた特別な値の 1 つを使用します。実際の色値を用いずに、背景色を白に戻す宣言を新しいルールに書いてください。
最終結果は下記の画像のようになるはずです。
@@ -25,15 +24,52 @@ l10n:
以下のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascade.html", '100%', 700)}}
+```html live-sample___cascade
+
+```
-> [!CALLOUT]
->
-> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/cascade/cascade-download.html)しましょう。
+```css live-sample___cascade
+#outer div ul .nav a {
+ background-color: powderblue;
+ padding: 5px;
+ display: inline-block;
+ margin-bottom: 10px;
+}
+
+div div li a {
+ color: rebeccapurple;
+}
+```
+
+{{EmbedLiveSample("cascade")}}
+
+
+ここをクリックすると、解決策を表示します。
+
+可能な解決策の一つは次の通りです。
+
+```css
+#outer #inner a {
+ background-color: initial;
+}
+```
+
+この課題では、 2 つのことを行う必要があります。最初の作業は、背景をパウダーブルーにするために使用したセレクターよりも特定の `a` 要素のセレクターを書くことです。この解決策では、非常に高い詳細度を保有する `id` セレクターを使用することで、これを実現します。
+
+次に、すべてのプロパティに特別なキーワード値があることを覚えておく必要があります。この場合、`inherit`を使用すると、背景色は親要素と同じ色に設定されます。
+
+
## 課題 2
-この課題では、[カスケードレイヤーの順序](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#order_of_cascade_layers)の節を活用して変更してください。リンクを rebeccapurple 色にするためにカスケードレイヤーの順序を使用して、 lightgreen の宣言に触れることなく、既存の宣言を編集してください。
+この課題では、[カスケードレイヤーの順序](/ja/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#order_of_cascade_layers)の節を活用して変更してください。リンクを rebeccapurple 色にするためにカスケードレイヤーの順序を使用して、 lightgreen の宣言に触れることなく、既存の宣言を編集してください。
最終結果は下記の画像のようになるはずです。
@@ -41,8 +77,56 @@ l10n:
以下のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascadelayer.html", '100%', 700)}}
-
-> [!CALLOUT]
->
-> 自分自身のエディターやオンラインエディターで作業する場合は、[このタスクの開始点をダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/cascade/cascadelayer-download.html)しましょう。
+```html live-sample___cascade-layer
+
+```
+
+```css live-sample___cascade-layer
+@layer yellow, purple, green;
+
+@layer yellow {
+ #outer div ul .nav a {
+ padding: 5px;
+ display: inline-block;
+ margin-bottom: 10px;
+ }
+}
+@layer purple {
+ div div li a {
+ color: rebeccapurple;
+ }
+}
+@layer green {
+ a {
+ color: lightgreen;
+ }
+}
+```
+
+{{EmbedLiveSample("cascade-layer")}}
+
+
+ここをクリックすると、解決策を表示します。
+
+可能な解決策の一つは次の通りです。
+
+```css
+@layer yellow, green, purple;
+```
+
+この課題で必要なことは 1 つだけです。優先順位を変更して、希望する色の宣言が最後に宣言されたレイヤーになるようにすることです。これが彼の解決策が示す内容です。
+
+レイヤーのない通常のスタイルは、レイヤーのある通常のスタイルよりも優先されることを覚えておく必要があります。しかし、この課題のように、スタイルがすべてレイヤー内に収められている場合は、後で宣言されたレイヤーのスタイルが、先に宣言されたレイヤーのスタイルよりも優先されます。紫のレイヤーを最後に移動すると、緑と黄色のレイヤーよりも優先されるということになります。
+
+
+
+## 関連情報
+
+- [CSS によるスタイル設定の基本](/ja/docs/Learn_web_development/Core/Styling_basics)
diff --git a/files/ja/learn_web_development/core/styling_basics/handling_different_text_directions/index.md b/files/ja/learn_web_development/core/styling_basics/handling_different_text_directions/index.md
index 58401e8b91facd..08c1c906e52b01 100644
--- a/files/ja/learn_web_development/core/styling_basics/handling_different_text_directions/index.md
+++ b/files/ja/learn_web_development/core/styling_basics/handling_different_text_directions/index.md
@@ -1,12 +1,11 @@
---
title: テキストの様々な方向の扱い
slug: Learn_web_development/Core/Styling_basics/Handling_different_text_directions
-original_slug: Learn/CSS/Building_blocks/Handling_different_text_directions
l10n:
- sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3
+ sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---
-{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
+{{LearnSidebar}}
これまで CSS の学習で出会ったプロパティや数値の多くは、画面の物理的な寸法と結びついていました。例えば、境界線はボックスの上、下、左、右に作成します。これらの物理的な寸法は、横書きで表示されるコンテンツにとてもうまく割り当てられ、既定ではウェブは右書きの言語（アラビア語など）よりも左書きの言語（英語やフランス語など）に対応する傾向があります。
@@ -18,14 +17,14 @@ l10n:
前提条件: |
基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本（、HTML の基本（HTML 入門の学習）、CSS がどのように動作するかの考え（CSS の第一歩で学習）の基本的な知識を得ていること。
+ >の学習）、CSS がどのように動作するかの考え（CSS によるスタイル設定の基本で学習）の基本的な知識を得ていること。
|
@@ -41,13 +40,30 @@ CSS の書字方向は、テキストが横書きと縦書きのどちらで実
次の例では、 `writing-mode: vertical-rl` を使用して見出しを表示しています。これで、テキストが垂直方向に進みます。縦書きテキストはグラフィックデザインでは一般的であり、ウェブデザインにより興味深い外観を追加する方法になります。
-{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}
+```html live-sample___simple-vertical
+書字方向で遊びましょう
+```
+
+```css live-sample___simple-vertical
+body {
+ font-family: sans-serif;
+ height: 300px;
+}
+h1 {
+ writing-mode: vertical-rl;
+ color: white;
+ background-color: black;
+ padding: 10px;
+}
+```
+
+{{EmbedLiveSample("simple-vertical", "", "350px")}}
[`writing-mode`](/ja/docs/Web/CSS/writing-mode) プロパティの 3 つの可能な値は次のとおりです。
-- `horizontal-tb`: 上から下へのブロックの流れの方向。文は横書きになります。
-- `vertical-rl`: 右から左へのブロックの流れの方向。文は縦書きになります。
-- `vertical-lr`: 左から右へのブロックの流れの方向。文は縦書きになります。
+- `horizontal-tb`: 上から下の方向へブロックが流れます。文は横書きになります。
+- `vertical-rl`: 右から左の方向へブロックが流れます。文は縦書きになります。
+- `vertical-lr`: 左から右の方向へブロックが流れます。文は縦書きになります。
したがって、 `writing-mode` プロパティは、実際には、ページにブロックレベルの要素が表示される方向（上から下、右から左、または左から右）を設定します。これにより、文章内のテキストの流れが決まります。
@@ -57,7 +73,44 @@ CSS の書字方向は、テキストが横書きと縦書きのどちらで実
例を見れば、これはより明確になります。この次の例では、見出しと段落を含む 2 つのボックスがあります。 1 つ目は、 `writing-mode: horizontal-tb` を使用します。これは、横書きでページの上部から下部に向かって書いていく書字方向です。 2 番目は `writing-mode: vertical-rl` を使用します。これは、縦書きで右から左に書いていく書字方向です。
-{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}
+```html live-sample___block-inline
+
+
+
見出し
+
CSS での書字方向をデモする段落です。
+
+
+
見出し
+
CSS での書字方向をデモする段落です。
+
+
+
+
見出し
+
CSS での書字方向をデモする段落です。
+
これらのボックスには width が設定されています。
+
+
+
見出し
+
CSS での書字方向をデモする段落です。
+
これらのボックスには width が設定されています。
+
+
+
+
見出し
+
CSS での書字方向をデモする段落です。
+
これらのボックスには inline-size が設定されています。
+
+
+
見出し
+
CSS での書字方向をデモする段落です。
+
これらのボックスには inline-size が設定されています。
+
+
+
+
物理的プロパティ
+
CSS の論理的プロパティをデモする段落です。
+
+
+
論理的プロパティ
+
CSS の論理的プロパティをデモする段落です。
+
+
+
+
+
+ このボックスは論理的プロパティを使用しています。星の画像は inline-start で浮動化されており、 inline-end と block-end にもマージンがあります。
+
+
+
+ - hex color
+ - RGB color
+ - HSL color
+ - Alpha value 0.6
+
+```
+
+```css hidden live-sample___color
+body {
+ font: 1.2em / 1.5 sans-serif;
+}
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+li {
+ margin: 1em;
+ padding: 0.5em;
+}
+```
+
+```css live-sample___color
+.hex {
+ background-color: #86defa;
+}
+
+/* ここにスタイルを追加してください */
+```
+
+{{EmbedLiveSample("color", "", "300px")}}
+
+
+ここをクリックすると、解決策を表示します。
+
+[色変換ツール](https://convertingcolors.com/hex-color-86DEFA.html)を使用することで、異なる[色関数](/ja/docs/Web/CSS/color_value#構文)を使用して同じ色を異なる方法で定義できるようになります。
+
+```css
+.hex {
+ background-color: #86defa;
+}
+
+.rgb {
+ background-color: rgb(134 222 250);
+}
+
+.hsl {
+ background-color: hsl(194 92% 75%);
+}
+
+.transparency {
+ background-color: rgb(134 222 250 / 60%);
+}
+```
+
+
## 課題 2
@@ -50,11 +103,66 @@ l10n:
下記のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/values/length.html", '100%', 1000)}}
+```html live-sample___length
+Level 1 heading
+
+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+ daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+
+Level 2 heading
+
+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+ tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+ Dandelion cucumber earthnut pea peanut soko zucchini.
+
+```
+
+```css hidden live-sample___length
+body {
+ font: 1.2em / 1.5 sans-serif;
+}
+```
+
+```css live-sample___length
+h1 {
+}
+
+h2 {
+}
+
+p {
+}
+
+h1 + p {
+}
+```
+
+{{EmbedLiveSample("length", "", "420px")}}
+
+
+ここをクリックすると、解決策を表示します。
+
+次の長さの値を使用することができます。
+
+```css
+h1 {
+ font-size: 50px;
+}
+
+h2 {
+ font-size: 2em;
+}
-> [!CALLOUT]
->
-> [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/values/length-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
+p {
+ font-size: 16px;
+}
+
+h1 + p {
+ font-size: 120%;
+}
+```
+
+
## 課題 3
@@ -66,8 +174,41 @@ l10n:
下記のライブコードを更新して、完成例を再現してみてください。
-{{EmbedGHLiveSample("css-examples/learn/tasks/values/position.html", '100%', 800)}}
+```html live-sample___position
+
+```
+
+```css hidden live-sample___position
+.box {
+ border: 5px solid #000;
+ height: 350px;
+}
+```
+
+```css live-sample___position
+.box {
+ background-image: url(https://mdn.github.io/shared-assets/images/examples/purple-star.png);
+ background-repeat: no-repeat;
+}
+```
+
+{{EmbedLiveSample("position", "", "400px")}}
+
+
+ここをクリックすると、解決策を表示します。
+
+`background-position` に `center` キーワードとパーセント値を使用します。
+
+```css
+.box {
+ background-image: url(https://mdn.github.io/shared-assets/images/examples/purple-star.png);
+ background-repeat: no-repeat;
+ background-position: center 20%;
+}
+```
+
+
+
+## 関連情報
-> [!CALLOUT]
->
-> [この課題の最初の段階のファイルをダウンロード](https://github.com/mdn/css-examples/blob/main/learn/tasks/values/position-download.html)すると、自分のエディターやオンラインエディターで取り組むことができます。
+- [CSS によるスタイル設定の基本](/ja/docs/Learn_web_development/Core/Styling_basics)