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

curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md

@@ -0,0 +1,47 @@
+---
+id: bd7158d8c242eddfaeb5bd13
+title: 個人ポートフォリオのウェブページを作成する
+challengeType: 3
+forumTopicId: 301143
+dashedName: build-a-personal-portfolio-webpage
+---
+
+# --description--
+
+**目標:** こちら <https://codepen.io/freeCodeCamp/full/zNBOYG> と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを構築します。
+
+以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を満たし、すべてのテストがパスするようにしてください。 あなた独自のスタイルを与えてください。
+
+このプロジェクトを完了するために、HTML、JavaScript、CSS を使用することができます。 これまでのレッスンでカバーされた純粋な CSS の練習をするため、純粋な CSS の使用を推奨します。 Bootstrap や SASS を使用しても構いません。 このプロジェクトで追加のテクノロジー (jQuery、React、Angular、Vue など) を使用することは推奨されません。使用する場合は自己責任で使用してください。 React のようなさまざまな技術スタックで作業する機会は他のプロジェクトで得られます。 私達は、このプロジェクトの推奨技術スタックを使用している場合の問題報告は全て受け入れ、修正するように努めます。 ハッピーコーディング！
+
+**ユーザーストーリー #1:** 私のポートフォリオには、`welcome-section` の id を持つウェルカムセクションがあります。
+
+**ユーザーストーリー #2:** ウェルカムセクションにはテキストを含む `h1` 要素があります。
+
+**ユーザーストーリー #3:** 私のポートフォリオには、`projects` の id を持つプロジェクトセクションがあります。
+
+**ユーザーストーリー #4:** プロジェクトセクションには、プロジェクトを入れるために少なくとも 1 つの `project-tile` クラスの要素があります。
+
+**ユーザーストーリー #5:** プロジェクトセクションには、少なくとも 1 つのプロジェクトへのリンクが含まれている必要があります。
+
+**ユーザーストーリー #6:** 私のポートフォリオには、 `navbar` の id を持つナビゲーションバーがあります。
+
+**ユーザーストーリー #7:** ナビゲーションバーには、クリックするとページ上の異なるセクションに移動できるリンクが少なくとも 1 つあります。
+
+**ユーザーストーリー #8:** 私のポートフォリオには `profile-link`の id を持つリンクがあり、GitHub または FCC プロフィールを新しいタブで開くことができます。
+
+**ユーザーストーリー #9:** 私のポートフォリオには、少なくとも 1 つのメディアクエリがあります。
+
+**ユーザーストーリー #10:** ウェルカムセクションの高さはビューポートの高さと等しくなければなりません。
+
+**ユーザーストーリー #11:** ナビゲーションバーは常にビューポートの上部に表示されている必要があります。
+
+<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>この CodePen テンプレートを使用して</a>あなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen を作成することができます。 または、この CDN リンクを使用して任意の環境でテストを実行できます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+完了したら、すべてのテストがパスする状態の作業プロジェクトの URL を送信します。
+
+# --solutions--
+
+```html
+// solution required
+```

curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md

@@ -0,0 +1,55 @@
+---
+id: 587d78af367417b2b2512b04
+title: プロダクトのランディングページを作成する
+challengeType: 3
+forumTopicId: 301144
+dashedName: build-a-product-landing-page
+---
+
+# --description--
+
+**目標:** こちら <https://codepen.io/freeCodeCamp/full/RKRbwL> と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを構築します。
+
+以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を満たし、すべてのテストがパスするようにしてください。 あなた独自のスタイルを与えてください。
+
+このプロジェクトを完了するために、HTML、JavaScript、CSS を使用することができます。 これまでのレッスンでカバーされた純粋な CSS の練習をするため、純粋な CSS の使用を推奨します。 Bootstrap や SASS を使用しても構いません。 このプロジェクトで追加のテクノロジー (jQuery、React、Angular、Vue など) を使用することは推奨されません。使用する場合は自己責任で使用してください。 React のようなさまざまな技術スタックで作業する機会は他のプロジェクトで得られます。 私達は、このプロジェクトの推奨技術スタックを使用している場合の問題報告は全て受け入れ、修正するように努めます。 ハッピーコーディング！
+
+**ユーザーストーリー #1:** 私のプロダクトランディングページには `id="header"` を持つ `header` 要素があります。
+
+**ユーザーストーリー #2:** `header` 要素内には `id="header-img"` を持つ画像が表示されます。 会社のロゴがあればここでいいイメージを与えることができるでしょう。
+
+**ユーザーストーリー #3:** `#header` 要素内に `id="nav-bar"` を持つ `nav` 要素があります。
+
+**ユーザーストーリー #4:** `nav` 要素内に少なくとも 3 つのクリック可能な `nav-link` クラスの要素があります。
+
+**ユーザーストーリー #5:** `nav` 要素内の `.nav-link` ボタンをクリックしたら、ランディングページの対応するセクションに移動します。
+
+**ユーザーストーリー #6:** `id="video"` を持つプロダクトの埋め込み動画を見ることができます。
+
+**ユーザーストーリー #7:** 私のランディングページには `id="form"` を持つ `form` 要素があります。
+
+**ユーザーストーリー #8:** フォーム内には、Eメールアドレスが入力可能な `id="email"` を持つ `input` フィールドがあります。
+
+**ユーザーストーリー #9:** `#email` 入力フィールドには、フィールドの用途をユーザーに知らせるためのプレイスホルダ―テキストが必要です。
+
+**ユーザーストーリー #10:** `#email` 入力フィールドは、入力されたテキストがメールアドレスであるか確認するために HTML5 のバリデーションを使用します。
+
+**ユーザーストーリー #11:** フォーム内には、`id="submit"` を持つ送信ボタンの `input` があります。
+
+**ユーザーストーリー #12:** `#submit` 要素をクリックすると、email の情報が静的ページに送信されます (このモック URL を使用してください: <https://www.freecodecamp.com/email-submit>)。
+
+**ユーザーストーリー #13:** ナビゲーションバーは常にビューポートの上部に表示されている必要があります。
+
+**ユーザーストーリー #14:** 私のプロダクトランディングページには、少なくとも 1 つのメディアクエリがあります。
+
+**ユーザーストーリー #15:** 私のプロダクトランディングページは、少なくとも 1 つの CSS フレックスボックスを使用しています。
+
+<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>この CodePen テンプレートを使用して</a>あなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen を作成することができます。 または、この CDN リンクを使用して任意の環境でテストを実行できます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+完了したら、すべてのテストがパスする状態の作業プロジェクトの URL を送信します。
+
+# --solutions--
+
+```html
+// solution required
+```

curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md

@@ -0,0 +1,57 @@
+---
+id: 587d78af367417b2b2512b03
+title: アンケートフォームを作成する
+challengeType: 3
+forumTopicId: 301145
+dashedName: build-a-survey-form
+---
+
+# --description--
+
+**目標:** こちら <https://codepen.io/freeCodeCamp/full/VPaoNP> と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを構築します。
+
+以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を満たし、すべてのテストがパスするようにしてください。 あなた独自のスタイルを与えてください。
+
+このプロジェクトを完了するために、HTML、JavaScript、CSS を使用することができます。 これまでのレッスンでカバーされた純粋な CSS の練習をするため、純粋な CSS の使用を推奨します。 Bootstrap や SASS を使用しても構いません。 このプロジェクトで追加のテクノロジー (jQuery、React、Angular、Vue など) を使用することは推奨されません。使用する場合は自己責任で使用してください。 React のようなさまざまな技術スタックで作業する機会は他のプロジェクトで得られます。 私達は、このプロジェクトの推奨技術スタックを使用している場合の問題報告は全て受け入れ、修正するように努めます。 ハッピーコーディング！
+
+**ユーザーストーリー #1:** `id="title"` を持つ H1 サイズテキストのタイトルがあります。
+
+**ユーザーストーリー #2:** `id="description"` を持つ P サイズテキストの短い説明文があります。
+
+**ユーザーストーリー #3:** `id="survey-form"` を持つ `form` があります。
+
+**ユーザーストーリー #4:** フォーム要素内では、`id="name"` を持つフィールドに名前入力が必須となっています。
+
+**ユーザーストーリー #5:** フォーム要素内では、`id="email"` を持つフィールドにメールアドレス入力が必須となっています。
+
+**ユーザーストーリー #6:** メールアドレスとして正しいフォーマットでない内容を入力すると、HTML5 のバリデーションエラーが表示されます。
+
+**ユーザーストーリー #7: ** フォーム要素内では、`id="number"` を持つフィールドに数字を入力することができます。
+
+**ユーザーストーリー #8:** 数字ではない内容を入力すると、HTML5 のバリデーションエラーが表示されます。
+
+**ユーザーストーリー #9:** `min` と `max` 属性で定義した範囲外の数字を入力すると、HTML5 のバリデーションエラーが表示されます。
+
+**ユーザーストーリー #10:** フォーム内の名前、メール、数字入力フィールドには、各フィールドの目的を説明する次のラベルが含まれます: `id="name-label"`、`id="email-label"`、`id="number-label"`。
+
+**ユーザーストーリー #11:** 名前、メール、数値の入力フィールドには、各フィールドの説明や指示を示すプレイスホルダ―テキストが表示されます。
+
+**ユーザーストーリー #12:** フォーム要素内では、対応する `id="dropdown"` を持つドロップダウンからオプションを選択できます。
+
+**ユーザーストーリー #13:** フォーム要素内では、1 つ以上のグループからなるラジオボタンでフィールドを選択できます。 各グループは `name` 属性を使用してグループ化する必要があります。
+
+**ユーザーストーリー #14:** フォーム要素内では、一連のチェックボックスからいくつかのフィールドを選択することができ、それぞれは `value` 属性を持つ必要があります。
+
+**ユーザーストーリー #15:** フォーム要素内では、追加でコメントするために最後に `textarea` を表示します。
+
+**ユーザーストーリー #16:** フォーム要素内では、すべての入力内容を送信するため `id="submit"` を持つボタンを表示します。
+
+<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>この CodePen テンプレートを使用して</a>あなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen を作成することができます。 または、この CDN リンクを使用して任意の環境でテストを実行できます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+完了したら、すべてのテストがパスする状態の作業プロジェクトの URL を送信します。
+
+# --solutions--
+
+```html
+// solution required
+```

curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md

@@ -0,0 +1,55 @@
+---
+id: 587d78b0367417b2b2512b05
+title: テクニカルドキュメントページを作成する
+challengeType: 3
+forumTopicId: 301146
+dashedName: build-a-technical-documentation-page
+---
+
+# --description--
+
+**目標:** こちら <https://codepen.io/freeCodeCamp/full/NdrKKL> と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを構築します。
+
+以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を満たし、すべてのテストがパスするようにしてください。 あなた独自のスタイルを与えてください。
+
+このプロジェクトを完了するために、HTML、JavaScript、CSS を使用することができます。 これまでのレッスンでカバーされた純粋な CSS の練習をするため、純粋な CSS の使用を推奨します。 Bootstrap や SASS を使用しても構いません。 このプロジェクトで追加のテクノロジー (jQuery、React、Angular、Vue など) を使用することは推奨されません。使用する場合は自己責任で使用してください。 React のようなさまざまな技術スタックで作業する機会は他のプロジェクトで得られます。 私達は、このプロジェクトの推奨技術スタックを使用している場合の問題報告は全て受け入れ、修正するように努めます。 ハッピーコーディング！
+
+**ユーザーストーリー #1:** `id="main-doc"` を持ち、ページのメインコンテンツ (テクニカルドキュメント) を含む `main` 要素があります。
+
+**ユーザーストーリー #2:** `#main-doc` 要素内に、それぞれのクラスが `main-section` である複数の `section` 要素があります。 最低でも 5 個必要です。
+
+**ユーザーストーリー #3:** 各 `.main-section` 内の最初の要素は、そのセクションの主なトピックを説明するテキストを含む `header` 要素でなければなりません。
+
+**ユーザーストーリー #4:** クラスが `main-section` の各 `section` 要素は、それぞれの `header` のテキストに対応する id も持つ必要があります。 すべてのスペースはアンダースコアに置き換える必要があります (例: "JavaScript and Java" ヘッダーを含む `section` には対応する `id="JavaScript_and_Java"` が必要です)。
+
+**ユーザーストーリー #5:** `.main-section` 要素は少なくとも (それぞれではなく) 合計で 10 個の `p` 要素を含む必要があります。
+
+**ユーザーストーリー #6:** `.main-section` 要素は少なくとも (それぞれではなく) 合計で 5 個の `code` 要素を含む必要があります。
+
+**ユーザーストーリー #7:** `.main-section` 要素は少なくとも (それぞれではなく) 合計で 5 個の `li` 要素を含む必要があります。
+
+**ユーザーストーリー #8:** `id="navbar"` を持つ `nav` 要素があります。
+
+**ユーザーストーリー #9:** navbar 要素には、テクニカルドキュメントのトピックを説明するテキストを含む `header` 要素が含まれている必要があります。
+
+**ユーザーストーリー #10:** さらに、ナビゲーションバーには `nav-link` のクラスを持つリンク (`a`) 要素が含まれている必要があります。 これはクラス `main-section` の各要素ごとに一つ存在する必要があります。
+
+**ユーザーストーリー #11:** ナビゲーションバーの `header` 要素は navbar のどのリンク (`a`) 要素よりも前に置かれなければなりません。
+
+**ユーザーストーリー #12:** `nav-link` クラスの各要素には、各 `section` 内の `header` テキストに対応するテキストが含まれていなければなりません (例えば、もし "Hello world" セクション / ヘッダーがあるならば、ナビゲーションバーには "Hello world" テキストを含む要素が必要です) 。
+
+**ユーザーストーリー #13:** ナビゲーションバーの要素をクリックしたとき、ページは `main-doc` 要素の対応するセクションに移動しなければなりません (例えば、"Hello world" テキストを含む `nav-link` 要素をクリックしたなら、その id を持ち対応する `header` を含む `section` 要素に移動しなければなりません)。
+
+**ユーザーストーリー #14:** 通常サイズのデバイス上 (ラップトップ、デスクトップ) では、`id="navbar"` を持つ要素は画面の左側に表示され、常にユーザーから見える状態にしなければなりません。
+
+**ユーザーストーリー #15:** 私のテクニカルドキュメントページは、少なくとも 1 つのメディアクエリを使う必要があります。
+
+<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>この CodePen テンプレートを使用して</a>あなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen を作成することができます。 または、この CDN リンクを使用して任意の環境でテストを実行できます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+完了したら、すべてのテストがパスする状態の作業プロジェクトの URL を送信します。
+
+# --solutions--
+
+```html
+// solution required
+```

curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md

@@ -0,0 +1,43 @@
+---
+id: bd7158d8c442eddfaeb5bd18
+title: トリビュートページを作成する
+challengeType: 3
+forumTopicId: 301147
+dashedName: build-a-tribute-page
+---
+
+# --description--
+
+**目標:** こちら <https://codepen.io/freeCodeCamp/full/zNqgVx> と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを構築します。
+
+以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を満たし、すべてのテストがパスするようにしてください。 あなた独自のスタイルを与えてください。
+
+このプロジェクトを完了するために、HTML、JavaScript、CSS を使用することができます。 これまでのレッスンでカバーされた純粋な CSS の練習をするため、純粋な CSS の使用を推奨します。 Bootstrap や SASS を使用しても構いません。 このプロジェクトで追加のテクノロジー (jQuery、React、Angular、Vue など) を使用することは推奨されません。使用する場合は自己責任で使用してください。 React のようなさまざまな技術スタックで作業する機会は他のプロジェクトで得られます。 私達は、このプロジェクトの推奨技術スタックを使用している場合の問題報告は全て受け入れ、修正するように努めます。 ハッピーコーディング！
+
+**ユーザーストーリー #1:** 私のトリビュートページには `id="main"` を持つ要素があり、その中に他のすべての要素が含まれます。
+
+**ユーザーストーリー #2:** `id="title"` を持つ要素があり、これにはトリビュートページで取り上げる対象者 (例: "Dr. Norman Borlaug) を説明する文字列 (すなわちテキスト) が記載されています。
+
+**ユーザーストーリー #3:** `id="img-div"` が付随する `figure` または `div` 要素のどちらか一方が表示される必要があります。
+
+**ユーザーストーリー #4:** `img-div` 要素内に、`id="image"` を持つ `img` 要素があります。
+
+**ユーザーストーリー #5:** `img-div` 要素内には、`id="img-caption"` を持つ要素があり、`img-div` 内に表示されている画像を説明するテキストコンテンツを含みます。
+
+**ユーザーストーリー #6:** `id="tribute-info"` を持つ要素があり、これにはトリビュートページの対象者を説明するテキストコンテンツが含まれます。
+
+**ユーザーストーリー #7:** `id="tribute-link"` を持つ `a` 要素があり、これはトリビュートページの対象者に関する追加情報を含む外部サイトへのリンクです。 ヒント: リンクを新しいタブで開くためには、要素に `target` 属性を与え、その値に `_blank` を設定しなければなりません (つまり `target="_blank"` となります)。
+
+**ユーザーストーリー #8:** `img` 要素は、オリジナルのサイズを超えることなく親要素の幅に応じてレスポンシブにサイズが変更される必要があります。
+
+**ユーザーストーリー #9:** `img` 要素は、その親要素内で中央に配置される必要があります。
+
+<a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>この CodePen テンプレートを使用して</a>あなたのプロジェクトを構築することができます。`Save` をクリックすると、あなた用の pen (CodePen 上の作品) を作成することができます。 または、この CDN リンクを使用して任意の環境でテストを実行できます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+完了したら、すべてのテストがパスする状態の作業プロジェクトの URL を送信します。
+
+# --solutions--
+
+```html
+// solution required
+```