chore(i18n,learn): processed translations (#47592)

2026-05-05 09:01:18 -04:00 · 2022-09-22 11:12:18 -07:00
parent a62f78cd22
commit 7a43eda3cd
24 changed files with 1735 additions and 3 deletions
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md
@@ -0,0 +1,53 @@
+---
+id: 5d822fd413a79914d39e98c9
+title: ステップ 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+CSS 変数を使ったスカイラインのプロジェクトにようこそ！ まず、読み込まれるドキュメントの種類をブラウザーに伝えるために、ドキュメントの先頭に `!DOCTYPE html` 宣言を追加しましょう。
+
+# --hints--
+
+コードに `DOCTYPE` 参照を入れる必要があります。
+
+```js
+assert(code.match(/<!DOCTYPE/gi));
+```
+
+`DOCTYPE` 参照の後にスペースを入れる必要があります。
+
+```js
+assert(code.match(/<!DOCTYPE\s+/gi));
+```
+
+ドキュメントタイプが `html` であると定義する必要があります。
+
+```js
+assert(code.match(/html/gi));
+```
+
+タイプの後ろに `>` を入力して、`DOCTYPE` 宣言を閉じる必要があります。
+
+```js
+assert(code.match(/html\s*>/gi));
+```
+
+`DOCTYPE` 宣言は HTML の先頭にある必要があります。
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md
@@ -0,0 +1,54 @@
+---
+id: 5d822fd413a79914d39e98ca
+title: ステップ 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+`DOCTYPE` の下に `html` の開始タグと終了タグを追加して、コードを書き始める場所を用意しましょう。 言語は英語に設定してください。
+
+# --hints--
+
+`DOCTYPE` 宣言は HTML の先頭にある必要があります。
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
+```
+
+`html` 要素が開始タグを持ち、`lang` 属性が `en` という値に設定されている必要があります。
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+`html` 要素には終了タグが必要です。
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+`html` タグは正しい順序になっている必要があります。
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>\s*<\/html\s*>/));
+```
+
+`html` 要素は 1 つだけにしてください。
+
+```js
+assert(document.querySelectorAll('html').length === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md
@@ -0,0 +1,69 @@
+---
+id: 5d822fd413a79914d39e98cb
+title: ステップ 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+次に、`html` 要素内に `head` タグと `body` タグの開始タグおよび終了タグを追加してください。
+
+# --hints--
+
+`head` の開始タグが 1 つ必要です。
+
+```js
+assert(code.match(/<head\s*>/i));
+```
+
+`head` の終了タグが 1 つ必要です。
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+`body` の開始タグが 1 つ必要です。
+
+```js
+assert(code.match(/<body\s*>/i));
+```
+
+`body` の終了タグが 1 つ必要です。
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+`head` 要素と `body` 要素は兄弟要素である必要があります。
+
+```js
+assert(document.querySelector('head').nextElementSibling.localName === 'body');
+```
+
+`head` 要素は `html` 要素の中にある必要があります。
+
+```js
+assert([...document.querySelector('html').children].some(x => x.localName === 'head'));
+```
+
+`body` 要素は `html` 要素の中にある必要があります。
+
+```js
+assert([...document.querySelector('html').children].some(x => x.localName === 'body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+--fcc-editable-region--
+<html lang="en">
+
+</html>
+--fcc-editable-region--
+
+```
+
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md
@@ -0,0 +1,108 @@
+---
+id: 5d822fd413a79914d39e98cc
+title: ステップ 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+`head` 内に、`charset` として `UTF-8` を指定する `meta` 要素と、`City Skyline` というタイトルを持つ `title` 要素と、`styles.css` ファイルにリンクする `link` 要素をネストしてください。
+
+# --hints--
+
+`head` 要素の中に新しい `meta` 要素を作成する必要があります。
+
+```js
+assert.exists(document.querySelector('head > meta'));
+```
+
+`meta` タグに、値が `UTF-8` に設定されている `charset` 属性を加える必要があります。
+
+```js
+assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8');
+```
+
+コードには `title` 要素が 1 つ必要です。
+
+```js
+const title = document.querySelector('title');
+assert.exists(title);
+```
+
+`title` 要素は `head` 要素内にある必要があります。
+
+```js
+assert.exists(document.querySelector('head > title'));
+```
+
+プロジェクトには `City Skyline` というタイトルが必要です。
+
+```js
+const title = document.querySelector('title');
+assert.equal(title.text.toLowerCase(), 'city skyline')
+```
+
+タイトルについて、大文字小文字の区別とスペルに気をつけましょう。
+
+```js
+const title = document.querySelector('title');
+assert.equal(title.text, 'City Skyline');
+```
+
+コードには `link` 要素が 1 つ必要です。
+
+```js
+assert.match(code, /<link/)
+```
+
+既存の `head` タグを変更しないようにしてください。 終了タグを削除していないか確認してください。
+
+```js
+const heads = document.querySelectorAll('head');
+assert.equal(heads?.length, 1);
+```
+
+自己終了要素 `link` が 1 つ必要です。
+
+```js
+assert(document.querySelectorAll('link').length === 1);
+```
+
+`link` 要素は `head` 要素の中にある必要があります。
+
+```js
+assert.exists(document.querySelector('head > link'));
+```
+
+`link` 要素には `rel` 属性があり、値が `stylesheet` に設定されている必要があります。
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+`link` 要素には `href` 属性があり、値が `styles.css` に設定されている必要があります。
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md
@@ -0,0 +1,56 @@
+---
+id: 5d822fd413a79914d39e98cd
+title: ステップ 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+CSS では、アスタリスク (*) ですべての要素を選択できます。 すべての要素に境界線を追加するため、`*` セレクターを使用して `border` を `1px solid black` に設定してください。 これは要素の位置とサイズを視覚化するのに役立つ技です。 この設定は後ほど削除します。
+
+# --hints--
+
+`*` セレクターを使用する必要があります。
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+`border` プロパティを使用してすべての要素のスタイルを設定する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('border'));
+```
+
+すべての要素が `1px solid black` の境界線を持つ必要があります。
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles?.border, '1px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md
@@ -0,0 +1,61 @@
+---
+id: 5d822fd413a79914d39e98ce
+title: ステップ 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+更に、すべての要素の `box-sizing` を `border-box` に設定してください。 この設定により、境界線を追加しても要素のサイズが増加しなくなります。
+
+# --hints--
+
+`box-sizing` プロパティを使用する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing'));
+```
+
+既存の `*` セレクターを使用してください。
+
+```js
+// Two selectors create two CSSStyleRule objects
+assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1);
+```
+
+すべての要素の `box-sizing` が `border-box` に設定される必要があります。
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles.boxSizing, 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+}
+
+--fcc-editable-region--
+
+```
+
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md
@@ -0,0 +1,69 @@
+---
+id: 5d822fd413a79914d39e98cf
+title: ステップ 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+`body` (ページに表示されている内側のボックス) が見えます。その周りのボックスは `html` 要素です。 `body` をビューポートいっぱいに広げるため、`height` を `100vh` に設定してください。 また、`body` からデフォルトの `margin` を取り除くために `margin` を `0` に設定してください。 最後に、ビューポートの外にはみ出す要素があった場合に表示されるスクロールバーを隠すため、`overflow` プロパティを `hidden` に設定してください。
+
+# --hints--
+
+`body` セレクターを使用してください。
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+`body` の `height` を `100vh` に設定する必要があります。
+
+```js
+const bodyStyles = new __helpers.CSSHelp(document).getStyle('body');
+assert.equal(bodyStyles?.height, '100vh');
+```
+
+`body` の `margin` を `0` に設定する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+`body` の `overflow` プロパティを `hidden` に設定する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md
@@ -0,0 +1,65 @@
+---
+id: 5d822fd413a79914d39e98d0
+title: ステップ 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+`body` 内に、`background-buildings` というクラスを持つ `div` 要素を作成してください。 これがビル群のコンテナーになります。
+
+# --hints--
+
+`div` 要素を作成してください。
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+`div` 要素は `body` の中にある必要があります。
+
+```js
+assert(document.querySelector('div')?.parentElement?.localName === 'body');
+```
+
+`div` 要素には `background-buildings` のクラスが必要です。
+
+```js
+assert([...document.querySelector('div')?.classList]?.includes('background-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+```
+
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md
@@ -0,0 +1,68 @@
+---
+id: 5d822fd413a79914d39e98d1
+title: ステップ 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+背景のビル群 (background buildings) の要素について `width` と `height` を `100%` に設定し、親要素である `body` の幅および高さ全体に広がるようにしましょう。
+
+# --hints--
+
+`background-buildings` クラスを使用して正しい要素を選択する必要があります。
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings'));
+```
+
+`.background-buildings` 要素の `width` が `100%` でなければなりません。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%');
+```
+
+`.background-buildings` 要素の `height` が `100%` でなければなりません。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md
@@ -0,0 +1,83 @@
+---
+id: 5d822fd413a79914d39e98d2
+title: ステップ 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+背景のビル群のコンテナー内に、クラス `bb1` を持つ `div` をネストしてください。 次に `styles.css` ファイルを開いて、`.bb1` の `width` を `10%` に、`height` を `70%` に設定してください。 「bb」は「background building」の略で、これを 1 つ目のビルにします。
+
+# --hints--
+
+新しい `div` 要素を作成してください。
+
+```js
+assert.equal(document.querySelectorAll('div').length, 2);
+```
+
+新しい `div` にクラス `bb1` を設定してください。
+
+```js
+assert.exists(document.querySelector('div.bb1'));
+```
+
+要素のスタイル設定にクラスセレクター `.bb1` を使用する必要があります。
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1'));
+```
+
+`.bb1` 要素の `width` を `10%` に設定する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%');
+```
+
+`.bb1` 要素の `height` を `70%` に設定する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+```
+
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md
@@ -0,0 +1,105 @@
+---
+id: 5d822fd413a79914d39e98d3
+title: ステップ 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+`.bb1` コンテナー内に `div` 要素を 4 つネストしてください。 それぞれのクラスを順に `bb1a`、`bb1b`、`bb1c`、`bb1d` としてください。 このビルは 4 つのパーツから成ります。
+
+# --hints--
+
+新しい `div` 要素を 4 つ作成する必要があります。
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 6);
+```
+
+新しい `div` 要素の 1 つに `bb1a` というクラスを設定する必要があります。
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+新しい `div` 要素の 1 つに `bb1b` というクラスを設定する必要があります。
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+新しい `div` 要素の 1 つに `bb1c` というクラスを設定する必要があります。
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+新しい `div` 要素の 1 つに `bb1d` というクラスを設定する必要があります。
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+```
+
+新しい `div` 要素を正しい順番で配置する必要があります。
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d'));
+```
+
+新しい `div` 要素は `.bb1` 要素の中に入れる必要があります。
+
+```js
+assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+--fcc-editable-region--
+      <div class="bb1"></div>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+```
+
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md
@@ -0,0 +1,138 @@
+---
+id: 5d822fd413a79914d39e98d4
+title: ステップ 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+ビルの各パーツの `width` プロパティと `height` プロパティの値を、`.bb1a` は `70%` と `10%`、`.bb1b` は `80%` と `10%`、`.bb1c` は `90%` と `10%`、`.bb1d` は `100%` と `70%` に設定してください。 これらのパーセンテージは親に対する相対値であること、高さが合計 100% となってコンテナーの高さ全体を占めることに注目してください。
+
+# --hints--
+
+クラスセレクターを使用して `.bb1a` のスタイルを指定してください。
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a'));
+```
+
+`.bb1a` の `width` を `70%` に設定する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%');
+```
+
+`.bb1a` の `height` を `10%` に設定する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%');
+```
+
+クラスセレクターを使用して `.bb1b` のスタイルを指定してください。
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b'));
+```
+
+`.bb1b` の `width` を `80%` に設定する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%');
+```
+
+`.bb1b` の `height` を `10%` に設定する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%');
+```
+
+クラスセレクターを使用して `.bb1c` のスタイルを指定してください。
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c'));
+```
+
+`.bb1c` の `width` を `90%` に設定する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%');
+```
+
+`.bb1c` の `height` を `10%` に設定する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%');
+```
+
+クラスセレクターを使用して `.bb1d` のスタイルを指定してください。
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d'));
+```
+
+`.bb1d` の `width` を `100%` に設定する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%');
+```
+
+`.bb1d` の `height` を `70%` に設定する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
@@ -0,0 +1,112 @@
+---
+id: 5d822fd413a79914d39e98d5
+title: ステップ 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+`.bb1` の要素のスタイルプロパティとして、`display: flex;`、`flex-direction: column;`、`align-items: center;` を設定してください。 この設定により「フレックス」または「フレックスボックス」と呼ばれる方法で、ビルのパーツが中央に配置されます。 フレックスボックスについては別のプロジェクトで詳しく学習します。
+
+# --hints--
+
+`.bb1` の `width` および `height` プロパティは変更しないでください。
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.width, '10%');
+assert.equal(bb1Style?.height, '70%');
+```
+
+`.bb1` 要素の `display` を `flex` に設定する必要があります。
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.display, 'flex');
+```
+
+`.bb1` 要素の `flex-direction` を `column` に設定する必要があります。
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.flexDirection, 'column');
+```
+
+`.bb1` 要素の `align-items` を `center` に設定する必要があります。
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.alignItems, 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
+
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
@@ -0,0 +1,103 @@
+---
+id: 5d822fd413a79914d39e98d6
+title: ステップ 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+少しビルらしく見えてきました。 ではここで初めての変数を作成しましょう。 変数の宣言は 2 つのハイフン (`-`) で書き始め、変数名と値を「`--variable-name: value;`」という形式で指定します。 `.bb1` クラス内に `--building-color1` という名前の変数を作成し、`#999` という値を代入してください。
+
+# --hints--
+
+`--building-color1` という名前の新しい変数を作成してください。
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1'));
+```
+
+変数 `--building-color1` は `.bb1` の中で定義してください。
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+```
+
+`--building-color1` に値 `#999` を代入してください。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
@@ -9,11 +9,11 @@ dashedName: step-1

 HTML 要素は、`<h1>` のような開始タグと `</h1>` のような終了タグを持ちます。

+要素のテキストは開始タグと終了タグの間に入ります。
+
 `h1` 要素を見つけて、そのテキストを下記に変更してください:

- `CatPhotoApp`
-
-テキストが開始タグと終了タグの間にあることを確認してください。
+`CatPhotoApp`

 # --hints--

--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md
@@ -0,0 +1,112 @@
+---
+id: 60b69a66b6ddb80858c51578
+title: ステップ 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+HTML 構造の準備から始めましょう。 `<!DOCTYPE>` 宣言と、`lang` 属性を `en` に設定した `html` 要素を追加してください。 `html` 要素の中に `head` 要素と `body` 要素を追加してください。
+
+# --hints--
+
+コードに `DOCTYPE` 参照を入れる必要があります。
+
+```js
+assert(code.match(/<!DOCTYPE/gi));
+```
+
+`DOCTYPE` 参照の後にスペースを入れる必要があります。
+
+```js
+assert(code.match(/<!DOCTYPE\s+/gi));
+```
+
+ドキュメントタイプが `html` であると定義する必要があります。
+
+```js
+assert(code.match(/html/gi));
+```
+
+タイプの後ろに `>` を入力して、`DOCTYPE` 宣言を閉じる必要があります。
+
+```js
+assert(code.match(/html\s*>/gi));
+```
+
+`DOCTYPE` 宣言は HTML の先頭にある必要があります。
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
+```
+
+`html` 要素には `lang` 属性 `en` を持つ開始タグが必要です。
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+`html` 要素には終了タグが必要です。
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+`head` の開始タグが 1 つ必要です。
+
+```js
+assert(code.match(/<head\s*>/i));
+```
+
+`head` の終了タグが 1 つ必要です。
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+`body` の開始タグが 1 つ必要です。
+
+```js
+assert(code.match(/<body\s*>/i));
+```
+
+`body` の終了タグが 1 つ必要です。
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+`head` 要素と `body` 要素は兄弟要素である必要があります。
+
+```js
+assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
+```
+
+`head` 要素は `html` 要素の中にある必要があります。
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
+```
+
+`body` 要素は `html` 要素の中にある必要があります。
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```css
+
+```
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md
@@ -0,0 +1,63 @@
+---
+id: 60b69a66b6ddb80858c51579
+title: ステップ 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+`head` 要素内に `meta` タグを追加し、`charset` 属性を `utf-8` に設定してください。 また、`title` 要素を追加して、`Picasso Painting` というテキストを設定してください。
+
+# --hints--
+
+`meta` 要素が 1 つ必要です。
+
+```js
+assert(document.querySelectorAll('meta').length === 1);
+```
+
+`meta` 要素には `charset` 属性が必要です。
+
+```js
+assert(document.querySelector('meta')?.getAttribute('charset'));
+```
+
+`charset` 属性を `utf-8` に設定する必要があります。
+
+```js
+assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8');
+```
+
+`title` 要素が 1 つ必要です。
+
+```js
+assert(document.querySelectorAll('title').length === 1);
+```
+
+`title` 要素は `Picasso Painting` というテキストをもつ必要があります。 スペルや大文字小文字の区別に気をつけましょう。
+
+```js
+assert(document.querySelector('title')?.innerText === 'Picasso Painting');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+  </head>
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md
@@ -0,0 +1,56 @@
+---
+id: 60b69a66b6ddb80858c5157a
+title: ステップ 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+FontAwesome とは SVG アイコンのライブラリで、大部分が無料で利用できます。 このプロジェクトでは FontAwesome のアイコンをいくつか使用するので、HTML に外部スタイルシートをリンクする必要があります。
+
+`link` 要素を追加して、`rel` を `stylesheet` に、`href` は `https://use.fontawesome.com/releases/v5.8.2/css/all.css` に設定してください。
+
+# --hints--
+
+`link` 要素が 2 つ必要です。
+
+```js
+assert(document.querySelectorAll('link').length === 2);
+```
+
+`link` 要素の `rel` は `stylesheet` に設定されている必要があります。
+
+```js
+assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet');
+```
+
+`link` 要素の `href` は `https://use.fontawesome.com/releases/v5.8.2/css/all.css` に設定されている必要があります。
+
+```js
+assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    --fcc-editable-region--
+
+    --fcc-editable-region--
+  </head>
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md
@@ -0,0 +1,50 @@
+---
+id: 60b69a66b6ddb80858c5157b
+title: ステップ 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+では絵画を作り始めます。まず `body` 要素の `background-color` を `rgb(184, 132, 46)` に設定してください。
+
+# --hints--
+
+`body` セレクターを使用してください。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+`body` 要素の `background-color` プロパティが `rgb (184, 132, 46)` に設定されている必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md
@@ -0,0 +1,51 @@
+---
+id: 60b69a66b6ddb80858c5157c
+title: ステップ 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+本文 (body) タグ内に `div` 要素を追加してください。 その `id` を `back-wall` に設定してください。
+
+# --hints--
+
+`div` 要素が 1 つ必要です。
+
+```js
+assert(document.querySelectorAll('div').length === 1);
+```
+
+`div` 要素の `id` の値を `back-wall` に設定する必要があります。
+
+```js
+assert(document.querySelector('div')?.getAttribute('id') === 'back-wall');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+```
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md
@@ -0,0 +1,71 @@
+---
+id: 60b80da8676fb3227967a731
+title: ステップ 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+まだ CSS は書いていませんが、先に CSS ファイルをリンクしておきましょう。
+
+`link` 要素を追加して、`rel` を `stylesheet` に、 `href` を `styles.css` に設定してください。
+
+# --hints--
+
+
+コードには `link` 要素が 1 つ必要です。
+
+```js
+assert.match(code, /<link/)
+```
+
+自己終了要素 `link` が 1 つ必要です。
+
+```js
+assert(document.querySelectorAll('link').length === 1);
+```
+
+`link` 要素は `head` 要素の中にある必要があります。
+
+```js
+assert.exists(document.querySelector('head > link'));
+```
+
+`link` 要素は値が `stylesheet` に設定されている `rel` 属性を持つ必要があります。
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+`link` 要素は値が `styles.css` に設定されている `href` 属性を持つ必要があります。
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    --fcc-editable-region--
+
+    --fcc-editable-region--
+  </head>
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md
@@ -0,0 +1,55 @@
+---
+id: 615f2abbe7d18d49a1e0e1c8
+title: ステップ 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+基本的な HTML ボイラープレートはあらかじめ用意しておきました。
+
+`body` 要素内に `h1` 要素を作成し、`Nutrition Facts` というテキストを設定してください。
+
+# --hints--
+
+新しい `h1` 要素を 1 つ追加してください。
+
+```js
+assert.exists(document.querySelector('h1'));
+```
+
+`h1` 要素は `body` 要素の中にある必要があります。
+
+```js
+assert(document.querySelector('h1')?.parentElement?.localName === 'body');
+```
+
+`h1` 要素のテキストは `Nutrition Facts` でなければなりません。
+
+```js
+assert(document.querySelector('h1')?.innerText === 'Nutrition Facts');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+  </head>
+  <body>
+
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md
@@ -0,0 +1,60 @@
+---
+id: 615f2d4150fe0d4cbd0f2628
+title: ステップ 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+`h1` 要素の下に `p` 要素を追加して、テキストを `8 servings per container` にしてください。
+
+# --hints--
+
+新しい `p` 要素を 1 つ追加してください。
+
+```js
+assert.exists(document.querySelector('p'));
+```
+
+`p` 要素は `body` 要素の中にある必要があります。
+
+```js
+assert(document.querySelector('p')?.parentElement?.localName === 'body');
+```
+
+`p` 要素を `h1` 要素の後に置く必要があります。
+
+```js
+assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1');
+```
+
+`p` 要素には `8 servings per container` というテキストが必要です。
+
+```js
+assert(document.querySelector('p')?.innerText === '8 servings per container');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+  </head>
+  <body>
+    <h1>Nutrition Facts</h1>
+
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md
@@ -0,0 +1,70 @@
+---
+id: 615f3b091162165948e1cb33
+title: ステップ 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+ブラウザーの開発者ツールで `.label` 要素を調べると、幅が 270 ピクセルではなく実際は 288 ピクセルになっていることに気づくかもしれません。 これは、ブラウザーが要素のサイズを決定する際、デフォルトでは境界線とパディングが含まれるためです。
+
+これを解消するには、`*` セレクターを作成して `box-sizing` プロパティを `border-box` に設定することで、ボックスモデルをリセットします。
+
+# --hints--
+
+`*` セレクターを作成する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+`*` セレクターの `box-sizing` プロパティを `border-box` に設定する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <p>8 servings per container</p>
+      <p>Serving size 2/3 cup (55g)</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+```